Add base support for using jest

.eslintrc.yml

@@ -25,6 +25,7 @@ extends:
   - "standard"
   - "plugin:react/recommended"
   - "plugin:@typescript-eslint/recommended"
+  - "plugin:jest-dom/recommended"
 rules:
   quotes:
     - warn

babel.config.js

@@ -1,14 +1,6 @@
-module.exports = {
+module.exports = function (api) {
-    presets: [
+    let targets = {};
-        '@babel/typescript',
+    const plugins = [
-        ['@babel/env', {
-            modules: false,
-            useBuiltIns: 'entry',
-            corejs: 3,
-        }],
-        '@babel/react',
-    ],
-    plugins: [
         'babel-plugin-macros',
         'styled-components',
         'react-hot-loader/babel',
@@ -19,5 +11,24 @@ module.exports = {
         '@babel/proposal-optional-chaining',
         '@babel/proposal-nullish-coalescing-operator',
         '@babel/syntax-dynamic-import',
+    ];
+
+    if (api.env('test')) {
+        targets = { node: 'current' };
+        plugins.push('@babel/transform-modules-commonjs');
+    }
+
+    return {
+        presets: [
+            ['@babel/env', {
+                modules: false,
+                corejs: 3,
+                useBuiltIns: 'entry',
+                targets,
+            }],
+            '@babel/typescript',
+            '@babel/react',
         ],
+        plugins: plugins,
+    };
 };

jest.config.js

@@ -0,0 +1,28 @@
+const { pathsToModuleNameMapper } = require('ts-jest');
+const { compilerOptions } = require('./tsconfig');
+
+/** @type {import('ts-jest').InitialOptionsTsJest} */
+module.exports = {
+    preset: 'ts-jest',
+    globals: {
+        'ts-jest': {
+            isolatedModules: true,
+        },
+    },
+    moduleFileExtensions: ['js', 'ts', 'tsx', 'd.ts', 'json', 'node'],
+    moduleNameMapper: {
+        '\\.(jpe?g|png|gif|svg)$': '<rootDir>/resources/scripts/__mocks__/file.ts',
+        '\\.(s?css|less)$': 'identity-obj-proxy',
+        ...pathsToModuleNameMapper(compilerOptions.paths, {
+            prefix: '<rootDir>/',
+        }),
+    },
+    setupFilesAfterEnv: [
+        '<rootDir>/resources/scripts/setupTests.ts',
+    ],
+    transform: {
+        '.*\\.[t|j]sx$': 'babel-jest',
+        '.*\\.ts$': 'ts-jest',
+    },
+    testPathIgnorePatterns: ['/node_modules/'],
+};

package.json

@@ -95,6 +95,7 @@
         "@babel/plugin-proposal-object-rest-spread": "^7.16.0",
         "@babel/plugin-proposal-optional-chaining": "^7.16.0",
         "@babel/plugin-syntax-dynamic-import": "^7.8.3",
+        "@babel/plugin-transform-modules-commonjs": "^7.16.8",
         "@babel/plugin-transform-react-jsx": "^7.16.0",
         "@babel/plugin-transform-runtime": "^7.16.0",
         "@babel/preset-env": "^7.16.0",
@@ -102,10 +103,14 @@
         "@babel/preset-typescript": "^7.16.0",
         "@babel/runtime": "^7.16.3",
         "@tailwindcss/forms": "^0.4.0",
+        "@testing-library/jest-dom": "^5.16.2",
+        "@testing-library/react": "^12.1.4",
+        "@testing-library/user-event": "^13.5.0",
         "@types/chart.js": "^2.9.34",
         "@types/debounce": "^1.2.1",
         "@types/events": "^3.0.0",
         "@types/history": "^4.7.9",
+        "@types/jest": "^27.4.1",
         "@types/node": "^16.11.7",
         "@types/qrcode.react": "^1.0.2",
         "@types/query-string": "^6.3.0",
@@ -125,6 +130,7 @@
         "@typescript-eslint/eslint-plugin": "^4.33.0",
         "@typescript-eslint/parser": "^4.33.0",
         "autoprefixer": "^10.4.2",
+        "babel-jest": "^27.5.1",
         "babel-loader": "^8.2.3",
         "babel-plugin-macros": "^3.1.0",
         "babel-plugin-styled-components": "^2.0.3",
@@ -134,11 +140,14 @@
         "eslint": "^7.32.0",
         "eslint-config-standard": "^16.0.3",
         "eslint-plugin-import": "^2.25.3",
+        "eslint-plugin-jest-dom": "^4.0.1",
         "eslint-plugin-node": "^11.1.0",
         "eslint-plugin-promise": "^5.1.1",
         "eslint-plugin-react": "^7.27.0",
         "eslint-plugin-react-hooks": "^4.3.0",
         "fork-ts-checker-webpack-plugin": "^6.4.0",
+        "identity-obj-proxy": "^3.0.0",
+        "jest": "^27.5.1",
         "postcss": "^8.4.6",
         "postcss-import": "^14.0.2",
         "postcss-loader": "^4.0",
@@ -151,6 +160,7 @@
         "tailwindcss": "^3.0.23",
         "terser-webpack-plugin": "^4.2.3",
         "ts-essentials": "^9.1.2",
+        "ts-jest": "^27.1.3",
         "twin.macro": "^2.8.2",
         "typescript": "^4.4.4",
         "webpack": "^4.46.0",

resources/scripts/__mocks__/file.ts

@@ -0,0 +1 @@
+module.exports = 'test-file-stub';

resources/scripts/setupTests.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';