refactor: front-end testing with vitest (#1900)

* refactor: front-end testing with vitest

* fix: fix build failed

.github/workflows/nocobase-test-full.yml

@@ -53,7 +53,7 @@ jobs:
           cache: 'yarn'
       - run: yarn install
       - name: Test with Sqlite
-        run: yarn nocobase install -f && yarn test
+        run: yarn nocobase install -f && yarn test && yarn test:client
         env:
           DB_DIALECT: sqlite
           DB_STORAGE: /tmp/db.sqlite
@@ -94,7 +94,7 @@ jobs:
       - run: yarn install
       # - run: yarn build
       - name: Test with postgres
-        run: yarn nocobase install -f && yarn test
+        run: yarn nocobase install -f && yarn test && yarn test:client
         env:
           DB_DIALECT: postgres
           DB_HOST: postgres
@@ -131,7 +131,7 @@ jobs:
       - run: yarn install
       # - run: yarn build
       - name: Test with MySQL
-        run: yarn nocobase install -f && yarn test
+        run: yarn nocobase install -f && yarn test && yarn test:client
         env:
           DB_DIALECT: mysql
           DB_HOST: mysql

.github/workflows/nocobase-test-lite.yml

@@ -69,7 +69,7 @@ jobs:
           cache: 'yarn'
       - run: yarn install
       - name: Test with postgres
-        run: yarn nocobase install -f && yarn test
+        run: yarn nocobase install -f && yarn test && yarn test:client
         env:
           DB_DIALECT: postgres
           DB_HOST: postgres

jest.config.js

@@ -8,7 +8,7 @@ module.exports = {
   verbose: true,
   testEnvironment: 'jsdom',
   preset: 'ts-jest',
-  testMatch: ['**/__tests__/**/*.test.[jt]s?(x)'],
+  testMatch: ['**/__tests__/**/*.test.[jt]s'],
   setupFiles: ['./jest.setup.ts'],
   setupFilesAfterEnv: [require.resolve('jest-dom/extend-expect'), './jest.setupAfterEnv.ts'],
   moduleNameMapper: {
@@ -24,7 +24,7 @@ module.exports = {
       diagnostics: false,
     },
   },
-  modulePathIgnorePatterns: ['/esm/', '/es/', '/dist/', '/lib/'],
+  modulePathIgnorePatterns: ['/esm/', '/es/', '/dist/', '/lib/', '/client/', '/sdk/', '\\.test\\.tsx$'],
   // add .mjs .cjs for formula.js
   moduleFileExtensions: [...defaults.moduleFileExtensions, 'mjs', 'cjs'],
   coveragePathIgnorePatterns: [

package.json

@@ -18,6 +18,7 @@
     "start": "nocobase start",
     "build": "nocobase build",
     "test": "nocobase test",
+    "test:client": "vitest",
     "doc": "nocobase doc",
     "postinstall": "nocobase postinstall",
     "lint": "eslint .",
@@ -44,11 +45,16 @@
     "@commitlint/cli": "^16.1.0",
     "@commitlint/config-conventional": "^16.0.0",
     "@commitlint/prompt-cli": "^16.1.0",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^14.0.0",
+    "@vitejs/plugin-react": "^4.0.0",
     "auto-changelog": "^2.4.0",
     "ghooks": "^2.0.4",
     "prettier": "^2.2.1",
     "pretty-format": "^24.0.0",
-    "pretty-quick": "^3.1.0"
+    "pretty-quick": "^3.1.0",
+    "vite": "^4.3.8",
+    "vitest": "^0.31.1"
   },
   "volta": {
     "node": "18.14.2",

packages/core/client/src/application/__tests__/__snapshots__/compose.test.tsx.snap

@@ -1,4 +1,80 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`compose > case 1 1`] = `
+<div>
+  <div>
+    <h1>
+      A
+    </h1>
+  </div>
+</div>
+`;
+
+exports[`compose > case 2 1`] = `
+<div>
+  <div>
+    <h1>
+      A
+    </h1>
+    <div>
+      <h1>
+        B
+      </h1>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`compose > case 3 1`] = `
+<div>
+  <div>
+    <h1>
+      A
+    </h1>
+  </div>
+</div>
+`;
+
+exports[`compose > case 4 1`] = `
+<div>
+  <div>
+    <h1>
+      A
+    </h1>
+    <div>
+      <h1>
+        B
+      </h1>
+      <div>
+        <h1>
+          C
+        </h1>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`compose > case 5 1`] = `
+<div>
+  <div>
+    <h1>
+      A 
+    </h1>
+    <div>
+      <h1>
+        B 
+        1
+      </h1>
+      <div>
+        <h1>
+          C
+        </h1>
+      </div>
+    </div>
+  </div>
+</div>
+`;
 
 exports[`compose case 1 1`] = `
 <div>

packages/core/client/src/route-switch/__tests__/__snapshots__/RouteSwitch.test.tsx.snap

@@ -1,4 +1,12 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`route-switch > case 1 1`] = `
+<div>
+  <h1>
+    Home
+  </h1>
+</div>
+`;
 
 exports[`route-switch case 1 1`] = `
 <div>

packages/core/client/src/schema-component/antd/date-picker/__tests__/mapDatePicker.test.ts

@@ -48,7 +48,7 @@ describe('mapDatePicker', () => {
     const props = {
       showTime: true,
       gmt: true,
-      onChange: jest.fn(),
+      onChange: vi.fn(),
     };
     const result = mapDatePicker()(props);
     result.onChange(moment.utc('2022-02-22 22:22:22'));
@@ -59,7 +59,7 @@ describe('mapDatePicker', () => {
     const props = {
       showTime: true,
       gmt: false,
-      onChange: jest.fn(),
+      onChange: vi.fn(),
     };
     const result = mapDatePicker()(props);
     const m = moment('2022-02-22 22:22:22');
@@ -71,7 +71,7 @@ describe('mapDatePicker', () => {
     const props = {
       showTime: false,
       gmt: true,
-      onChange: jest.fn(),
+      onChange: vi.fn(),
     };
     const result = mapDatePicker()(props);
     result.onChange(moment.utc('2022-02-22'));
@@ -82,7 +82,7 @@ describe('mapDatePicker', () => {
     const props = {
       showTime: false,
       gmt: false,
-      onChange: jest.fn(),
+      onChange: vi.fn(),
     };
     const result = mapDatePicker()(props);
     const m = moment('2022-02-22');
@@ -94,7 +94,7 @@ describe('mapDatePicker', () => {
     const props = {
       picker: 'year',
       gmt: true,
-      onChange: jest.fn(),
+      onChange: vi.fn(),
     };
     const result = mapDatePicker()(props);
     result.onChange(moment.utc('2022-01-01T00:00:00.000Z'));
@@ -105,7 +105,7 @@ describe('mapDatePicker', () => {
     const props = {
       picker: 'year',
       gmt: false,
-      onChange: jest.fn(),
+      onChange: vi.fn(),
     };
     const result = mapDatePicker()(props);
     const m = moment('2022-02-01 00:00:00');
@@ -117,7 +117,7 @@ describe('mapDatePicker', () => {
     const props = {
       picker: 'month',
       gmt: true,
-      onChange: jest.fn(),
+      onChange: vi.fn(),
     };
     const result = mapDatePicker()(props);
     result.onChange(moment.utc('2022-02-22T00:00:00.000Z'));
@@ -128,7 +128,7 @@ describe('mapDatePicker', () => {
     const props = {
       picker: 'month',
       gmt: false,
-      onChange: jest.fn(),
+      onChange: vi.fn(),
     };
     const result = mapDatePicker()(props);
     const m = moment('2022-02-01 00:00:00');
@@ -140,7 +140,7 @@ describe('mapDatePicker', () => {
     const props = {
       picker: 'quarter',
       gmt: true,
-      onChange: jest.fn(),
+      onChange: vi.fn(),
     };
     const result = mapDatePicker()(props);
     result.onChange(moment.utc('2022-02-22T00:00:00.000Z'));
@@ -151,7 +151,7 @@ describe('mapDatePicker', () => {
     const props = {
       picker: 'quarter',
       gmt: false,
-      onChange: jest.fn(),
+      onChange: vi.fn(),
     };
     const result = mapDatePicker()(props);
     const m = moment('2022-02-01 00:00:00');
@@ -163,7 +163,7 @@ describe('mapDatePicker', () => {
     const props = {
       picker: 'week',
       gmt: true,
-      onChange: jest.fn(),
+      onChange: vi.fn(),
     };
     const result = mapDatePicker()(props);
     const m = moment.utc('2022-02-21T00:00:00.000Z');
@@ -175,7 +175,7 @@ describe('mapDatePicker', () => {
     const props = {
       picker: 'week',
       gmt: false,
-      onChange: jest.fn(),
+      onChange: vi.fn(),
     };
     const result = mapDatePicker()(props);
     const m = moment('2022-02-21 00:00:00');
@@ -188,7 +188,7 @@ describe('mapDatePicker', () => {
       showTime: true,
       gmt: true,
       utc: false,
-      onChange: jest.fn(),
+      onChange: vi.fn(),
     };
     const result = mapDatePicker()(props);
     result.onChange(moment('2022-02-22 22:22:22'));
@@ -200,7 +200,7 @@ describe('mapDatePicker', () => {
       showTime: false,
       gmt: true,
       utc: false,
-      onChange: jest.fn(),
+      onChange: vi.fn(),
     };
     const result = mapDatePicker()(props);
     result.onChange(moment('2022-01-01 23:00:00'));

packages/core/client/src/schema-component/antd/date-picker/__tests__/mapRangePicker.test.ts

@@ -7,7 +7,7 @@ describe('mapRangePicker', () => {
       showTime: false,
       gmt: true,
       utc: true,
-      onChange: jest.fn(),
+      onChange: vi.fn(),
     };
     const { onChange } = mapRangePicker()(props);
     const value = [moment.utc('2023-01-01T00:00:00.000Z'), moment.utc('2023-01-02T00:00:00.000Z')];
@@ -20,7 +20,7 @@ describe('mapRangePicker', () => {
       showTime: true,
       gmt: true,
       utc: true,
-      onChange: jest.fn(),
+      onChange: vi.fn(),
     };
     const { onChange } = mapRangePicker()(props);
     const value = [moment.utc('2023-01-01T00:00:00.000Z'), moment.utc('2023-01-02T00:00:00.000Z')];
@@ -33,7 +33,7 @@ describe('mapRangePicker', () => {
       showTime: false,
       gmt: true,
       utc: false,
-      onChange: jest.fn(),
+      onChange: vi.fn(),
     };
     const { onChange } = mapRangePicker()(props);
     const value = [moment.utc('2023-01-01T00:00:00.000Z'), moment.utc('2023-01-02T00:00:00.000Z')];

packages/core/client/src/schema-component/hooks/__tests__/designable.test.ts

@@ -482,7 +482,7 @@ describe('parentsIn', () => {
     const dn = createDesignable({
       current: schema.properties.menu.properties.item1,
     });
-    const callback = jest.fn();
+    const callback = vi.fn();
     dn.on('error', callback);
     dn.insertAfterBegin(schema.properties.menu);
     expect(schema.properties.menu).toBeDefined();

packages/core/client/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "../../../tsconfig.json",
+  "compilerOptions": {
+    "types": [
+      "vitest/globals"
+    ]
+  },
+}

packages/core/dumi-theme-nocobase/package.json

@@ -17,11 +17,6 @@
     "rc-tabs": "^11.7.1",
     "rc-tree": "^5.2.0"
   },
-  "devDependencies": {
-    "@testing-library/jest-dom": "^5.11.3",
-    "@testing-library/react": "^10.4.8",
-    "react-test-renderer": "^16.13.1"
-  },
   "peerDependencies": {
     "@umijs/preset-dumi": "1.x",
     "react": "^16.13.1 || ^17.0.0"

packages/core/sdk/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "../../../tsconfig.json",
+  "compilerOptions": {
+    "types": [
+      "vitest/globals"
+    ]
+  },
+}

scripts/setupVitest.ts

@@ -0,0 +1,24 @@
+import '@testing-library/jest-dom';
+import { vi } from 'vitest';
+import '../packages/core/client/src/i18n';
+
+// 解决 ypeError: window.matchMedia is not a function
+// 参见： https://github.com/vitest-dev/vitest/issues/821#issuecomment-1046954558
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: vi.fn().mockImplementation((query) => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: vi.fn(), // deprecated
+    removeListener: vi.fn(), // deprecated
+    addEventListener: vi.fn(),
+    removeEventListener: vi.fn(),
+    dispatchEvent: vi.fn(),
+  })),
+});
+
+// 解决 Error: Not implemented: window.computedStyle(elt, pseudoElt)
+// 参见：https://github.com/nickcolley/jest-axe/issues/147#issuecomment-758804533
+const { getComputedStyle } = window;
+window.getComputedStyle = (elt) => getComputedStyle(elt);

testUtils.ts

@@ -0,0 +1,7 @@
+const globalTimeout = global.setTimeout;
+
+export const sleep = async (timeout = 0) => {
+  await new Promise((resolve) => {
+    globalTimeout(resolve, timeout);
+  });
+};

tsconfig.json

@@ -49,7 +49,8 @@
     }
   },
   "include": [
-    "packages/**/*"
+    "packages/**/*",
+    "scripts/setupVitest.ts"
   ],
   "exclude": [
     "packages/**/node_modules",

vitest.config.ts

@@ -0,0 +1,27 @@
+import react from '@vitejs/plugin-react';
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+  plugins: [react()],
+  test: {
+    globals: true,
+    setupFiles: 'scripts/setupVitest.ts',
+    environment: 'jsdom',
+    css: true,
+    threads: true,
+    alias: [
+      { find: '@nocobase/evaluators/client', replacement: 'packages/core/evaluators/src/client' },
+      { find: '@nocobase/utils/client', replacement: 'packages/core/utils/src/client' },
+      { find: /^@nocobase\/app-(.*)/, replacement: 'packages/$1/src' },
+      { find: /^@nocobase\/plugin-sample-(.*)/, replacement: 'packages/samples/$1/src' },
+      { find: /^@nocobase\/plugin-pro-(.*)/, replacement: 'packages/pro-plugins/$1/src' },
+      { find: /^@nocobase\/plugin-(.*)/, replacement: 'packages/plugins/$1/src' },
+      { find: /^@nocobase\/preset-(.*)/, replacement: 'packages/presets/$1/src' },
+      { find: /^@nocobase\/(.*)/, replacement: 'packages/core/$1/src' },
+    ],
+    include: ['packages/**/{dumi-theme-nocobase,sdk,client}/**/__tests__/**/*.{test,spec}.{ts,tsx}'],
+    exclude: ['**/node_modules/**', '**/dist/**', '**/lib/**', '**/es/**', '**/{vitest,commitlint}.config.*'],
+    testTimeout: 300000,
+    bail: 1,
+  },
+});