ruiling/tachybase_todo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

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

* refactor: optimize test
This commit is contained in:
被雨水过滤的空气-Rain 2023-07-28 09:58:49 +08:00 committed by GitHub
parent 1b33755342
commit 880f7ed7e4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 105 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
package.json
View File

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

2
packages/core/client/package.json
View File

@ -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",

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

@ -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,30 +109,37 @@ 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', () => {
@ -129,16 +149,16 @@ describe('Action.Popover', () => {
fireEvent.mouseEnter(btn);
// wait for the popover to show
await sleep(300);
await waitFor(() => {
// popover
expect(document.querySelector('.ant-popover')).toBeInTheDocument();
// content
expect(screen.getByText('Hello')).toBeInTheDocument();
});
fireEvent.mouseLeave(btn);
// wait for the popover to hide
await sleep(300);
await waitFor(() => {
expect(document.querySelector('.ant-popover')).not.toBeInTheDocument();
});
});
});

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

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

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

@ -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();

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

@ -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.skip('Kanban', () => {
describe('Kanban', () => {
it('should render correctly', async () => {
render(<App1 />);

2
packages/core/devtools/package.json
View File

@ -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",

2
packages/plugins/data-visualization/package.json
View File

@ -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",

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

@ -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.skip('hooks', () => {
describe('hooks', () => {
beforeEach(() => {
vi.spyOn(client, 'useCollectionManager').mockReturnValue({
getCollectionFields: (name: string) =>

3
scripts/setupVitest.ts
View File

@ -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', {

2
vitest.config.ts
View File

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

42
yarn.lock
View File

@ -5789,9 +5789,10 @@
dependencies:
defer-to-connect "^1.0.1"
"@testing-library/dom@^8.0.0":
version "8.20.1"
resolved "https://registry.npmmirror.com/@testing-library/dom/-/dom-8.20.1.tgz#2e52a32e46fc88369eef7eef634ac2a192decd9f"
"@testing-library/dom@^9.0.0":
version "9.3.1"
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":
version "5.16.5"
resolved "https://registry.npmmirror.com/@testing-library/jest-dom/-/jest-dom-5.16.5.tgz#3912846af19a29b2dbf32a6ae9c31ef52580074e"
"@testing-library/jest-dom@^5.17.0":
version "5.17.0"
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":
version "12.1.5"
resolved "https://registry.npmmirror.com/@testing-library/react/-/react-12.1.5.tgz#bb248f72f02a5ac9d949dea07279095fa577963b"
"@testing-library/react@^14.0.0":
version "14.0.0"
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"
"@types/react-dom" "<18.0.0"
"@testing-library/dom" "^9.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:
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:
ts-jest@^29.0.0, 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==