chore: use swc to run jest unit test

lint-staged.config.js

@@ -1,4 +1,4 @@
 module.exports = {
   "**/*.{ts,js}": ["eslint --fix"],
-  "**/*.{ts,js,json,md,yml,yaml}": ["prettier --write"]
+  "**/*.{json,md,yml,yaml}": ["prettier --write"]
 };

package.json

@@ -17,6 +17,7 @@
     "configure": "monorepo ci configure",
     "test": "lerna run test --stream",
     "test:e2e": "lerna run test:e2e",
+    "test:coverage:update": "lerna run test:coverage:update --stream",
     "lint": "yarn eslint --config .eslintrc --quiet \"packages/**/*.{ts,tsx,js,jsx}\"",
     "lint:fix": "yarn lint --fix",
     "prettier": "prettier '**/*.{ts,js,json,md,yml,yaml}' --write",
@@ -43,7 +44,7 @@
     "connected-react-router": "6.9.1",
     "formiojs": "^4.14.8",
     "history": "5.3.0",
-    "lerna": "3.22.1",
+    "lerna": "5.1.8",
     "lodash": "4.17.20",
     "react": "17.0.2",
     "react-dom": "17.0.2",
@@ -55,39 +56,41 @@
     "tooltip.js": "^1.3.3"
   },
   "devDependencies": {
-    "@commitlint/cli": "^16.2.4",
-    "@commitlint/config-conventional": "^16.2.4",
-    "@craco/craco": "6.1.1",
-    "@testing-library/jest-dom": "^5.11.4",
-    "@testing-library/react": "^11.1.0",
-    "@testing-library/user-event": "^12.1.10",
+    "@commitlint/cli": "^17.0.3",
+    "@commitlint/config-conventional": "^17.0.3",
+    "@swc/core": "^1.2.208",
+    "@swc/jest": "^0.2.21",
     "@tsed/monorepo-utils": "1.17.8",
     "@types/ejs": "^3.0.5",
     "@types/jest": "27.0.2",
     "@types/lodash": "4.14.168",
     "@types/node": "^14.14.20",
     "@types/prop-types": "15.7.3",
-    "@typescript-eslint/eslint-plugin": "^5.23.0",
-    "@typescript-eslint/parser": "^5.23.0",
+    "@testing-library/dom": "^8.14.0",
+    "@testing-library/jest-dom": "^5.16.4",
+    "@testing-library/react": "^12.1.5",
+    "@testing-library/user-event": "^14.2.1",
     "cross-env": "7.0.3",
-    "eslint-config-react-app": "^7.0.1",
     "babel-eslint": "^10.1.0",
     "eslint": "^8.15.0",
-    "eslint-plugin-flowtype": "^8.0.3",
-    "eslint-plugin-import": "^2.22.0",
-    "eslint-plugin-jest": "^26.1.5",
-    "eslint-plugin-react": "^7.29.4",
-    "eslint-plugin-react-hooks": "^4.5.0",
-    "eslint-plugin-testing-library": "^5.5.0",
+    "eslint-config-react-app": "^7.0.1",
     "eslint-plugin-jsx-a11y": "^6.5.1",
     "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-prettier": "4.0.0",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-react": "^7.30.1",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-simple-import-sort": "^7.0.0",
+    "eslint-plugin-testing-library": "^5.5.1",
+    "eslint-plugin-workspaces": "^0.7.0",
+    "jest": "^28.1.2",
+    "jest-environment-jsdom": "^28.1.2",
+    "jest-watch-typeahead": "^1.1.0",
     "husky": "^8.0.1",
     "lint-staged": "10.5.4",
     "microbundle": "0.13.0",
     "prettier": "^2.6.2",
     "prettier-eslint": "^14.0.3",
-    "react-scripts": "4.0.3",
     "semantic-release": "19.0.3",
     "semantic-release-slack-bot": "3.5.3",
     "typescript": "^4.1.3",

packages/config/bin/package.json

@@ -0,0 +1,3 @@
+{
+  "type": "module"
+}

packages/config/bin/write-coverage.js

@@ -0,0 +1,24 @@
+#!/usr/bin/env node
+import fs from "fs-extra";
+import { join } from "path";
+
+async function writeCoverage(cwd) {
+  const coveragePath = join(cwd, "coverage.json");
+
+  const {
+    total: { lines, statements, functions, branches }
+  } = await fs.readJson(join(cwd, "coverage/coverage-summary.json"));
+
+  fs.writeJson(
+    coveragePath,
+    {
+      statements: statements.pct,
+      branches: branches.pct,
+      functions: functions.pct,
+      lines: lines.pct
+    },
+    { spaces: 2 }
+  );
+}
+
+writeCoverage(process.cwd());

packages/config/jest/cssTransform.js

@@ -0,0 +1,14 @@
+
+
+// This is a custom Jest transformer turning style imports into empty objects.
+// http://facebook.github.io/jest/docs/en/webpack.html
+
+module.exports = {
+  process() {
+    return { code: "module.exports = {};" };
+  },
+  getCacheKey() {
+    // The output is always the same.
+    return "cssTransform";
+  }
+};

packages/config/jest/fileTransform.js

@@ -0,0 +1,42 @@
+
+
+const path = require("path");
+const camelcase = require("camelcase");
+
+// This is a custom Jest transformer turning file imports into filenames.
+// http://facebook.github.io/jest/docs/en/webpack.html
+
+module.exports = {
+  process(src, filename) {
+    const assetFilename = JSON.stringify(path.basename(filename));
+
+    if (filename.match(/\.svg$/)) {
+      // Based on how SVGR generates a component name:
+      // https://github.com/smooth-code/svgr/blob/01b194cf967347d43d4cbe6b434404731b87cf27/packages/core/src/state.js#L6
+      const pascalCaseFilename = camelcase(path.parse(filename).name, {
+        pascalCase: true
+      });
+      const componentName = `Svg${pascalCaseFilename}`;
+      return {
+        code: `const React = require('react');
+      module.exports = {
+        __esModule: true,
+        default: ${assetFilename},
+        ReactComponent: React.forwardRef(function ${componentName}(props, ref) {
+          return {
+            $$typeof: Symbol.for('react.element'),
+            type: 'svg',
+            ref: ref,
+            key: null,
+            props: Object.assign({}, props, {
+              children: ${assetFilename}
+            })
+          };
+        }),
+      };`
+      };
+    }
+
+    return { code: `module.exports = ${assetFilename};` };
+  }
+};

packages/config/jest/jest.node.config.js

@@ -0,0 +1,26 @@
+/** @type {import("ts-jest/dist/types").InitialOptionsTsJest} */
+
+module.exports = {
+  roots: ["<rootDir>/src"],
+  collectCoverageFrom: ["src/**/*.{js,jsx,ts,tsx}", "!src/**/*.d.ts", "!src/mocks/**", "!src/__mock__/**"],
+  coveragePathIgnorePatterns: [],
+  testEnvironment: "node",
+  transform: {
+    "^.+\\.(t|j)sx?$": ["@swc/jest", require("./swc.node.json")]
+    // "^.+\\.(t|j)sx?$": ["ts-jest"]
+  },
+  transformIgnorePatterns: ["[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs|cjs|ts|tsx)$", "^.+\\.module\\.(css|sass|scss)$"],
+  modulePaths: ["<rootDir>/src"],
+  moduleNameMapper: {},
+  moduleFileExtensions: [
+    // Place tsx and ts to beginning as suggestion from Jest team
+    // https://jestjs.io/docs/configuration#modulefileextensions-arraystring
+    "tsx",
+    "ts",
+    "js",
+    "json",
+    "jsx",
+    "node"
+  ],
+  watchPlugins: ["jest-watch-typeahead/filename", "jest-watch-typeahead/testname"]
+};

packages/config/jest/jest.web.config.js

@@ -0,0 +1,34 @@
+/** @type {import('ts-jest/dist/types').InitialOptionsTsJest} */
+module.exports = {
+  roots: ['<rootDir>/src'],
+  collectCoverageFrom: ['src/**/*.{js,jsx,ts,tsx}', '!src/**/*.d.ts', '!src/mocks/**', '!src/__mock__/**'],
+  coveragePathIgnorePatterns: [],
+  testEnvironment: 'jsdom',
+  setupFilesAfterEnv: [require.resolve('./setupTest.js')],
+  transform: {
+    '^.+\\.(t|j)sx?$': ['@swc/jest', require('./swc.web.json')],
+    '^.+\\.css$': require.resolve('./cssTransform.js'),
+    '^(?!.*\\.(js|jsx|mjs|cjs|ts|tsx|css|json)$)': require.resolve('./fileTransform.js')
+  },
+  transformIgnorePatterns: [ '^.+\\.module\\.(css|sass|scss)$'],
+  modulePaths: ['<rootDir>/src'],
+  moduleNameMapper: {
+    '^react-native$': 'react-native-web',
+    '^.+\\.module\\.(css|sass|scss)$': 'identity-obj-proxy'
+  },
+  moduleFileExtensions: [
+    // Place tsx and ts to beginning as suggestion from Jest team
+    // https://jestjs.io/docs/configuration#modulefileextensions-arraystring
+    'tsx',
+    'ts',
+    'web.js',
+    'js',
+    'web.ts',
+    'web.tsx',
+    'json',
+    'web.jsx',
+    'jsx',
+    'node'
+  ],
+  watchPlugins: ['jest-watch-typeahead/filename', 'jest-watch-typeahead/testname']
+}

packages/config/jest/setupTest.js

@@ -0,0 +1,29 @@
+import '@testing-library/jest-dom/extend-expect'
+
+window.matchMedia = (query) => ({
+  matches: false,
+  media: query,
+  onchange: null,
+  addEventListener: jest.fn(),
+  removeEventListener: jest.fn(),
+  dispatchEvent: jest.fn(),
+  addListener: jest.fn(),
+  removeListener: jest.fn()
+})
+
+Object.defineProperty(URL, 'createObjectURL', {
+  writable: true,
+  value: jest.fn()
+})
+
+if (typeof window !== 'undefined') {
+  window.scrollTo = jest.fn()
+
+  jest.mock(
+    'react-svg',
+    () =>
+      function Svg () {
+        return ''
+      }
+  )
+}

packages/config/jest/swc.node.json

@@ -0,0 +1,28 @@
+{
+  "jsc": {
+    "target": "es2021",
+    "parser": {
+      "syntax": "typescript",
+      "tsx": true,
+      "decorators": true,
+      "dynamicImport": true,
+      "privateMethod": true,
+      "exportDefaultFrom": true,
+      "importMeta": true
+    },
+    "transform": {
+      "hidden": {
+        "jest": true
+      },
+      "legacyDecorator": true,
+      "decoratorMetadata": true
+    }
+  },
+  "module": {
+    "type": "commonjs",
+    "strict": false,
+    "strictMode": true,
+    "lazy": false,
+    "noInterop": false
+  }
+}