test: setup jest and everything

.swcrc

@@ -0,0 +1,31 @@
+{
+    "jsc": {
+        "target": "es2020",
+        "parser": {
+            "syntax": "typescript",
+            "tsx": true,
+            "decorators": false,
+            "dynamicImport": false
+        },
+        "transform": {
+            "react": {
+                "pragma": "React.createElement",
+                "pragmaFrag": "React.Fragment",
+                "throwIfNamespace": true,
+                "development": false,
+                "useBuiltins": false,
+                "runtime": "automatic"
+            },
+            "hidden": {
+                "jest": true
+            }
+        }
+    },
+    "module": {
+        "type": "commonjs",
+        "strict": false,
+        "strictMode": true,
+        "lazy": false,
+        "noInterop": false
+    }
+}

jest.config.cjs

@@ -0,0 +1,31 @@
+module.exports = {
+  roots: ['<rootDir>/src'],
+  collectCoverageFrom: ['src/**/*.{js,jsx,ts,tsx}', '!src/**/*.d.ts', '!src/mocks/**'],
+  coveragePathIgnorePatterns: [],
+  setupFilesAfterEnv: ['./src/test-utils/setup-jest.ts'],
+  testEnvironment: 'jsdom',
+  modulePaths: ['<rootDir>/src'],
+  transform: {
+    '^.+\\.(ts|js|tsx|jsx)$': '@swc/jest',
+  },
+  transformIgnorePatterns: [
+    '[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs|cjs|ts|tsx)$',
+    '^.+\\.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',
+    'js',
+    'json',
+    'jsx',
+  ],
+  // watchPlugins: ['jest-watch-typeahead/filename', 'jest-watch-typeahead/testname'],
+  resetMocks: true,
+};

package.json

@@ -5,9 +5,10 @@
   "type": "module",
   "scripts": {
     "start": "vite",
-    "build": "tsc && vite build",
+    "build": "tsc -p tsconfig.prod.json && vite build",
     "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "format": "prettier -w .",
+    "test": "NODE_ENV=test jest",
     "preview": "vite preview"
   },
   "dependencies": {
@@ -26,9 +27,16 @@
   },
   "devDependencies": {
     "@rollup/plugin-replace": "^5.0.2",
+    "@swc/core": "^1.3.58",
+    "@swc/jest": "^0.2.26",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^14.4.3",
+    "@types/jest": "^29.5.1",
     "@types/node": "^20.1.1",
     "@types/react": "^18.0.28",
     "@types/react-dom": "^18.0.11",
+    "@types/testing-library__jest-dom": "^5.14.5",
     "@typescript-eslint/eslint-plugin": "^5.57.1",
     "@typescript-eslint/parser": "^5.57.1",
     "@vitejs/plugin-react": "^4.0.0",
@@ -36,6 +44,8 @@
     "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.3.4",
+    "jest": "^29.5.0",
+    "jest-environment-jsdom": "^29.5.0",
     "typescript": "^5.0.2",
     "vite": "^4.3.2",
     "vite-plugin-top-level-await": "^1.3.0",

src/__test__/hello.test.tsx

@@ -0,0 +1,6 @@
+import { render, screen } from '@testing-library/react';
+
+test('hello', () => {
+  render(<div>hello</div>);
+  expect(screen.getByText('hello') as any).toBeInTheDocument();
+});

src/test-utils/setup-jest.ts

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

tsconfig.json

@@ -1,10 +1,13 @@
 {
   "compilerOptions": {
     "target": "ESNext",
-    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "lib": [
+      "DOM",
+      "DOM.Iterable",
+      "ESNext"
+    ],
     "module": "ESNext",
     "skipLibCheck": true,
-
     /* Bundler mode */
     "moduleResolution": "bundler",
     "allowImportingTsExtensions": true,
@@ -12,18 +15,24 @@
     "isolatedModules": true,
     "noEmit": true,
     "jsx": "react-jsx",
-
     /* Linting */
     "strict": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true,
-
     "baseUrl": ".",
     "paths": {
-      "~/*": ["src/*"]
-    }
+      "~/*": [
+        "src/*"
+      ]
+    },
   },
-  "include": ["src"],
-  "references": [{ "path": "./tsconfig.node.json" }]
+  "include": [
+    "src"
+  ],
+  "references": [
+    {
+      "path": "./tsconfig.node.json"
+    }
+  ]
 }

tsconfig.prod.json

@@ -0,0 +1,8 @@
+{
+  "extends": "./tsconfig",
+  "exclude": [
+    "./src/__tests__/**",
+    "./src/__mocks__/**",
+    "./src/test-utils"
+  ]
+}