refactor: upgrade @testing-library/react to 14.x (#2339)

* refactor: upgrade @testing-library/react to 14.x

* refactor: optimize test

package.json

@@ -58,8 +58,8 @@
     "@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/jest-dom": "^5.17.0",
-    "@testing-library/react": "^12.1.5",
+    "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^14.4.3",
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",

packages/core/client/package.json

@@ -55,7 +55,7 @@
     "react-is": ">=18.0.0"
   },
   "devDependencies": {
-    "@testing-library/react": "^12.1.5",
+    "@testing-library/react": "^14.0.0",
     "@types/markdown-it": "12.2.3",
     "@types/markdown-it-highlightjs": "3.3.1",
     "@types/react-big-calendar": "^1.6.4",

packages/core/client/src/schema-component/antd/action/__tests__/action.test.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { fireEvent, render, screen, sleep, userEvent } from 'testUtils';
+import { fireEvent, render, screen, userEvent, waitFor } from 'testUtils';
 import App1 from '../demos/demo1';
 import App2 from '../demos/demo2';
 import App3 from '../demos/demo3';
@@ -10,9 +10,10 @@ describe('Action', () => {
     const { getByText } = render(<App1 />);
 
     await userEvent.click(getByText('Open'));
-    await sleep(300);
+    await waitFor(() => {
       // drawer
       expect(document.querySelector('.ant-drawer')).toBeInTheDocument();
+    });
     // mask
     expect(document.querySelector('.ant-drawer-mask')).toBeInTheDocument();
     // title
@@ -22,23 +23,30 @@ describe('Action', () => {
 
     // close button
     await userEvent.click(getByText('Close'));
-    await sleep(300);
+    await waitFor(() => {
       expect(document.querySelector('.ant-drawer')).not.toBeInTheDocument();
+    });
 
     // should also close when click the mask
     await userEvent.click(getByText('Open'));
-    await sleep(300);
+    await waitFor(() => {
       expect(document.querySelector('.ant-drawer')).toBeInTheDocument();
+    });
     await userEvent.click(document.querySelector('.ant-drawer-mask') as HTMLElement);
+    await waitFor(() => {
       expect(document.querySelector('.ant-drawer')).not.toBeInTheDocument();
+    });
 
     // should also close when click the close icon
     await userEvent.click(getByText('Open'));
-    await sleep(300);
+    await waitFor(() => {
       expect(document.querySelector('.ant-drawer')).toBeInTheDocument();
+    });
     await userEvent.click(document.querySelector('.ant-drawer-close') as HTMLElement);
+    await waitFor(() => {
       expect(document.querySelector('.ant-drawer')).not.toBeInTheDocument();
     });
+  });
 
   it('openMode', async () => {
     const { getByText } = render(<App3 />);
@@ -50,31 +58,36 @@ describe('Action', () => {
     // drawer
     await userEvent.click(getByText('Drawer'));
     await userEvent.click(getByText('Open'));
-    await sleep(300);
 
+    await waitFor(() => {
       expect(document.querySelector('.ant-drawer')).toBeInTheDocument();
       expect(document.querySelector('.ant-modal')).not.toBeInTheDocument();
       expect(document.querySelector('.nb-action-page')).not.toBeInTheDocument();
+    });
+
     await userEvent.click(getByText('Close'));
 
     // modal
     await userEvent.click(getByText('Modal'));
     await userEvent.click(getByText('Open'));
-    await sleep(300);
 
+    await waitFor(() => {
       expect(document.querySelector('.ant-drawer')).not.toBeInTheDocument();
       expect(document.querySelector('.ant-modal')).toBeInTheDocument();
       expect(document.querySelector('.nb-action-page')).not.toBeInTheDocument();
+    });
+
     await userEvent.click(getByText('Close'));
 
     // page
     await userEvent.click(getByText('Page'));
     await userEvent.click(getByText('Open'));
-    await sleep(300);
 
+    await waitFor(() => {
       expect(document.querySelector('.ant-drawer')).not.toBeInTheDocument();
       expect(document.querySelector('.ant-modal')).not.toBeInTheDocument();
       expect(document.querySelector('.nb-action-page')).toBeInTheDocument();
+    });
     await userEvent.click(getByText('Close'));
 
     // TODO: 点击关闭按钮时应该消失
@@ -87,7 +100,7 @@ describe('Action.Drawer without Action', () => {
     const { getByText } = render(<App2 />);
 
     await userEvent.click(getByText('Open'));
-    await sleep(300);
+    await waitFor(() => {
       // drawer
       expect(document.querySelector('.ant-drawer')).toBeInTheDocument();
       // mask
@@ -96,31 +109,38 @@ describe('Action.Drawer without Action', () => {
       expect(getByText('Drawer Title')).toBeInTheDocument();
       // content
       expect(getByText('Hello')).toBeInTheDocument();
+    });
 
     // close button
     await userEvent.click(getByText('Close'));
-    await sleep(300);
+    await waitFor(() => {
       expect(document.querySelector('.ant-drawer')).not.toBeInTheDocument();
+    });
 
     // should also close when click the mask
     await userEvent.click(getByText('Open'));
-    await sleep(300);
+    await waitFor(() => {
       expect(document.querySelector('.ant-drawer')).toBeInTheDocument();
+    });
     await userEvent.click(document.querySelector('.ant-drawer-mask') as HTMLElement);
-    await sleep(300);
+    await waitFor(() => {
       expect(document.querySelector('.ant-drawer')).not.toBeInTheDocument();
+    });
 
     // should also close when click the close icon
     await userEvent.click(getByText('Open'));
-    await sleep(300);
 
+    await waitFor(() => {
       expect(document.querySelector('.ant-drawer')).toBeInTheDocument();
-    await userEvent.click(document.querySelector('.ant-drawer-close') as HTMLElement);
+    });
-    await sleep(300);
 
+    await userEvent.click(document.querySelector('.ant-drawer-close') as HTMLElement);
+
+    await waitFor(() => {
       expect(document.querySelector('.ant-drawer')).not.toBeInTheDocument();
     });
   });
+});
 
 describe('Action.Popover', () => {
   it('show the popover when hover the button', async () => {
@@ -129,16 +149,16 @@ describe('Action.Popover', () => {
 
     fireEvent.mouseEnter(btn);
 
-    // wait for the popover to show
+    await waitFor(() => {
-    await sleep(300);
       // popover
       expect(document.querySelector('.ant-popover')).toBeInTheDocument();
       // content
       expect(screen.getByText('Hello')).toBeInTheDocument();
+    });
 
     fireEvent.mouseLeave(btn);
-    // wait for the popover to hide
+    await waitFor(() => {
-    await sleep(300);
       expect(document.querySelector('.ant-popover')).not.toBeInTheDocument();
     });
   });
+});

packages/core/client/src/schema-component/antd/filter/__tests__/filter.test.tsx

@@ -7,8 +7,7 @@ import App5 from '../demos/demo5';
 import App6 from '../demos/demo6';
 
 describe('Filter', () => {
-  // TODO: 等 @Testing-Library 升级到 14.x
+  it('Filter & Action', async () => {
-  it.skip('Filter & Action', async () => {
     render(<App3 />);
 
     await waitFor(

packages/core/client/src/schema-component/antd/form/__tests__/form.test.tsx

@@ -38,9 +38,12 @@ describe('Form', () => {
 
     expect(submit).toBeInTheDocument();
     expect(input).toBeInTheDocument();
+
+    await waitFor(() => {
       expect(input).toHaveValue('aaa');
       expect(screen.getByText('T1')).toBeInTheDocument();
       expect(screen.getByText(/\{ "field1": "aaa" \}/i)).toBeInTheDocument();
+    });
 
     await userEvent.type(input, '123');
     expect(screen.getByText(/\{ "field1": "aaa123" \}/i)).toBeInTheDocument();

packages/core/client/src/schema-component/antd/kanban/__tests__/kanban.test.tsx

@@ -2,8 +2,7 @@ import React from 'react';
 import { render, screen, waitFor } from 'testUtils';
 import App1 from '../demos/demo1';
 
-// TODO: 等 @Testing-Library 升级到 14.x
+describe('Kanban', () => {
-describe.skip('Kanban', () => {
   it('should render correctly', async () => {
     render(<App1 />);
 

packages/core/devtools/package.json

@@ -6,7 +6,7 @@
   "main": "./src/index.js",
   "dependencies": {
     "@nocobase/build": "0.11.1-alpha.3",
-    "@testing-library/react": "^12.1.5",
+    "@testing-library/react": "^14.0.0",
     "@types/jest": "^29.0.0",
     "@types/koa": "^2.13.4",
     "@types/koa-bodyparser": "^4.3.4",

packages/plugins/data-visualization/package.json

@@ -24,7 +24,7 @@
     "@nocobase/server": "0.11.1-alpha.3",
     "@nocobase/test": "0.11.1-alpha.3",
     "@nocobase/utils": "0.11.1-alpha.3",
-    "@testing-library/react": "^12.1.5",
+    "@testing-library/react": "^14.0.0",
     "antd": "^5.6.4",
     "lodash": "^4.17.21",
     "react": "^18.2.0",

packages/plugins/data-visualization/src/client/__tests__/hooks.test.ts

@@ -1,5 +1,5 @@
 import * as client from '@nocobase/client';
-// import { renderHook } from '@testing-library/react';
+import { renderHook } from '@testing-library/react';
 import { vi } from 'vitest';
 import formatters from '../block/formatters';
 import transformers from '../block/transformers';
@@ -13,8 +13,7 @@ import {
   useTransformers,
 } from '../hooks';
 
-// TODO: 为了暂时解决很多 Warning 的问题把 `@testing-library/react` 降级到了 12.x 所以不支持 `renderHook`，等到再次升级到 14.x 时再把 skip 去掉
+describe('hooks', () => {
-describe.skip('hooks', () => {
   beforeEach(() => {
     vi.spyOn(client, 'useCollectionManager').mockReturnValue({
       getCollectionFields: (name: string) =>

scripts/setupVitest.ts

@@ -9,9 +9,6 @@ import 'jsdom-worker';
 import { vi } from 'vitest';
 import '../packages/core/client/src/i18n';
 
-// 设置 node 环境下的默认时区为中国标准时间, 即东八区
-process.env.TZ = 'Asia/Shanghai';
-
 // 解决 TypeError: window.matchMedia is not a function
 // 参见： https://github.com/vitest-dev/vitest/issues/821#issuecomment-1046954558
 Object.defineProperty(window, 'matchMedia', {

vitest.config.ts

@@ -31,5 +31,7 @@ export default defineConfig({
     deps: {
       inline: ['@juggle/resize-observer', 'clsx'],
     },
+    // 在 GitHub Actions 中不输出日志
+    silent: !!process.env.GITHUB_ACTIONS,
   },
 });

yarn.lock

@@ -5789,9 +5789,10 @@
   dependencies:
     defer-to-connect "^1.0.1"
 
-"@testing-library/dom@^8.0.0":
+"@testing-library/dom@^9.0.0":
-  version "8.20.1"
+  version "9.3.1"
-  resolved "https://registry.npmmirror.com/@testing-library/dom/-/dom-8.20.1.tgz#2e52a32e46fc88369eef7eef634ac2a192decd9f"
+  resolved "https://registry.npmmirror.com/@testing-library/dom/-/dom-9.3.1.tgz#8094f560e9389fb973fe957af41bf766937a9ee9"
+  integrity sha512-0DGPd9AR3+iDTjGoMpxIkAsUihHZ3Ai6CneU6bRRrffXMgzCdlNk43jTrD2/5LT6CBb3MWTP8v510JzYtahD2w==
   dependencies:
     "@babel/code-frame" "^7.10.4"
     "@babel/runtime" "^7.12.5"
@@ -5802,9 +5803,10 @@
     lz-string "^1.5.0"
     pretty-format "^27.0.2"
 
-"@testing-library/jest-dom@^5.16.5":
+"@testing-library/jest-dom@^5.17.0":
-  version "5.16.5"
+  version "5.17.0"
-  resolved "https://registry.npmmirror.com/@testing-library/jest-dom/-/jest-dom-5.16.5.tgz#3912846af19a29b2dbf32a6ae9c31ef52580074e"
+  resolved "https://registry.npmmirror.com/@testing-library/jest-dom/-/jest-dom-5.17.0.tgz#5e97c8f9a15ccf4656da00fecab505728de81e0c"
+  integrity sha512-ynmNeT7asXyH3aSVv4vvX4Rb+0qjOhdNHnO/3vuZNqPmhDpV/+rCSGwQ7bLcmU2cJ4dvoheIO85LQj0IbJHEtg==
   dependencies:
     "@adobe/css-tools" "^4.0.1"
     "@babel/runtime" "^7.9.2"
@@ -5816,13 +5818,14 @@
     lodash "^4.17.15"
     redent "^3.0.0"
 
-"@testing-library/react@^12.1.5":
+"@testing-library/react@^14.0.0":
-  version "12.1.5"
+  version "14.0.0"
-  resolved "https://registry.npmmirror.com/@testing-library/react/-/react-12.1.5.tgz#bb248f72f02a5ac9d949dea07279095fa577963b"
+  resolved "https://registry.npmmirror.com/@testing-library/react/-/react-14.0.0.tgz#59030392a6792450b9ab8e67aea5f3cc18d6347c"
+  integrity sha512-S04gSNJbYE30TlIMLTzv6QCTzt9AqIF5y6s6SzVFILNcNvbV/jU96GeiTPillGQo+Ny64M/5PV7klNYYgv5Dfg==
   dependencies:
     "@babel/runtime" "^7.12.5"
-    "@testing-library/dom" "^8.0.0"
+    "@testing-library/dom" "^9.0.0"
-    "@types/react-dom" "<18.0.0"
+    "@types/react-dom" "^18.0.0"
 
 "@testing-library/user-event@^14.4.3":
   version "14.4.3"
@@ -6488,7 +6491,7 @@
     "@types/prop-types" "*"
     "@types/react" "*"
 
-"@types/react-dom@<18.0.0", "@types/react-dom@^17.0.0", "@types/react-dom@^18.0.0":
+"@types/react-dom@^17.0.0", "@types/react-dom@^18.0.0":
   version "17.0.20"
   resolved "https://registry.npmmirror.com/@types/react-dom/-/react-dom-17.0.20.tgz#e0c8901469d732b36d8473b40b679ad899da1b53"
   dependencies:
@@ -24292,20 +24295,7 @@ ts-dedent@^2.2.0:
   version "2.2.0"
   resolved "https://registry.npmmirror.com/ts-dedent/-/ts-dedent-2.2.0.tgz#39e4bd297cd036292ae2394eb3412be63f563bb5"
 
-ts-jest@^29.0.0:
+ts-jest@^29.0.0, ts-jest@^29.1.1:
-  version "29.1.1"
-  resolved "https://registry.npmjs.org/ts-jest/-/ts-jest-29.1.1.tgz#f58fe62c63caf7bfcc5cc6472082f79180f0815b"
-  dependencies:
-    bs-logger "0.x"
-    fast-json-stable-stringify "2.x"
-    jest-util "^29.0.0"
-    json5 "^2.2.3"
-    lodash.memoize "4.x"
-    make-error "1.x"
-    semver "^7.5.3"
-    yargs-parser "^21.0.1"
-
-ts-jest@^29.1.1:
   version "29.1.1"
   resolved "https://registry.yarnpkg.com/ts-jest/-/ts-jest-29.1.1.tgz#f58fe62c63caf7bfcc5cc6472082f79180f0815b"
   integrity sha512-D6xjnnbP17cC85nliwGiL+tpoKN0StpgE0TeOjXQTU6MVCfsB4v7aW05CgQ/1OywGb0x/oy9hHFnN+sczTiRaA==