Setup Jest for frontend unit testing (#314)

Signed-off-by: Griffin-Sullivan <gsulliva@redhat.com>

clients/ui/frontend/babel.config.js

@@ -0,0 +1,17 @@
+module.exports = {
+    presets: [
+      [
+        '@babel/preset-env',
+        {
+          targets: {
+            chrome: 110,
+          },
+          useBuiltIns: 'usage',
+          corejs: '3',
+        },
+      ],
+      '@babel/preset-react',
+      '@babel/preset-typescript',
+    ],
+  };
+

clients/ui/frontend/config/transform.file.js

@@ -0,0 +1,8 @@
+const path = require('path');
+
+module.exports = {
+  process(src, filename) {
+    const assetFilename = JSON.stringify(path.basename(filename));
+    return `module.exports = ${assetFilename};`;
+  }
+};

clients/ui/frontend/config/transform.style.js

@@ -0,0 +1 @@
+module.exports = {};

clients/ui/frontend/jest.config.js

@@ -2,31 +2,46 @@
 // https://jestjs.io/docs/en/configuration.html
 
 module.exports = {
+  roots: ['<rootDir>/src/'],
+  testMatch: [
+    '**/src/__tests__/unit/**/?(*.)+(spec|test).ts?(x)',
+    '**/__tests__/?(*.)+(spec|test).ts?(x)',
+  ],
+
   // Automatically clear mock calls and instances between every test
   clearMocks: true,
 
-  // Indicates whether the coverage information should be collected while executing the test
-  collectCoverage: false,
-
-  // The directory where Jest should output its coverage files
-  coverageDirectory: 'coverage',
-
   // An array of directory names to be searched recursively up from the requiring module's location
-  moduleDirectories: [
-    'node_modules',
-    '<rootDir>/src'
-  ],
+  moduleDirectories: ['node_modules', '<rootDir>/src'],
 
   // A map from regular expressions to module names that allow to stub out resources with a single module
   moduleNameMapper: {
-    '\\.(css|less)$': '<rootDir>/__mocks__/styleMock.js',
-    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': '<rootDir>/__mocks__/fileMock.js',
-    '@app/(.*)': '<rootDir>/src/app/$1'
+    '\\.(css|less|sass|scss)$': '<rootDir>/config/transform.style.js',
+    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
+      '<rootDir>/config/transform.file.js',
+    '~/(.*)': '<rootDir>/src/$1',
   },
 
-  // A preset that is used as a base for Jest's configuration
-  preset: 'ts-jest/presets/js-with-ts',
-
   // The test environment that will be used for testing.
-  testEnvironment: 'jsdom'
+  testEnvironment: 'jest-environment-jsdom',
+
+  // include projects from node_modules as required
+  transformIgnorePatterns: [
+    'node_modules/(?!yaml|lodash-es|uuid|@patternfly|delaunator)',
+  ],
+
+  // A list of paths to snapshot serializer modules Jest should use for snapshot testing
+  snapshotSerializers: [],
+
+  setupFilesAfterEnv: ['<rootDir>/src/__tests__/unit/jest.setup.ts'],
+
+  coverageDirectory: 'jest-coverage',
+
+  collectCoverageFrom: [
+    '<rootDir>/src/**/*.{ts,tsx}',
+    '!<rootDir>/src/__tests__/**',
+    '!<rootDir>/src/__mocks__/**',
+    '!**/*.spec.{ts,tsx}',
+  ],
 };
+