refactor(ui): migrate files 2/2 (#257)

packages/ui-new/jest.config.ts

@@ -0,0 +1,29 @@
+import type { Config } from '@jest/types';
+
+const config: Config.InitialOptions = {
+  preset: 'ts-jest',
+  testEnvironment: 'jsdom',
+  transform: {
+    // Enable JS/JSX transformation
+    '\\.(ts|js)x?$': 'ts-jest',
+  },
+  transformIgnorePatterns: [
+    '[/\\\\]node_modules[/\\\\]((?!ky[/\\\\]).)+\\.(js|jsx|mjs|cjs|ts|tsx)$',
+  ],
+  moduleNameMapper: {
+    // Map path alias in `tsconfig.json`
+    '@/(.*)': '<rootDir>/src/$1',
+    // Mock CSS Modules
+    '\\.module\\.(css|sass|scss)$': 'identity-obj-proxy',
+  },
+  setupFilesAfterEnv: ['<rootDir>/src/jest.setup.ts'],
+  coveragePathIgnorePatterns: ['/node_modules/', '/dist/'],
+  coverageReporters: ['text-summary', 'lcov'],
+  globals: {
+    'ts-jest': {
+      tsconfig: './tsconfig.test.json',
+    },
+  },
+};
+
+export default config;

packages/ui-new/package.json

@@ -8,8 +8,10 @@
     "precommit": "lint-staged",
     "start": "parcel src/index.html",
     "check": "tsc --noEmit",
-    "build": "rm -rf dist && parcel build src/index.html --no-autoinstall",
+    "build": "pnpm check && rm -rf dist && parcel build src/index.html --no-autoinstall",
-    "stylelint": "stylelint \"src/**/*.scss\""
+    "lint": "eslint --ext .ts --ext .tsx src",
+    "stylelint": "stylelint \"src/**/*.scss\"",
+    "test": "jest"
   },
   "dependencies": {
     "@logto/phrases": "^0.1.0",
@@ -24,22 +26,28 @@
     "react-router-dom": "^5.2.0"
   },
   "devDependencies": {
+    "@jest/types": "^27.5.1",
     "@parcel/core": "^2.3.1",
     "@parcel/transformer-sass": "^2.3.1",
     "@silverhand/eslint-config": "^0.8.1",
     "@silverhand/eslint-config-react": "^0.8.1",
     "@silverhand/ts-config": "^0.8.1",
     "@silverhand/ts-config-react": "^0.8.1",
+    "@testing-library/react": "^12.0.0",
+    "@types/jest": "^27.4.0",
     "@types/react": "^17.0.14",
     "@types/react-dom": "^17.0.9",
     "@types/react-router-dom": "^5.3.2",
     "eslint": "^8.1.0",
+    "identity-obj-proxy": "^3.0.0",
+    "jest": "^27.5.1",
     "lint-staged": "^11.1.1",
     "parcel": "^2.3.1",
     "postcss": "^8.4.6",
     "postcss-modules": "^4.3.0",
     "prettier": "^2.3.2",
-    "stylelint": "^13.13.1"
+    "stylelint": "^13.13.1",
+    "ts-jest": "^27.0.5"
   },
   "alias": {
     "@/*": "./src/$1"

packages/ui-new/src/App.tsx

@@ -23,7 +23,7 @@ const App = () => {
           <Route exact path="/register" component={Register} />
         </Switch>
       </BrowserRouter>
-    </AppContent >
+    </AppContent>
   );
 };
 

packages/ui-new/src/jest.setup.ts

@@ -0,0 +1,18 @@
+// https://jestjs.io/docs/manual-mocks#mocking-methods-which-are-not-implemented-in-jsdom
+// eslint-disable-next-line @silverhand/fp/no-mutating-methods
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: jest.fn().mockImplementation((query) => ({
+    matches: false,
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+    media: query,
+    onchange: null,
+    addListener: jest.fn(), // Deprecated
+    removeListener: jest.fn(), // Deprecated
+    addEventListener: jest.fn(),
+    removeEventListener: jest.fn(),
+    dispatchEvent: jest.fn(),
+  })),
+});
+
+export {};

packages/ui-new/tsconfig.json

@@ -1,6 +1,7 @@
 {
   "extends": "@silverhand/ts-config-react/tsconfig.base",
   "compilerOptions": {
+    "baseUrl": "./",
     "paths": {
       "@/*": [
         "./src/*"
@@ -8,6 +9,7 @@
     }
   },
   "include": [
-    "src"
+    "src",
+    "jest.config.ts"
   ]
 }

packages/ui-new/tsconfig.test.json

@@ -0,0 +1,6 @@
+{
+  "extends": "./tsconfig",
+  "compilerOptions": {
+    "allowJs": true
+  }
+}