chore: upgrade to jest 27 (#30783)

* chore: upgrade devDeps

* upgrade @ant-design/tools

* support  CSS Minification

* test: jsdom as testEnvironment

* fix setImmediate

* update snapshot

* fix test

* fix test

* fix test

* fix test
This commit is contained in:
afc163 2021-06-01 10:11:24 +08:00 committed by GitHub
parent 133bf530aa
commit 9f0dbf2b4d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 483 additions and 126 deletions

View File

@ -14,6 +14,7 @@ function getTestRegex(libDir) {
module.exports = {
verbose: true,
testEnvironment: 'jsdom',
setupFiles: ['./tests/setup.js'],
setupFilesAfterEnv: ['./tests/setupAfterEnv.ts'],
moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'md'],

View File

@ -202,11 +202,70 @@ exports[`Badge should render when count is changed 1`] = `
</span>
<span
class="ant-scroll-number-only"
style="transition: none;"
style="transform: translateY(-100%);"
>
<p
class="ant-scroll-number-only-unit"
style="position: absolute; top: -900%; left: 0px;"
>
0
</p>
<p
class="ant-scroll-number-only-unit"
style="position: absolute; top: -800%; left: 0px;"
>
1
</p>
<p
class="ant-scroll-number-only-unit"
style="position: absolute; top: -700%; left: 0px;"
>
2
</p>
<p
class="ant-scroll-number-only-unit"
style="position: absolute; top: -600%; left: 0px;"
>
3
</p>
<p
class="ant-scroll-number-only-unit"
style="position: absolute; top: -500%; left: 0px;"
>
4
</p>
<p
class="ant-scroll-number-only-unit"
style="position: absolute; top: -400%; left: 0px;"
>
5
</p>
<p
class="ant-scroll-number-only-unit"
style="position: absolute; top: -300%; left: 0px;"
>
6
</p>
<p
class="ant-scroll-number-only-unit"
style="position: absolute; top: -200%; left: 0px;"
>
7
</p>
<p
class="ant-scroll-number-only-unit"
style="position: absolute; top: -100%; left: 0px;"
>
8
</p>
<p
class="ant-scroll-number-only-unit current"
style=""
>
9
</p>
<p
class="ant-scroll-number-only-unit"
style="position: absolute; top: 100%; left: 0px;"
>
0
</p>
@ -236,11 +295,70 @@ exports[`Badge should render when count is changed 2`] = `
</span>
<span
class="ant-scroll-number-only"
style="transition: none;"
style="transform: translateY(-100%);"
>
<p
class="ant-scroll-number-only-unit"
style="position: absolute; top: -900%; left: 0px;"
>
1
</p>
<p
class="ant-scroll-number-only-unit"
style="position: absolute; top: -800%; left: 0px;"
>
2
</p>
<p
class="ant-scroll-number-only-unit"
style="position: absolute; top: -700%; left: 0px;"
>
3
</p>
<p
class="ant-scroll-number-only-unit"
style="position: absolute; top: -600%; left: 0px;"
>
4
</p>
<p
class="ant-scroll-number-only-unit"
style="position: absolute; top: -500%; left: 0px;"
>
5
</p>
<p
class="ant-scroll-number-only-unit"
style="position: absolute; top: -400%; left: 0px;"
>
6
</p>
<p
class="ant-scroll-number-only-unit"
style="position: absolute; top: -300%; left: 0px;"
>
7
</p>
<p
class="ant-scroll-number-only-unit"
style="position: absolute; top: -200%; left: 0px;"
>
8
</p>
<p
class="ant-scroll-number-only-unit"
style="position: absolute; top: -100%; left: 0px;"
>
9
</p>
<p
class="ant-scroll-number-only-unit current"
style=""
>
0
</p>
<p
class="ant-scroll-number-only-unit"
style="position: absolute; top: 100%; left: 0px;"
>
1
</p>
@ -341,11 +459,70 @@ exports[`Badge should render when count is changed 6`] = `
>
<span
class="ant-scroll-number-only"
style="transition: none;"
style="transform: translateY(100%);"
>
<p
class="ant-scroll-number-only-unit"
style="position: absolute; top: -100%; left: 0px;"
>
9
</p>
<p
class="ant-scroll-number-only-unit current"
style=""
>
0
</p>
<p
class="ant-scroll-number-only-unit"
style="position: absolute; top: 100%; left: 0px;"
>
1
</p>
<p
class="ant-scroll-number-only-unit"
style="position: absolute; top: 200%; left: 0px;"
>
2
</p>
<p
class="ant-scroll-number-only-unit"
style="position: absolute; top: 300%; left: 0px;"
>
3
</p>
<p
class="ant-scroll-number-only-unit"
style="position: absolute; top: 400%; left: 0px;"
>
4
</p>
<p
class="ant-scroll-number-only-unit"
style="position: absolute; top: 500%; left: 0px;"
>
5
</p>
<p
class="ant-scroll-number-only-unit"
style="position: absolute; top: 600%; left: 0px;"
>
6
</p>
<p
class="ant-scroll-number-only-unit"
style="position: absolute; top: 700%; left: 0px;"
>
7
</p>
<p
class="ant-scroll-number-only-unit"
style="position: absolute; top: 800%; left: 0px;"
>
8
</p>
<p
class="ant-scroll-number-only-unit"
style="position: absolute; top: 900%; left: 0px;"
>
9
</p>

View File

@ -6,6 +6,14 @@ import zhCN from '../../locale/zh_CN';
import Form from '../../form';
describe('ConfigProvider.Form', () => {
beforeAll(() => {
jest.useFakeTimers();
});
afterAll(() => {
jest.useRealTimers();
});
describe('form validateMessages', () => {
const wrapperComponent = ({ validateMessages }) => {
const formRef = React.createRef();
@ -26,14 +34,6 @@ describe('ConfigProvider.Form', () => {
return [wrapper, formRef];
};
beforeEach(() => {
jest.useFakeTimers();
});
afterEach(() => {
jest.useRealTimers();
});
it('set locale zhCN', async () => {
const [wrapper, formRef] = wrapperComponent({});

View File

@ -66,6 +66,14 @@ describe('Menu', () => {
window.requestAnimationFrame = callback => window.setTimeout(callback, 16);
window.cancelAnimationFrame = window.clearTimeout;
beforeAll(() => {
jest.useFakeTimers();
});
afterAll(() => {
jest.useRealTimers();
});
mountTest(() => (
<Menu>
<Menu.Item />
@ -107,12 +115,10 @@ describe('Menu', () => {
beforeEach(() => {
div = document.createElement('div');
document.body.appendChild(div);
jest.useFakeTimers();
});
afterEach(() => {
document.body.removeChild(div);
jest.useRealTimers();
});
it('If has select nested submenu item ,the menu items on the grandfather level should be highlight', () => {
@ -416,14 +422,6 @@ describe('Menu', () => {
});
describe('open submenu when click submenu title', () => {
beforeEach(() => {
jest.useFakeTimers();
});
afterEach(() => {
jest.useRealTimers();
});
const toggleMenu = (wrapper, index, event) => {
wrapper.find('.ant-menu-submenu-title').at(index).simulate(event);
jest.runAllTimers();

View File

@ -18,8 +18,8 @@ describe('Select', () => {
act(() => {
wrapper.find('.ant-select-selector').simulate('mousedown');
jest.runAllTimers();
wrapper.update();
});
wrapper.update();
}
beforeEach(() => {

View File

@ -126,8 +126,8 @@ describe('Statistic', () => {
};
const wrapper = mount(<Statistic.Countdown value={deadline} onChange={onChange} />);
wrapper.update();
await sleep(100)
expect(remainingTime).toBeGreaterThan(0)
await sleep(100);
expect(remainingTime).toBeGreaterThan(0);
});
});
@ -145,17 +145,13 @@ describe('Statistic', () => {
});
it('called if finished', async () => {
jest.useFakeTimers();
const now = Date.now() + 10;
const onFinish = jest.fn();
const wrapper = mount(<Statistic.Countdown value={now} onFinish={onFinish} />);
wrapper.update();
MockDate.set(moment('2019-11-28 00:00:00').valueOf());
jest.runAllTimers();
await sleep(100);
expect(onFinish).toHaveBeenCalled();
jest.useFakeTimers();
});
});
});

View File

@ -1145,7 +1145,104 @@ exports[`Directory Tree expand click 2`] = `
<div
class="ant-tree-treenode-motion ant-motion-collapse-leave ant-motion-collapse-leave-start ant-motion-collapse"
style="height: 0px;"
/>
>
<div
class="ant-tree-treenode ant-tree-treenode-switcher-close"
>
<span
aria-hidden="true"
class="ant-tree-indent"
>
<span
class="ant-tree-indent-unit ant-tree-indent-unit-start"
/>
</span>
<span
class="ant-tree-switcher ant-tree-switcher-noop"
/>
<span
class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal"
title="---"
>
<span
class="ant-tree-iconEle ant-tree-icon__customize"
>
<span
aria-label="folder"
class="anticon anticon-folder"
role="img"
>
<svg
aria-hidden="true"
data-icon="folder"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M880 298.4H521L403.7 186.2a8.15 8.15 0 00-5.5-2.2H144c-17.7 0-32 14.3-32 32v592c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V330.4c0-17.7-14.3-32-32-32zM840 768H184V256h188.5l119.6 114.4H840V768z"
/>
</svg>
</span>
</span>
<span
class="ant-tree-title"
>
---
</span>
</span>
</div>
<div
class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last"
>
<span
aria-hidden="true"
class="ant-tree-indent"
>
<span
class="ant-tree-indent-unit ant-tree-indent-unit-start"
/>
</span>
<span
class="ant-tree-switcher ant-tree-switcher-noop"
/>
<span
class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal"
title="---"
>
<span
class="ant-tree-iconEle ant-tree-icon__customize"
>
<span
aria-label="folder"
class="anticon anticon-folder"
role="img"
>
<svg
aria-hidden="true"
data-icon="folder"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M880 298.4H521L403.7 186.2a8.15 8.15 0 00-5.5-2.2H144c-17.7 0-32 14.3-32 32v592c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V330.4c0-17.7-14.3-32-32-32zM840 768H184V256h188.5l119.6 114.4H840V768z"
/>
</svg>
</span>
</span>
<span
class="ant-tree-title"
>
---
</span>
</span>
</div>
</div>
<div
class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last"
>
@ -1596,7 +1693,104 @@ exports[`Directory Tree expand double click 2`] = `
<div
class="ant-tree-treenode-motion ant-motion-collapse-leave ant-motion-collapse-leave-start ant-motion-collapse"
style="height: 0px;"
/>
>
<div
class="ant-tree-treenode ant-tree-treenode-switcher-close"
>
<span
aria-hidden="true"
class="ant-tree-indent"
>
<span
class="ant-tree-indent-unit ant-tree-indent-unit-start"
/>
</span>
<span
class="ant-tree-switcher ant-tree-switcher-noop"
/>
<span
class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal"
title="---"
>
<span
class="ant-tree-iconEle ant-tree-icon__customize"
>
<span
aria-label="folder"
class="anticon anticon-folder"
role="img"
>
<svg
aria-hidden="true"
data-icon="folder"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M880 298.4H521L403.7 186.2a8.15 8.15 0 00-5.5-2.2H144c-17.7 0-32 14.3-32 32v592c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V330.4c0-17.7-14.3-32-32-32zM840 768H184V256h188.5l119.6 114.4H840V768z"
/>
</svg>
</span>
</span>
<span
class="ant-tree-title"
>
---
</span>
</span>
</div>
<div
class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last"
>
<span
aria-hidden="true"
class="ant-tree-indent"
>
<span
class="ant-tree-indent-unit ant-tree-indent-unit-start"
/>
</span>
<span
class="ant-tree-switcher ant-tree-switcher-noop"
/>
<span
class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal"
title="---"
>
<span
class="ant-tree-iconEle ant-tree-icon__customize"
>
<span
aria-label="folder"
class="anticon anticon-folder"
role="img"
>
<svg
aria-hidden="true"
data-icon="folder"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M880 298.4H521L403.7 186.2a8.15 8.15 0 00-5.5-2.2H144c-17.7 0-32 14.3-32 32v592c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V330.4c0-17.7-14.3-32-32-32zM840 768H184V256h188.5l119.6 114.4H840V768z"
/>
</svg>
</span>
</span>
<span
class="ant-tree-title"
>
---
</span>
</span>
</div>
</div>
<div
class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last"
>
@ -1771,57 +1965,52 @@ exports[`Directory Tree expand with state control click 1`] = `
</span>
</div>
<div
class="ant-tree-treenode-motion ant-motion-collapse-appear ant-motion-collapse-appear-start ant-motion-collapse"
style="height: 0px; opacity: 0;"
class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last"
>
<div
class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last"
<span
aria-hidden="true"
class="ant-tree-indent"
>
<span
aria-hidden="true"
class="ant-tree-indent"
>
<span
class="ant-tree-indent-unit ant-tree-indent-unit-start ant-tree-indent-unit-end"
/>
</span>
<span
class="ant-tree-switcher ant-tree-switcher-noop"
class="ant-tree-indent-unit ant-tree-indent-unit-start ant-tree-indent-unit-end"
/>
</span>
<span
class="ant-tree-switcher ant-tree-switcher-noop"
/>
<span
class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal"
title="children"
>
<span
class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal"
title="children"
class="ant-tree-iconEle ant-tree-icon__customize"
>
<span
class="ant-tree-iconEle ant-tree-icon__customize"
aria-label="folder"
class="anticon anticon-folder"
role="img"
>
<span
aria-label="folder"
class="anticon anticon-folder"
role="img"
<svg
aria-hidden="true"
data-icon="folder"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<svg
aria-hidden="true"
data-icon="folder"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M880 298.4H521L403.7 186.2a8.15 8.15 0 00-5.5-2.2H144c-17.7 0-32 14.3-32 32v592c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V330.4c0-17.7-14.3-32-32-32zM840 768H184V256h188.5l119.6 114.4H840V768z"
/>
</svg>
</span>
</span>
<span
class="ant-tree-title"
>
children
<path
d="M880 298.4H521L403.7 186.2a8.15 8.15 0 00-5.5-2.2H144c-17.7 0-32 14.3-32 32v592c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V330.4c0-17.7-14.3-32-32-32zM840 768H184V256h188.5l119.6 114.4H840V768z"
/>
</svg>
</span>
</span>
</div>
<span
class="ant-tree-title"
>
children
</span>
</span>
</div>
</div>
</div>
@ -1933,57 +2122,52 @@ exports[`Directory Tree expand with state control doubleClick 1`] = `
</span>
</div>
<div
class="ant-tree-treenode-motion ant-motion-collapse-appear ant-motion-collapse-appear-start ant-motion-collapse"
style="height: 0px; opacity: 0;"
class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last"
>
<div
class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last"
<span
aria-hidden="true"
class="ant-tree-indent"
>
<span
aria-hidden="true"
class="ant-tree-indent"
>
<span
class="ant-tree-indent-unit ant-tree-indent-unit-start ant-tree-indent-unit-end"
/>
</span>
<span
class="ant-tree-switcher ant-tree-switcher-noop"
class="ant-tree-indent-unit ant-tree-indent-unit-start ant-tree-indent-unit-end"
/>
</span>
<span
class="ant-tree-switcher ant-tree-switcher-noop"
/>
<span
class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal"
title="children"
>
<span
class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal"
title="children"
class="ant-tree-iconEle ant-tree-icon__customize"
>
<span
class="ant-tree-iconEle ant-tree-icon__customize"
aria-label="folder"
class="anticon anticon-folder"
role="img"
>
<span
aria-label="folder"
class="anticon anticon-folder"
role="img"
<svg
aria-hidden="true"
data-icon="folder"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<svg
aria-hidden="true"
data-icon="folder"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M880 298.4H521L403.7 186.2a8.15 8.15 0 00-5.5-2.2H144c-17.7 0-32 14.3-32 32v592c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V330.4c0-17.7-14.3-32-32-32zM840 768H184V256h188.5l119.6 114.4H840V768z"
/>
</svg>
</span>
</span>
<span
class="ant-tree-title"
>
children
<path
d="M880 298.4H521L403.7 186.2a8.15 8.15 0 00-5.5-2.2H144c-17.7 0-32 14.3-32 32v592c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V330.4c0-17.7-14.3-32-32-32zM840 768H184V256h188.5l119.6 114.4H840V768z"
/>
</svg>
</span>
</span>
</div>
<span
class="ant-tree-title"
>
children
</span>
</span>
</div>
</div>
</div>

View File

@ -30,8 +30,10 @@ describe('Typography', () => {
const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
// Mock offsetHeight
const originOffsetHeight = Object.getOwnPropertyDescriptor(HTMLElement.prototype, 'offsetHeight')
.get;
const originOffsetHeight = Object.getOwnPropertyDescriptor(
HTMLElement.prototype,
'offsetHeight',
).get;
Object.defineProperty(HTMLElement.prototype, 'offsetHeight', {
get() {
let html = this.innerHTML;
@ -333,6 +335,7 @@ describe('Typography', () => {
}
jest.useFakeTimers();
wrapper.find('.ant-typography-copy').first().simulate('click');
jest.runAllTimers();
wrapper.update();

View File

@ -433,7 +433,7 @@ describe('Upload', () => {
wrapper.find('div.ant-upload-list-item .anticon-delete').simulate('click');
setImmediate(() => {
setTimeout(() => {
wrapper.update();
expect(mockRemove).toHaveBeenCalled();
@ -499,7 +499,7 @@ describe('Upload', () => {
wrapper.find('div.ant-upload-list-item .anticon-download').simulate('click');
setImmediate(() => {
setTimeout(() => {
wrapper.update();
expect(props.fileList).toHaveLength(1);

View File

@ -153,12 +153,12 @@
"devDependencies": {
"@ant-design/bisheng-plugin": "^2.3.0",
"@ant-design/hitu": "^0.0.0-alpha.13",
"@ant-design/tools": "^13.4.0",
"@ant-design/tools": "^13.4.1-beta.0",
"@qixian.cs/github-contributors-list": "^1.0.3",
"@stackblitz/sdk": "^1.3.0",
"@types/classnames": "^2.2.8",
"@types/enzyme": "^3.10.5",
"@types/gtag.js": "^0.0.4",
"@types/gtag.js": "^0.0.5",
"@types/jest": "^26.0.0",
"@types/jest-environment-puppeteer": "^4.4.0",
"@types/jest-image-snapshot": "^4.1.0",
@ -188,14 +188,12 @@
"cheerio": "^1.0.0-rc.3",
"concurrently": "^6.0.0",
"cross-env": "^7.0.0",
"css-minimizer-webpack-plugin": "^1.1.1",
"css-split-webpack-plugin": "^0.2.6",
"dekko": "^0.2.1",
"docsearch.js": "^2.6.3",
"enquire-js": "^0.2.1",
"enzyme": "^3.10.0",
"enzyme-to-json": "^3.6.0",
"esbuild-loader": "^2.7.0",
"esbuild-loader": "^2.13.1",
"eslint": "^7.9.0",
"eslint-config-airbnb": "^18.0.0",
"eslint-config-prettier": "^8.0.0",
@ -220,7 +218,7 @@
"immutability-helper": "^3.0.0",
"inquirer": "^8.0.0",
"intersection-observer": "^0.12.0",
"jest": "^26.0.0",
"jest": "^27.0.3",
"jest-image-snapshot": "^4.0.0",
"jest-puppeteer": "^5.0.1",
"jquery": "^3.4.1",

View File

@ -1,7 +1,6 @@
const path = require('path');
const replaceLib = require('@ant-design/tools/lib/replaceLib');
const getWebpackConfig = require('@ant-design/tools/lib/getWebpackConfig');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const { ESBuildMinifyPlugin } = require('esbuild-loader');
const { version } = require('../package.json');
const themeConfig = require('./themeConfig');
@ -86,8 +85,8 @@ module.exports = {
config.optimization.minimizer = [
new ESBuildMinifyPlugin({
target: 'es2015',
css: true,
}),
new CssMinimizerPlugin(),
];
}

View File

@ -101,6 +101,7 @@ if (process.env.RUN_ENV === 'PRODUCTION') {
if (process.env.ESBUILD || process.env.CSB_REPO) {
config.optimization.minimizer[0] = new ESBuildMinifyPlugin({
target: 'es2015',
css: true,
});
}