Revert "chore: migrate to vitest (#42506)" (#42900)

This reverts commit 6759887c44.
This commit is contained in:
MadCcc 2023-06-07 21:59:21 +08:00 committed by GitHub
parent 80264a7aa5
commit 7322aa6f5f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
444 changed files with 3577 additions and 3489 deletions

View File

@ -21,3 +21,4 @@ coverage
**/*.d.ts **/*.d.ts
# Scripts # Scripts
scripts/previewEditor/**/* scripts/previewEditor/**/*
jest-stare

View File

@ -3,7 +3,7 @@ module.exports = {
'airbnb', 'airbnb',
'prettier', 'prettier',
'plugin:compat/recommended', 'plugin:compat/recommended',
'plugin:vitest/recommended', 'plugin:jest/recommended',
'plugin:react/recommended', 'plugin:react/recommended',
'plugin:import/typescript', 'plugin:import/typescript',
'plugin:markdown/recommended', 'plugin:markdown/recommended',
@ -12,6 +12,7 @@ module.exports = {
browser: true, browser: true,
node: true, node: true,
jasmine: true, jasmine: true,
jest: true,
es6: true, es6: true,
}, },
settings: { settings: {
@ -24,15 +25,7 @@ module.exports = {
}, },
}, },
parser: '@typescript-eslint/parser', parser: '@typescript-eslint/parser',
plugins: [ plugins: ['react', '@babel', 'jest', '@typescript-eslint', 'react-hooks', 'unicorn', 'markdown'],
'react',
'@babel',
'vitest',
'@typescript-eslint',
'react-hooks',
'unicorn',
'markdown',
],
// https://github.com/typescript-eslint/typescript-eslint/issues/46#issuecomment-470486034 // https://github.com/typescript-eslint/typescript-eslint/issues/46#issuecomment-470486034
overrides: [ overrides: [
{ {
@ -159,10 +152,8 @@ module.exports = {
'scripts/**', 'scripts/**',
'**/*.test.js', '**/*.test.js',
'**/__tests__/*', '**/__tests__/*',
'__mocks__/**',
'*.config.js', '*.config.js',
'**/*.md', '**/*.md',
'vitest*config.ts',
], ],
}, },
], ],
@ -188,12 +179,12 @@ module.exports = {
'no-restricted-globals': 0, 'no-restricted-globals': 0,
'max-classes-per-file': 0, 'max-classes-per-file': 0,
'vitest/prefer-to-be': 0, 'jest/no-test-callback': 0,
'vitest/expect-expect': 0, 'jest/expect-expect': 0,
'vitest/no-done-callback': 0, 'jest/no-done-callback': 0,
'vitest/valid-title': 0, 'jest/valid-title': 0,
'vitest/no-conditional-expect': 0, 'jest/no-conditional-expect': 0,
'vitest/no-standalone-expect': 0, 'jest/no-standalone-expect': 0,
'unicorn/better-regex': 2, 'unicorn/better-regex': 2,
'unicorn/prefer-string-trim-start-end': 2, 'unicorn/prefer-string-trim-start-end': 2,

View File

@ -191,7 +191,7 @@ jobs:
# dom test # dom test
- name: dom test - name: dom test
if: ${{ matrix.module == 'dom' }} if: ${{ matrix.module == 'dom' }}
run: npm test -- --shard=${{matrix.shard}} --coverage run: npm test -- --maxWorkers=2 --shard=${{matrix.shard}} --coverage
- name: persist coverages - name: persist coverages
if: ${{ matrix.module == 'dom' && matrix.react == '17' }} if: ${{ matrix.module == 'dom' && matrix.react == '17' }}
@ -347,7 +347,7 @@ jobs:
- name: test - name: test
# lib only run in master branch not in pull request # lib only run in master branch not in pull request
if: ${{ github.event_name != 'pull_request' || matrix.module != 'lib' }} if: ${{ github.event_name != 'pull_request' || matrix.module != 'lib' }}
run: npm test -- --shard=${{matrix.shard}} run: npm test -- --maxWorkers=2 --shard=${{matrix.shard}}
env: env:
LIB_DIR: ${{ matrix.module }} LIB_DIR: ${{ matrix.module }}
needs: compile needs: compile

1
.gitignore vendored
View File

@ -58,6 +58,7 @@ components/version/token-meta.json
# Image snapshot diff # Image snapshot diff
__diff_output__/ __diff_output__/
__image_snapshots__/ __image_snapshots__/
/jest-stare
/imageSnapshots /imageSnapshots
/imageDiffSnapshots /imageDiffSnapshots

23
.jest.image.js Normal file
View File

@ -0,0 +1,23 @@
const { moduleNameMapper, transformIgnorePatterns } = require('./.jest');
// jest config for image snapshots
module.exports = {
setupFiles: ['./tests/setup.js'],
moduleFileExtensions: ['ts', 'tsx', 'js', 'md'],
moduleNameMapper,
transform: {
'\\.tsx?$': './node_modules/@ant-design/tools/lib/jest/codePreprocessor',
'\\.js$': './node_modules/@ant-design/tools/lib/jest/codePreprocessor',
'\\.md$': './node_modules/@ant-design/tools/lib/jest/demoPreprocessor',
'\\.(jpg|png|gif|svg)$': './node_modules/@ant-design/tools/lib/jest/imagePreprocessor',
},
testRegex: 'image\\.test\\.(j|t)s$',
transformIgnorePatterns,
globals: {
'ts-jest': {
tsConfigFile: './tsconfig.test.json',
},
},
preset: 'jest-puppeteer',
testTimeout: 10000,
};

68
.jest.js Normal file
View File

@ -0,0 +1,68 @@
const compileModules = ['react-sticky-box', 'rc-tween-one', '@babel', '@ant-design', 'countup.js'];
const ignoreList = [];
// cnpm use `_` as prefix
['', '_'].forEach((prefix) => {
compileModules.forEach((module) => {
ignoreList.push(`${prefix}${module}`);
});
});
const transformIgnorePatterns = [
// Ignore modules without es dir.
// Update: @babel/runtime should also be transformed
`/node_modules/(?!${ignoreList.join('|')})[^/]+?/(?!(es)/)`,
];
function getTestRegex(libDir) {
if (['dist', 'lib', 'es'].includes(libDir)) {
return 'demo\\.test\\.(j|t)sx?$';
}
return '.*\\.test\\.(j|t)sx?$';
}
module.exports = {
verbose: true,
testEnvironment: 'jsdom',
setupFiles: ['./tests/setup.js', 'jest-canvas-mock'],
setupFilesAfterEnv: ['./tests/setupAfterEnv.ts'],
moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'md'],
modulePathIgnorePatterns: ['/_site/'],
moduleNameMapper: {
'/\\.(css|less)$/': 'identity-obj-proxy',
'^antd$': '<rootDir>/components/index',
'^antd/es/(.*)$': '<rootDir>/components/$1',
},
testPathIgnorePatterns: ['/node_modules/', 'dekko', 'node', 'image.test.js', 'image.test.ts'],
transform: {
'\\.tsx?$': './node_modules/@ant-design/tools/lib/jest/codePreprocessor',
'\\.(m?)js$': './node_modules/@ant-design/tools/lib/jest/codePreprocessor',
'\\.md$': './node_modules/@ant-design/tools/lib/jest/demoPreprocessor',
'\\.(jpg|png|gif|svg)$': './node_modules/@ant-design/tools/lib/jest/imagePreprocessor',
},
testRegex: getTestRegex(process.env.LIB_DIR),
collectCoverageFrom: [
'components/**/*.{ts,tsx}',
'!components/*/style/index.tsx',
'!components/style/index.tsx',
'!components/*/locale/index.tsx',
'!components/*/__tests__/type.test.tsx',
'!components/**/*/interface.{ts,tsx}',
'!components/*/__tests__/image.test.{ts,tsx}',
'!components/__tests__/node.test.tsx',
'!components/*/demo/*.tsx',
'!components/*/design/**',
],
transformIgnorePatterns,
globals: {
'ts-jest': {
tsConfig: './tsconfig.test.json',
},
},
testEnvironmentOptions: {
url: 'http://localhost',
},
// bail: true,
maxWorkers: '50%',
};

19
.jest.node.js Normal file
View File

@ -0,0 +1,19 @@
const { moduleNameMapper, transformIgnorePatterns } = require('./.jest');
// jest config for server render environment
module.exports = {
setupFiles: ['./tests/setup.js'],
setupFilesAfterEnv: ['./tests/setupAfterEnv.ts'],
moduleFileExtensions: ['ts', 'tsx', 'js', 'md'],
moduleNameMapper,
transform: {
'\\.tsx?$': './node_modules/@ant-design/tools/lib/jest/codePreprocessor',
'\\.js$': './node_modules/@ant-design/tools/lib/jest/codePreprocessor',
'\\.md$': './node_modules/@ant-design/tools/lib/jest/demoPreprocessor',
'\\.(jpg|png|gif|svg)$': './node_modules/@ant-design/tools/lib/jest/imagePreprocessor',
},
testRegex: 'node\\.test\\.(j|t)sx$',
testEnvironment: 'node',
transformIgnorePatterns,
// bail: true,
};

21
.jest.site.js Normal file
View File

@ -0,0 +1,21 @@
const { moduleNameMapper, transformIgnorePatterns } = require('./.jest');
// jest config for server render environment
module.exports = {
moduleFileExtensions: ['ts', 'tsx', 'js', 'md'],
moduleNameMapper,
transform: {
'\\.tsx?$': './node_modules/@ant-design/tools/lib/jest/codePreprocessor',
'\\.js$': './node_modules/@ant-design/tools/lib/jest/codePreprocessor',
'\\.md$': './node_modules/@ant-design/tools/lib/jest/demoPreprocessor',
'\\.(jpg|png|gif|svg)$': './node_modules/@ant-design/tools/lib/jest/imagePreprocessor',
},
testRegex: 'check-site\\.(j|t)s$',
testEnvironment: 'node',
transformIgnorePatterns,
globals: {
'ts-jest': {
tsConfigFile: './tsconfig.test.json',
},
},
};

View File

@ -1,3 +0,0 @@
import Mock from 'rc-virtual-list/es/mock';
export default Mock;

View File

@ -1,6 +1,6 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`antd > exports modules correctly 1`] = ` exports[`antd exports modules correctly 1`] = `
[ [
"Affix", "Affix",
"Alert", "Alert",
@ -37,9 +37,7 @@ exports[`antd > exports modules correctly 1`] = `
"List", "List",
"Mentions", "Mentions",
"Menu", "Menu",
"message",
"Modal", "Modal",
"notification",
"Pagination", "Pagination",
"Popconfirm", "Popconfirm",
"Popover", "Popover",
@ -61,7 +59,6 @@ exports[`antd > exports modules correctly 1`] = `
"Table", "Table",
"Tabs", "Tabs",
"Tag", "Tag",
"theme",
"TimePicker", "TimePicker",
"Timeline", "Timeline",
"Tooltip", "Tooltip",
@ -71,7 +68,10 @@ exports[`antd > exports modules correctly 1`] = `
"TreeSelect", "TreeSelect",
"Typography", "Typography",
"Upload", "Upload",
"version",
"Watermark", "Watermark",
"message",
"notification",
"theme",
"version",
] ]
`; `;

View File

@ -1,6 +1,6 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`SetUp.Test > diff of React 18 & React 17 1`] = ` exports[`SetUp.Test diff of React 18 & React 17 1`] = `
NodeList [ NodeList [
<div> <div>
bamboo bamboo

View File

@ -1,7 +1,6 @@
import * as antd from '..';
const OLD_NODE_ENV = process.env.NODE_ENV; const OLD_NODE_ENV = process.env.NODE_ENV;
process.env.NODE_ENV = 'development'; process.env.NODE_ENV = 'development';
const antd = require('..');
describe('antd', () => { describe('antd', () => {
afterAll(() => { afterAll(() => {

View File

@ -3,24 +3,21 @@ import * as React from 'react';
import { renderToString } from 'react-dom/server'; import { renderToString } from 'react-dom/server';
import type { Options } from '../../tests/shared/demoTest'; import type { Options } from '../../tests/shared/demoTest';
globalThis.testConfig = {}; (global as any).testConfig = {};
vi.mock('../../tests/shared/demoTest', () => { jest.mock('../../tests/shared/demoTest', () => {
function fakeDemoTest(name: string, option: Options = {}) { function fakeDemoTest(name: string, option: Options = {}) {
globalThis.testConfig[name] = option; (global as any).testConfig[name] = option;
} }
fakeDemoTest.rootPropsTest = () => {}; fakeDemoTest.rootPropsTest = () => {};
return { return fakeDemoTest;
default: fakeDemoTest,
rootPropsTest: () => {},
};
}); });
describe('node', () => { describe('node', () => {
beforeAll(() => { beforeAll(() => {
vi.useFakeTimers().setSystemTime(new Date('2016-11-22')); jest.useFakeTimers().setSystemTime(new Date('2016-11-22'));
}); });
// Find the component exist demo test file // Find the component exist demo test file
@ -30,27 +27,23 @@ describe('node', () => {
const componentName = componentTestFile.match(/components\/([^/]*)\//)![1]; const componentName = componentTestFile.match(/components\/([^/]*)\//)![1];
// Test for ssr // Test for ssr
// eslint-disable-next-line vitest/valid-describe-callback describe(componentName, () => {
describe(componentName, async () => {
const demoList = globSync(`./components/${componentName}/demo/*.tsx`); const demoList = globSync(`./components/${componentName}/demo/*.tsx`);
// Use mock to get config // Use mock to get config
await import(`../../${componentTestFile}`); require(`../../${componentTestFile}`); // eslint-disable-line global-require, import/no-dynamic-require
const option = (global as any).testConfig?.[componentName];
demoList.forEach((demoFile) => { demoList.forEach((demoFile) => {
const option = globalThis.testConfig?.[componentName];
const skip: string[] = option?.skip || []; const skip: string[] = option?.skip || [];
const test = skip.some((skipMarkdown) => demoFile.includes(skipMarkdown)) ? it.skip : it; const test = skip.some((skipMarkdown) => demoFile.includes(skipMarkdown)) ? it.skip : it;
test( test(demoFile, () => {
demoFile, const Demo = require(`../../${demoFile}`).default; // eslint-disable-line global-require, import/no-dynamic-require
async () => {
const Demo = (await import(`../../${demoFile}`)).default;
expect(() => { expect(() => {
renderToString(<Demo />); renderToString(<Demo />);
}).not.toThrow(); }).not.toThrow();
}, });
120000,
);
}); });
}); });
}); });

View File

@ -7,7 +7,7 @@ export interface BaseProps {
style?: React.CSSProperties; style?: React.CSSProperties;
} }
/* c8 ignore start */ /* istanbul ignore next */
export default function genPurePanel<ComponentProps extends BaseProps>( export default function genPurePanel<ComponentProps extends BaseProps>(
Component: any, Component: any,
defaultPrefixCls?: string, defaultPrefixCls?: string,
@ -96,4 +96,3 @@ export default function genPurePanel<ComponentProps extends BaseProps>(
); );
} as typeof Component; } as typeof Component;
} }
/* c8 ignore stop */

View File

@ -7,7 +7,7 @@ describe('getScroll', () => {
}); });
it('getScroll window', async () => { it('getScroll window', async () => {
const scrollToSpy = vi.spyOn(window, 'scrollTo').mockImplementation((x, y) => { const scrollToSpy = jest.spyOn(window, 'scrollTo').mockImplementation((x, y) => {
window.pageXOffset = x; window.pageXOffset = x;
window.pageYOffset = y; window.pageYOffset = y;
}); });
@ -18,7 +18,7 @@ describe('getScroll', () => {
}); });
it('getScroll document', async () => { it('getScroll document', async () => {
const scrollToSpy = vi.spyOn(window, 'scrollTo').mockImplementation((x, y) => { const scrollToSpy = jest.spyOn(window, 'scrollTo').mockImplementation((x, y) => {
document.documentElement.scrollLeft = x; document.documentElement.scrollLeft = x;
document.documentElement.scrollTop = y; document.documentElement.scrollTop = y;
}); });
@ -30,7 +30,7 @@ describe('getScroll', () => {
it('getScroll div', async () => { it('getScroll div', async () => {
const div = document.createElement('div'); const div = document.createElement('div');
const scrollToSpy = vi.spyOn(window, 'scrollTo').mockImplementation((x, y) => { const scrollToSpy = jest.spyOn(window, 'scrollTo').mockImplementation((x, y) => {
div.scrollLeft = x; div.scrollLeft = x;
div.scrollTop = y; div.scrollTop = y;
}); });
@ -42,7 +42,7 @@ describe('getScroll', () => {
it('getScroll documentElement', async () => { it('getScroll documentElement', async () => {
const div: any = {}; const div: any = {};
const scrollToSpy = vi.spyOn(window, 'scrollTo').mockImplementation((x, y) => { const scrollToSpy = jest.spyOn(window, 'scrollTo').mockImplementation((x, y) => {
div.scrollLeft = null; div.scrollLeft = null;
div.scrollTop = null; div.scrollTop = null;
div.documentElement = {}; div.documentElement = {};

View File

@ -11,7 +11,7 @@ describe('Test ResponsiveObserve', () => {
return null; return null;
}; };
render(<Demo />); render(<Demo />);
const subscribeFunc = vi.fn(); const subscribeFunc = jest.fn();
const token = responsiveObserveRef.subscribe(subscribeFunc); const token = responsiveObserveRef.subscribe(subscribeFunc);
expect( expect(
responsiveObserveRef.matchHandlers[responsiveObserveRef.responsiveMap.xs].mql.matches, responsiveObserveRef.matchHandlers[responsiveObserveRef.responsiveMap.xs].mql.matches,

View File

@ -2,10 +2,10 @@ import { waitFakeTimer } from '../../../tests/utils';
import scrollTo from '../scrollTo'; import scrollTo from '../scrollTo';
describe('Test ScrollTo function', () => { describe('Test ScrollTo function', () => {
const dateNowMock = vi.spyOn(Date, 'now'); const dateNowMock = jest.spyOn(Date, 'now');
beforeAll(() => { beforeAll(() => {
vi.useFakeTimers(); jest.useFakeTimers();
}); });
beforeEach(() => { beforeEach(() => {
@ -13,16 +13,16 @@ describe('Test ScrollTo function', () => {
}); });
afterAll(() => { afterAll(() => {
vi.useRealTimers(); jest.useRealTimers();
}); });
afterEach(() => { afterEach(() => {
vi.clearAllTimers(); jest.clearAllTimers();
dateNowMock.mockClear(); dateNowMock.mockClear();
}); });
it('test scrollTo', async () => { it('test scrollTo', async () => {
const scrollToSpy = vi.spyOn(window, 'scrollTo').mockImplementation((_, y) => { const scrollToSpy = jest.spyOn(window, 'scrollTo').mockImplementation((_, y) => {
window.scrollY = y; window.scrollY = y;
window.pageYOffset = y; window.pageYOffset = y;
}); });
@ -36,7 +36,7 @@ describe('Test ScrollTo function', () => {
}); });
it('test callback - option', async () => { it('test callback - option', async () => {
const cbMock = vi.fn(); const cbMock = jest.fn();
scrollTo(1000, { scrollTo(1000, {
callback: cbMock, callback: cbMock,
}); });

View File

@ -9,19 +9,19 @@ import TransButton from '../transButton';
describe('Test utils function', () => { describe('Test utils function', () => {
describe('throttle', () => { describe('throttle', () => {
beforeAll(() => { beforeAll(() => {
vi.useFakeTimers(); jest.useFakeTimers();
}); });
afterAll(() => { afterAll(() => {
vi.useRealTimers(); jest.useRealTimers();
}); });
afterEach(() => { afterEach(() => {
vi.clearAllTimers(); jest.clearAllTimers();
}); });
it('throttle function should work', async () => { it('throttle function should work', async () => {
const callback = vi.fn(); const callback = jest.fn();
const throttled = throttleByAnimationFrame(callback); const throttled = throttleByAnimationFrame(callback);
expect(callback).not.toHaveBeenCalled(); expect(callback).not.toHaveBeenCalled();
@ -34,7 +34,7 @@ describe('Test utils function', () => {
}); });
it('throttle function should be canceled', async () => { it('throttle function should be canceled', async () => {
const callback = vi.fn(); const callback = jest.fn();
const throttled = throttleByAnimationFrame(callback); const throttled = throttleByAnimationFrame(callback);
throttled(); throttled();
@ -54,7 +54,7 @@ describe('Test utils function', () => {
}); });
it('should trigger onClick when press enter', () => { it('should trigger onClick when press enter', () => {
const onClick = vi.fn(); const onClick = jest.fn();
const { container } = render(<TransButton onClick={onClick}>TransButton</TransButton>); const { container } = render(<TransButton onClick={onClick}>TransButton</TransButton>);
@ -75,7 +75,7 @@ describe('Test utils function', () => {
}); });
it('isStyleSupport return false in service side', () => { it('isStyleSupport return false in service side', () => {
const spy = vi const spy = jest
.spyOn(window.document, 'documentElement', 'get') .spyOn(window.document, 'documentElement', 'get')
.mockImplementation(() => undefined as unknown as HTMLElement); .mockImplementation(() => undefined as unknown as HTMLElement);
expect(isStyleSupport('color')).toBe(false); expect(isStyleSupport('color')).toBe(false);

View File

@ -1,10 +1,8 @@
import type { SpyInstance } from 'vitest';
describe('Test warning', () => { describe('Test warning', () => {
let spy: SpyInstance; let spy: jest.SpyInstance;
beforeAll(() => { beforeAll(() => {
spy = vi.spyOn(console, 'error').mockImplementation(() => {}); spy = jest.spyOn(console, 'error').mockImplementation(() => {});
}); });
afterAll(() => { afterAll(() => {
@ -12,7 +10,7 @@ describe('Test warning', () => {
}); });
beforeEach(() => { beforeEach(() => {
vi.resetModules(); jest.resetModules();
}); });
afterEach(() => { afterEach(() => {

View File

@ -3,13 +3,11 @@ import mountTest from '../../../tests/shared/mountTest';
import { act, fireEvent, getByText, render, waitFakeTimer } from '../../../tests/utils'; import { act, fireEvent, getByText, render, waitFakeTimer } from '../../../tests/utils';
import Wave from '../wave'; import Wave from '../wave';
let isVisible = vi.hoisted(() => true); (global as any).isVisible = true;
vi.mock('rc-util/es/Dom/isVisible', () => { jest.mock('rc-util/lib/Dom/isVisible', () => {
const mockFn = () => isVisible; const mockFn = () => (global as any).isVisible;
return { return mockFn;
default: mockFn,
};
}); });
describe('Wave component', () => { describe('Wave component', () => {
@ -31,37 +29,44 @@ describe('Wave component', () => {
} }
(window as any).ResizeObserver = FakeResizeObserver; (window as any).ResizeObserver = FakeResizeObserver;
vi.useFakeTimers(); jest.useFakeTimers();
}); });
afterAll(() => { afterAll(() => {
vi.useRealTimers(); jest.useRealTimers();
expect(obCnt).not.toBe(0); expect(obCnt).not.toBe(0);
expect(disCnt).not.toBe(0); expect(disCnt).not.toBe(0);
}); });
beforeEach(() => { beforeEach(() => {
isVisible = true; (global as any).isVisible = true;
document.body.innerHTML = ''; document.body.innerHTML = '';
}); });
afterEach(async () => { afterEach(() => {
await vi.runAllTimersAsync(); jest.clearAllTimers();
vi.clearAllTimers();
const styles = document.getElementsByTagName('style'); const styles = document.getElementsByTagName('style');
for (let i = 0; i < styles.length; i += 1) { for (let i = 0; i < styles.length; i += 1) {
styles[i].remove(); styles[i].remove();
} }
}); });
function getWaveColor() { function getWaveStyle() {
const styleObj: Record<string, string> = {};
const { style } = document.querySelector<HTMLElement>('.ant-wave')!; const { style } = document.querySelector<HTMLElement>('.ant-wave')!;
return style.getPropertyValue('--wave-color'); style.cssText.split(';').forEach((kv) => {
if (kv.trim()) {
const cells = kv.split(':');
styleObj[cells[0].trim()] = cells[1].trim();
}
});
return styleObj;
} }
function waitRaf() { function waitRaf() {
act(() => { act(() => {
vi.advanceTimersByTime(100); jest.advanceTimersByTime(100);
}); });
} }
@ -85,7 +90,7 @@ describe('Wave component', () => {
}); });
it('invisible in screen', () => { it('invisible in screen', () => {
isVisible = false; (global as any).isVisible = false;
const { container, unmount } = render( const { container, unmount } = render(
<Wave> <Wave>
<button type="button">button</button> <button type="button">button</button>
@ -114,7 +119,9 @@ describe('Wave component', () => {
fireEvent.click(container.querySelector('button')!); fireEvent.click(container.querySelector('button')!);
waitRaf(); waitRaf();
expect(getWaveColor()).toBeFalsy(); const style = getWaveStyle();
expect(style['--wave-color']).toBeFalsy();
unmount(); unmount();
}); });
@ -122,7 +129,7 @@ describe('Wave component', () => {
it('wave color is not grey', () => { it('wave color is not grey', () => {
const { container, unmount } = render( const { container, unmount } = render(
<Wave> <Wave>
<button type="button" style={{ borderColor: 'rgb(255, 0, 0)' }}> <button type="button" style={{ borderColor: 'red' }}>
button button
</button> </button>
</Wave>, </Wave>,
@ -131,7 +138,8 @@ describe('Wave component', () => {
fireEvent.click(container.querySelector('button')!); fireEvent.click(container.querySelector('button')!);
waitRaf(); waitRaf();
expect(getWaveColor()).toEqual('rgb(255, 0, 0)'); const style = getWaveStyle();
expect(style['--wave-color']).toEqual('red');
unmount(); unmount();
}); });
@ -139,14 +147,15 @@ describe('Wave component', () => {
it('read wave color from border-top-color', () => { it('read wave color from border-top-color', () => {
const { container, unmount } = render( const { container, unmount } = render(
<Wave> <Wave>
<div style={{ borderTopColor: 'rgb(0, 0, 255)' }}>button</div> <div style={{ borderTopColor: 'blue' }}>button</div>
</Wave>, </Wave>,
); );
fireEvent.click(getByText(container, 'button')!); fireEvent.click(getByText(container, 'button')!);
waitRaf(); waitRaf();
expect(getWaveColor()).toEqual('rgb(0, 0, 255)'); const style = getWaveStyle();
expect(style['--wave-color']).toEqual('blue');
unmount(); unmount();
}); });
@ -154,14 +163,15 @@ describe('Wave component', () => {
it('read wave color from background color', () => { it('read wave color from background color', () => {
const { container, unmount } = render( const { container, unmount } = render(
<Wave> <Wave>
<div style={{ backgroundColor: 'rgb(0, 128, 0)' }}>button</div> <div style={{ backgroundColor: 'green' }}>button</div>
</Wave>, </Wave>,
); );
fireEvent.click(getByText(container, 'button')!); fireEvent.click(getByText(container, 'button')!);
waitRaf(); waitRaf();
expect(getWaveColor()).toEqual('rgb(0, 128, 0)'); const style = getWaveStyle();
expect(style['--wave-color']).toEqual('green');
unmount(); unmount();
}); });
@ -169,14 +179,15 @@ describe('Wave component', () => {
it('read wave color from border firstly', () => { it('read wave color from border firstly', () => {
const { container, unmount } = render( const { container, unmount } = render(
<Wave> <Wave>
<div style={{ borderColor: 'rgb(255, 0, 0)', backgroundColor: 'green' }}>button</div> <div style={{ borderColor: 'yellow', backgroundColor: 'green' }}>button</div>
</Wave>, </Wave>,
); );
fireEvent.click(getByText(container, 'button')!); fireEvent.click(getByText(container, 'button')!);
waitRaf(); waitRaf();
expect(getWaveColor()).toEqual('rgb(255, 0, 0)'); const style = getWaveStyle();
expect(style['--wave-color']).toEqual('yellow');
unmount(); unmount();
}); });
@ -211,7 +222,7 @@ describe('Wave component', () => {
}); });
it('not show when hidden', () => { it('not show when hidden', () => {
isVisible = false; (global as any).isVisible = false;
const { container } = render( const { container } = render(
<Wave> <Wave>
@ -260,7 +271,7 @@ describe('Wave component', () => {
it('wave color should inferred if border is transparent and background is not', () => { it('wave color should inferred if border is transparent and background is not', () => {
const { container, unmount } = render( const { container, unmount } = render(
<Wave> <Wave>
<button type="button" style={{ borderColor: 'transparent', background: 'rgb(255, 0, 0)' }}> <button type="button" style={{ borderColor: 'transparent', background: 'red' }}>
button button
</button> </button>
</Wave>, </Wave>,
@ -268,7 +279,8 @@ describe('Wave component', () => {
fireEvent.click(container.querySelector('button')!); fireEvent.click(container.querySelector('button')!);
waitRaf(); waitRaf();
expect(getWaveColor()).toEqual('rgb(255, 0, 0)'); const style = getWaveStyle();
expect(style['--wave-color']).toEqual('red');
unmount(); unmount();
}); });
@ -285,7 +297,8 @@ describe('Wave component', () => {
fireEvent.click(container.querySelector('button')!); fireEvent.click(container.querySelector('button')!);
waitRaf(); waitRaf();
expect(getWaveColor()).toEqual('red'); const style = getWaveStyle();
expect(style['--wave-color']).toEqual('red');
unmount(); unmount();
}); });

View File

@ -22,7 +22,7 @@ const AffixMounter: React.FC<AffixProps> = ({ getInstance, ...restProps }) => {
const container = useRef<HTMLDivElement>(null); const container = useRef<HTMLDivElement>(null);
useEffect(() => { useEffect(() => {
if (container.current) { if (container.current) {
container.current.addEventListener = vi container.current.addEventListener = jest
.fn() .fn()
.mockImplementation((event: keyof HTMLElementEventMap, cb: (ev: Event) => void) => { .mockImplementation((event: keyof HTMLElementEventMap, cb: (ev: Event) => void) => {
events[event] = cb; events[event] = cb;
@ -42,12 +42,12 @@ describe('Affix Render', () => {
rtlTest(Affix); rtlTest(Affix);
accessibilityTest(Affix); accessibilityTest(Affix);
const domMock = vi.spyOn(HTMLElement.prototype, 'getBoundingClientRect'); const domMock = jest.spyOn(HTMLElement.prototype, 'getBoundingClientRect');
const classRect: Record<string, DOMRect> = { container: { top: 0, bottom: 100 } as DOMRect }; const classRect: Record<string, DOMRect> = { container: { top: 0, bottom: 100 } as DOMRect };
beforeEach(() => { beforeEach(() => {
vi.useFakeTimers(); jest.useFakeTimers();
}); });
beforeAll(() => { beforeAll(() => {
@ -57,8 +57,8 @@ describe('Affix Render', () => {
}); });
afterEach(() => { afterEach(() => {
vi.useRealTimers(); jest.useRealTimers();
vi.clearAllTimers(); jest.clearAllTimers();
}); });
afterAll(() => { afterAll(() => {
@ -89,11 +89,7 @@ describe('Affix Render', () => {
}); });
it('Anchor correct render when target is null', async () => { it('Anchor correct render when target is null', async () => {
render( render(<Affix target={() => null}>test</Affix>);
<Affix target={() => null}>
<span>test</span>
</Affix>,
);
await waitFakeTimer(); await waitFakeTimer();
}); });
@ -113,7 +109,7 @@ describe('Affix Render', () => {
}); });
it('updatePosition when offsetTop changed', async () => { it('updatePosition when offsetTop changed', async () => {
const onChange = vi.fn(); const onChange = jest.fn();
const { container, rerender } = render(<AffixMounter offsetTop={0} onChange={onChange} />); const { container, rerender } = render(<AffixMounter offsetTop={0} onChange={onChange} />);
await waitFakeTimer(); await waitFakeTimer();
@ -232,7 +228,7 @@ describe('Affix Render', () => {
'.fixed', // outer '.fixed', // outer
].forEach((selector) => { ].forEach((selector) => {
it(`trigger listener when size change: ${selector}`, async () => { it(`trigger listener when size change: ${selector}`, async () => {
const updateCalled = vi.fn(); const updateCalled = jest.fn();
const { container } = render( const { container } = render(
<AffixMounter offsetBottom={0} onTestUpdatePosition={updateCalled} />, <AffixMounter offsetBottom={0} onTestUpdatePosition={updateCalled} />,
{ {

View File

@ -1,6 +1,6 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Affix Render > rtl render > component should be rendered correctly in RTL direction 1`] = ` exports[`Affix Render rtl render component should be rendered correctly in RTL direction 1`] = `
<div> <div>
<div <div
class="" class=""

View File

@ -1,4 +1,4 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders components/affix/demo/basic.tsx extend context correctly 1`] = ` exports[`renders components/affix/demo/basic.tsx extend context correctly 1`] = `
Array [ Array [

View File

@ -1,4 +1,4 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders components/affix/demo/basic.tsx correctly 1`] = ` exports[`renders components/affix/demo/basic.tsx correctly 1`] = `
Array [ Array [

View File

@ -1,4 +1,4 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders components/alert/demo/action.tsx extend context correctly 1`] = ` exports[`renders components/alert/demo/action.tsx extend context correctly 1`] = `
<div <div

View File

@ -1,4 +1,4 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders components/alert/demo/action.tsx correctly 1`] = ` exports[`renders components/alert/demo/action.tsx correctly 1`] = `
<div <div

View File

@ -1,6 +1,6 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Alert > custom action 1`] = ` exports[`Alert custom action 1`] = `
<div <div
class="ant-alert ant-alert-success" class="ant-alert ant-alert-success"
data-show="true" data-show="true"
@ -74,7 +74,7 @@ exports[`Alert > custom action 1`] = `
</div> </div>
`; `;
exports[`Alert > rtl render > component should be rendered correctly in RTL direction 1`] = ` exports[`Alert rtl render component should be rendered correctly in RTL direction 1`] = `
<div <div
class="ant-alert ant-alert-info ant-alert-no-icon ant-alert-rtl" class="ant-alert ant-alert-info ant-alert-no-icon ant-alert-rtl"
data-show="true" data-show="true"

View File

@ -3,7 +3,7 @@ import React from 'react';
import Alert from '..'; import Alert from '..';
import accessibilityTest from '../../../tests/shared/accessibilityTest'; import accessibilityTest from '../../../tests/shared/accessibilityTest';
import rtlTest from '../../../tests/shared/rtlTest'; import rtlTest from '../../../tests/shared/rtlTest';
import { render, screen, waitFor } from '../../../tests/utils'; import { act, render, screen } from '../../../tests/utils';
import Button from '../../button'; import Button from '../../button';
import Popconfirm from '../../popconfirm'; import Popconfirm from '../../popconfirm';
import Tooltip from '../../tooltip'; import Tooltip from '../../tooltip';
@ -15,15 +15,15 @@ describe('Alert', () => {
accessibilityTest(Alert); accessibilityTest(Alert);
beforeAll(() => { beforeAll(() => {
vi.useFakeTimers(); jest.useFakeTimers();
}); });
afterAll(() => { afterAll(() => {
vi.useRealTimers(); jest.useRealTimers();
}); });
it('should show close button and could be closed', async () => { it('should show close button and could be closed', async () => {
const onClose = vi.fn(); const onClose = jest.fn();
render( render(
<Alert <Alert
message="Warning Text Warning Text Warning TextW arning Text Warning Text Warning TextWarning Text" message="Warning Text Warning Text Warning TextW arning Text Warning Text Warning TextWarning Text"
@ -35,6 +35,10 @@ describe('Alert', () => {
await userEvent.click(screen.getByRole('button', { name: /close/i })); await userEvent.click(screen.getByRole('button', { name: /close/i }));
act(() => {
jest.runAllTimers();
});
expect(onClose).toHaveBeenCalledTimes(1); expect(onClose).toHaveBeenCalledTimes(1);
}); });
@ -72,7 +76,7 @@ describe('Alert', () => {
}); });
it('should show error as ErrorBoundary when children have error', () => { it('should show error as ErrorBoundary when children have error', () => {
const warnSpy = vi.spyOn(console, 'error').mockImplementation(() => {}); const warnSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
expect(warnSpy).toHaveBeenCalledTimes(0); expect(warnSpy).toHaveBeenCalledTimes(0);
// @ts-expect-error // @ts-expect-error
// eslint-disable-next-line react/jsx-no-undef // eslint-disable-next-line react/jsx-no-undef
@ -101,9 +105,11 @@ describe('Alert', () => {
await userEvent.hover(screen.getByRole('alert')); await userEvent.hover(screen.getByRole('alert'));
await waitFor(() => { act(() => {
expect(screen.getByRole('tooltip')).toBeInTheDocument(); jest.runAllTimers();
}); });
expect(screen.getByRole('tooltip')).toBeInTheDocument();
}); });
it('could be used with Popconfirm', async () => { it('could be used with Popconfirm', async () => {
@ -117,6 +123,10 @@ describe('Alert', () => {
); );
await userEvent.click(screen.getByRole('alert')); await userEvent.click(screen.getByRole('alert'));
act(() => {
jest.runAllTimers();
});
expect(screen.getByRole('tooltip')).toBeInTheDocument(); expect(screen.getByRole('tooltip')).toBeInTheDocument();
}); });

View File

@ -2,7 +2,6 @@ import { resetWarned } from 'rc-util/lib/warning';
import React, { useState } from 'react'; import React, { useState } from 'react';
import scrollIntoView from 'scroll-into-view-if-needed'; import scrollIntoView from 'scroll-into-view-if-needed';
import type { SpyInstance } from 'vitest';
import Anchor from '..'; import Anchor from '..';
import { act, fireEvent, render, waitFakeTimer } from '../../../tests/utils'; import { act, fireEvent, render, waitFakeTimer } from '../../../tests/utils';
import Button from '../../button'; import Button from '../../button';
@ -10,9 +9,8 @@ import type { AnchorDirection } from '../Anchor';
const { Link } = Anchor; const { Link } = Anchor;
function createRootDiv() { function createDiv() {
const root = document.createElement('div'); const root = document.createElement('div');
root.className = 'root';
document.body.appendChild(root); document.body.appendChild(root);
return root; return root;
} }
@ -20,16 +18,18 @@ function createRootDiv() {
let idCounter = 0; let idCounter = 0;
const getHashUrl = () => `Anchor-API-${idCounter++}`; const getHashUrl = () => `Anchor-API-${idCounter++}`;
vi.mock('scroll-into-view-if-needed', () => ({ jest.mock('scroll-into-view-if-needed', () => jest.fn());
default: vi.fn(),
}));
describe('Anchor Render', () => { describe('Anchor Render', () => {
const getBoundingClientRectMock = vi.spyOn(HTMLHeadingElement.prototype, 'getBoundingClientRect'); const getBoundingClientRectMock = jest.spyOn(
const getClientRectsMock = vi.spyOn(HTMLHeadingElement.prototype, 'getClientRects'); HTMLHeadingElement.prototype,
'getBoundingClientRect',
);
const getClientRectsMock = jest.spyOn(HTMLHeadingElement.prototype, 'getClientRects');
const scrollIntoViewMock = jest.createMockFromModule<any>('scroll-into-view-if-needed');
beforeAll(() => { beforeAll(() => {
vi.useFakeTimers(); jest.useFakeTimers();
getBoundingClientRectMock.mockReturnValue({ getBoundingClientRectMock.mockReturnValue({
width: 100, width: 100,
height: 100, height: 100,
@ -39,18 +39,18 @@ describe('Anchor Render', () => {
}); });
beforeEach(() => { beforeEach(() => {
vi.useFakeTimers(); jest.useFakeTimers();
vi.mocked(scrollIntoView).mockReset(); scrollIntoViewMock.mockReset();
}); });
afterEach(() => { afterEach(() => {
vi.clearAllTimers(); jest.clearAllTimers();
vi.useRealTimers(); jest.useRealTimers();
}); });
afterAll(() => { afterAll(() => {
vi.clearAllTimers(); jest.clearAllTimers();
vi.useRealTimers(); jest.useRealTimers();
getBoundingClientRectMock.mockRestore(); getBoundingClientRectMock.mockRestore();
getClientRectsMock.mockRestore(); getClientRectsMock.mockRestore();
}); });
@ -186,12 +186,12 @@ describe('Anchor Render', () => {
const link = container.querySelector(`a[href="http://www.example.com/#${hash}"]`)!; const link = container.querySelector(`a[href="http://www.example.com/#${hash}"]`)!;
fireEvent.click(link); fireEvent.click(link);
await waitFakeTimer(); await waitFakeTimer();
expect(link.classList.contains('ant-anchor-link-title-active')).toBeTruthy(); expect(link.classList).toContain('ant-anchor-link-title-active');
}); });
it('scrolls the page when clicking a link', async () => { it('scrolls the page when clicking a link', async () => {
const root = createRootDiv(); const root = createDiv();
const scrollToSpy = vi.spyOn(window, 'scrollTo'); const scrollToSpy = jest.spyOn(window, 'scrollTo');
render(<div id="/faq?locale=en#Q1">Q1</div>, { container: root }); render(<div id="/faq?locale=en#Q1">Q1</div>, { container: root });
const { container } = render( const { container } = render(
<Anchor items={[{ key: 'Q1', title: 'Q1', href: '/#/faq?locale=en#Q1' }]} />, <Anchor items={[{ key: 'Q1', title: 'Q1', href: '/#/faq?locale=en#Q1' }]} />,
@ -200,14 +200,13 @@ describe('Anchor Render', () => {
fireEvent.click(link); fireEvent.click(link);
await waitFakeTimer(); await waitFakeTimer();
expect(scrollToSpy).toHaveBeenCalled(); expect(scrollToSpy).toHaveBeenCalled();
scrollToSpy.mockRestore();
}); });
it('handleScroll should not be triggered when scrolling caused by clicking a link', async () => { it('handleScroll should not be triggered when scrolling caused by clicking a link', async () => {
const hash1 = getHashUrl(); const hash1 = getHashUrl();
const hash2 = getHashUrl(); const hash2 = getHashUrl();
const root = createRootDiv(); const root = createDiv();
const onChange = vi.fn(); const onChange = jest.fn();
render( render(
<div> <div>
<div id={hash1}>Hello</div> <div id={hash1}>Hello</div>
@ -266,8 +265,8 @@ describe('Anchor Render', () => {
it('targetOffset prop', async () => { it('targetOffset prop', async () => {
const hash = getHashUrl(); const hash = getHashUrl();
const scrollToSpy = vi.spyOn(window, 'scrollTo'); const scrollToSpy = jest.spyOn(window, 'scrollTo');
const root = createRootDiv(); const root = createDiv();
render(<h1 id={hash}>Hello</h1>, { container: root }); render(<h1 id={hash}>Hello</h1>, { container: root });
const { container, rerender } = render( const { container, rerender } = render(
<Anchor items={[{ key: hash, href: `#${hash}`, title: hash }]} />, <Anchor items={[{ key: hash, href: `#${hash}`, title: hash }]} />,
@ -291,16 +290,14 @@ describe('Anchor Render', () => {
fireEvent.click(container.querySelector(`a[href="#${hash}"]`)!); fireEvent.click(container.querySelector(`a[href="#${hash}"]`)!);
await waitFakeTimer(); await waitFakeTimer();
expect(scrollToSpy).toHaveBeenLastCalledWith(0, 800); expect(scrollToSpy).toHaveBeenLastCalledWith(0, 800);
scrollToSpy.mockRestore();
}); });
// https://github.com/ant-design/ant-design/issues/31941 // https://github.com/ant-design/ant-design/issues/31941
it('targetOffset prop when contain spaces', async () => { it('targetOffset prop when contain spaces', async () => {
const hash = `${getHashUrl()} s p a c e s`; const hash = `${getHashUrl()} s p a c e s`;
const scrollToSpy = vi.spyOn(window, 'scrollTo'); const scrollToSpy = jest.spyOn(window, 'scrollTo');
const root = createRootDiv(); const root = createDiv();
render(<h1 id={hash}>Hello</h1>, { container: root }); render(<h1 id={hash}>Hello</h1>, { container: root });
const { container, rerender } = render( const { container, rerender } = render(
<Anchor items={[{ key: hash, href: `#${hash}`, title: hash }]} />, <Anchor items={[{ key: hash, href: `#${hash}`, title: hash }]} />,
@ -322,8 +319,6 @@ describe('Anchor Render', () => {
fireEvent.click(container.querySelector(`a[href="#${hash}"]`)!); fireEvent.click(container.querySelector(`a[href="#${hash}"]`)!);
await waitFakeTimer(); await waitFakeTimer();
expect(scrollToSpy).toHaveBeenLastCalledWith(0, 800); expect(scrollToSpy).toHaveBeenLastCalledWith(0, 800);
scrollToSpy.mockRestore();
}); });
it('onClick event', () => { it('onClick event', () => {
@ -352,7 +347,7 @@ describe('Anchor Render', () => {
it('onChange event', () => { it('onChange event', () => {
const hash1 = getHashUrl(); const hash1 = getHashUrl();
const hash2 = getHashUrl(); const hash2 = getHashUrl();
const onChange = vi.fn(); const onChange = jest.fn();
const { container } = render( const { container } = render(
<Anchor <Anchor
onChange={onChange} onChange={onChange}
@ -383,8 +378,8 @@ describe('Anchor Render', () => {
const hash1 = getHashUrl(); const hash1 = getHashUrl();
const hash2 = getHashUrl(); const hash2 = getHashUrl();
const beforeFn = vi.fn(); const beforeFn = jest.fn();
const afterFn = vi.fn(); const afterFn = jest.fn();
const Demo: React.FC = () => { const Demo: React.FC = () => {
const [trigger, setTrigger] = useState(false); const [trigger, setTrigger] = useState(false);
@ -440,8 +435,8 @@ describe('Anchor Render', () => {
getBoundingClientRectMock.mockReturnValue({ width: 0, height: 0, top: 1000 } as DOMRect); getBoundingClientRectMock.mockReturnValue({ width: 0, height: 0, top: 1000 } as DOMRect);
const hash = getHashUrl(); const hash = getHashUrl();
const scrollToSpy = vi.spyOn(window, 'scrollTo'); const scrollToSpy = jest.spyOn(window, 'scrollTo');
const root = createRootDiv(); const root = createDiv();
render(<h1 id={hash}>Hello</h1>, { container: root }); render(<h1 id={hash}>Hello</h1>, { container: root });
const { container, rerender } = render( const { container, rerender } = render(
<Anchor> <Anchor>
@ -475,14 +470,13 @@ describe('Anchor Render', () => {
height: 100, height: 100,
top: 1000, top: 1000,
} as DOMRect); } as DOMRect);
scrollToSpy.mockRestore();
}); });
it('test edge case when container is not windows', async () => { it('test edge case when container is not windows', async () => {
const hash = getHashUrl(); const hash = getHashUrl();
const root = createRootDiv(); const scrollToSpy = jest.spyOn(window, 'scrollTo');
const root = createDiv();
render(<h1 id={hash}>Hello</h1>, { container: root }); render(<h1 id={hash}>Hello</h1>, { container: root });
const { container, rerender } = render( const { container, rerender } = render(
@ -498,23 +492,19 @@ describe('Anchor Render', () => {
</Anchor>, </Anchor>,
); );
// Since it's mock rect pos here. We need always reset the `scrollTop` for test
document.body.scrollTop = 0;
fireEvent.click(container.querySelector(`a[href="#${hash}"]`)!); fireEvent.click(container.querySelector(`a[href="#${hash}"]`)!);
await waitFakeTimer(); await waitFakeTimer();
expect(document.body.scrollTop).toEqual(1000); expect(scrollToSpy).toHaveBeenLastCalledWith(0, 800);
document.body.scrollTop = 0;
setProps({ offsetTop: 100 }); setProps({ offsetTop: 100 });
fireEvent.click(container.querySelector(`a[href="#${hash}"]`)!); fireEvent.click(container.querySelector(`a[href="#${hash}"]`)!);
await waitFakeTimer(); await waitFakeTimer();
expect(document.body.scrollTop).toEqual(900); expect(scrollToSpy).toHaveBeenLastCalledWith(0, 800);
document.body.scrollTop = 0;
setProps({ targetOffset: 200 }); setProps({ targetOffset: 200 });
fireEvent.click(container.querySelector(`a[href="#${hash}"]`)!); fireEvent.click(container.querySelector(`a[href="#${hash}"]`)!);
await waitFakeTimer(); await waitFakeTimer();
expect(document.body.scrollTop).toEqual(800); expect(scrollToSpy).toHaveBeenLastCalledWith(0, 800);
}); });
describe('getCurrentAnchor', () => { describe('getCurrentAnchor', () => {
@ -539,7 +529,7 @@ describe('Anchor Render', () => {
it('should trigger onChange when have getCurrentAnchor', () => { it('should trigger onChange when have getCurrentAnchor', () => {
const hash1 = getHashUrl(); const hash1 = getHashUrl();
const hash2 = getHashUrl(); const hash2 = getHashUrl();
const onChange = vi.fn(); const onChange = jest.fn();
const { container } = render( const { container } = render(
<Anchor <Anchor
onChange={onChange} onChange={onChange}
@ -563,7 +553,7 @@ describe('Anchor Render', () => {
it('getCurrentAnchor have default link as argument', () => { it('getCurrentAnchor have default link as argument', () => {
const hash1 = getHashUrl(); const hash1 = getHashUrl();
const hash2 = getHashUrl(); const hash2 = getHashUrl();
const getCurrentAnchor = vi.fn(); const getCurrentAnchor = jest.fn();
const { container } = render( const { container } = render(
<Anchor <Anchor
getCurrentAnchor={getCurrentAnchor} getCurrentAnchor={getCurrentAnchor}
@ -613,8 +603,8 @@ describe('Anchor Render', () => {
describe('scroll x', () => { describe('scroll x', () => {
it('targetOffset horizontal', async () => { it('targetOffset horizontal', async () => {
const hash = getHashUrl(); const hash = getHashUrl();
const scrollToSpy = vi.spyOn(window, 'scrollTo'); const scrollToSpy = jest.spyOn(window, 'scrollTo');
const root = createRootDiv(); const root = createDiv();
render(<h1 id={hash}>Hello</h1>, { container: root }); render(<h1 id={hash}>Hello</h1>, { container: root });
const { container, rerender } = render( const { container, rerender } = render(
<Anchor <Anchor
@ -658,8 +648,6 @@ describe('Anchor Render', () => {
fireEvent.click(container.querySelector(`a[href="#${hash}"]`)!); fireEvent.click(container.querySelector(`a[href="#${hash}"]`)!);
await waitFakeTimer(); await waitFakeTimer();
expect(scrollToSpy).toHaveBeenLastCalledWith(0, 800); expect(scrollToSpy).toHaveBeenLastCalledWith(0, 800);
scrollToSpy.mockRestore();
}); });
}); });
@ -768,12 +756,12 @@ describe('Anchor Render', () => {
const link = container.querySelector(`a[href="http://www.example.com/#${hash}"]`)!; const link = container.querySelector(`a[href="http://www.example.com/#${hash}"]`)!;
fireEvent.click(link); fireEvent.click(link);
await waitFakeTimer(); await waitFakeTimer();
expect(link.classList.contains('ant-anchor-link-title-active')).toBeTruthy(); expect(link.classList).toContain('ant-anchor-link-title-active');
}); });
it('scrolls the page when clicking a link', async () => { it('scrolls the page when clicking a link', async () => {
const root = createRootDiv(); const root = createDiv();
const scrollToSpy = vi.spyOn(window, 'scrollTo'); const scrollToSpy = jest.spyOn(window, 'scrollTo');
render(<div id="/faq?locale=en#Q1">Q1</div>, { container: root }); render(<div id="/faq?locale=en#Q1">Q1</div>, { container: root });
const { container } = render( const { container } = render(
<Anchor> <Anchor>
@ -784,15 +772,13 @@ describe('Anchor Render', () => {
fireEvent.click(link); fireEvent.click(link);
await waitFakeTimer(); await waitFakeTimer();
expect(scrollToSpy).toHaveBeenCalled(); expect(scrollToSpy).toHaveBeenCalled();
scrollToSpy.mockRestore();
}); });
it('handleScroll should not be triggered when scrolling caused by clicking a link', async () => { it('handleScroll should not be triggered when scrolling caused by clicking a link', async () => {
const hash1 = getHashUrl(); const hash1 = getHashUrl();
const hash2 = getHashUrl(); const hash2 = getHashUrl();
const root = createRootDiv(); const root = createDiv();
const onChange = vi.fn(); const onChange = jest.fn();
render( render(
<div> <div>
<div id={hash1}>Hello</div> <div id={hash1}>Hello</div>
@ -865,10 +851,10 @@ describe('Anchor Render', () => {
}); });
describe('warning', () => { describe('warning', () => {
let errSpy: SpyInstance; let errSpy: jest.SpyInstance;
beforeEach(() => { beforeEach(() => {
resetWarned(); resetWarned();
errSpy = vi.spyOn(console, 'error').mockImplementation(() => {}); errSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
}); });
afterEach(() => { afterEach(() => {
@ -985,14 +971,14 @@ describe('Anchor Render', () => {
const toggleButton = wrapper.container.querySelector('button')!; const toggleButton = wrapper.container.querySelector('button')!;
fireEvent.click(toggleButton); fireEvent.click(toggleButton);
act(() => vi.runAllTimers()); act(() => jest.runAllTimers());
expect(!!ink.style.left).toBe(true); expect(!!ink.style.left).toBe(true);
expect(!!ink.style.width).toBe(true); expect(!!ink.style.width).toBe(true);
expect(ink.style.top).toBe(''); expect(ink.style.top).toBe('');
expect(ink.style.height).toBe(''); expect(ink.style.height).toBe('');
fireEvent.click(toggleButton); fireEvent.click(toggleButton);
act(() => vi.runAllTimers()); act(() => jest.runAllTimers());
expect(!!ink.style.top).toBe(true); expect(!!ink.style.top).toBe(true);
expect(!!ink.style.height).toBe(true); expect(!!ink.style.height).toBe(true);
expect(ink.style.left).toBe(''); expect(ink.style.left).toBe('');

View File

@ -1,6 +1,6 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Anchor Render > render items and ignore jsx children 1`] = ` exports[`Anchor Render render items and ignore jsx children 1`] = `
<div> <div>
<div <div
class="" class=""
@ -32,7 +32,7 @@ exports[`Anchor Render > render items and ignore jsx children 1`] = `
</div> </div>
`; `;
exports[`Anchor Render > renders items correctly 1`] = ` exports[`Anchor Render renders items correctly 1`] = `
<div> <div>
<div <div
class="" class=""
@ -108,7 +108,7 @@ exports[`Anchor Render > renders items correctly 1`] = `
</div> </div>
`; `;
exports[`Anchor Render > renders items correctly#horizontal 1`] = ` exports[`Anchor Render renders items correctly#horizontal 1`] = `
<div> <div>
<div <div
class="" class=""

View File

@ -1,4 +1,4 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders components/anchor/demo/basic.tsx extend context correctly 1`] = ` exports[`renders components/anchor/demo/basic.tsx extend context correctly 1`] = `
<div <div

View File

@ -1,4 +1,4 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders components/anchor/demo/basic.tsx correctly 1`] = ` exports[`renders components/anchor/demo/basic.tsx correctly 1`] = `
<div <div

View File

@ -1,4 +1,4 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders components/app/demo/basic.tsx extend context correctly 1`] = ` exports[`renders components/app/demo/basic.tsx extend context correctly 1`] = `
<div <div

View File

@ -1,4 +1,4 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders components/app/demo/basic.tsx correctly 1`] = ` exports[`renders components/app/demo/basic.tsx correctly 1`] = `
<div <div

View File

@ -1,12 +1,12 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`App > rtl render > component should be rendered correctly in RTL direction 1`] = ` exports[`App rtl render component should be rendered correctly in RTL direction 1`] = `
<div <div
class="ant-app" class="ant-app"
/> />
`; `;
exports[`App > single 1`] = ` exports[`App single 1`] = `
<div <div
class="ant-app" class="ant-app"
> >

View File

@ -11,12 +11,12 @@ describe('App', () => {
rtlTest(App); rtlTest(App);
beforeEach(() => { beforeEach(() => {
vi.useFakeTimers(); jest.useFakeTimers();
}); });
afterEach(() => { afterEach(() => {
vi.clearAllTimers(); jest.clearAllTimers();
vi.useRealTimers(); jest.useRealTimers();
}); });
it('single', () => { it('single', () => {
@ -134,12 +134,10 @@ describe('App', () => {
it('support style', () => { it('support style', () => {
const { container } = render( const { container } = render(
<App style={{ color: 'rgb(255, 0, 0)' }}> <App style={{ color: 'blue' }}>
<div>test</div> <div>test</div>
</App>, </App>,
); );
expect(container.querySelector<HTMLDivElement>('.ant-app')).toHaveStyle( expect(container.querySelector<HTMLDivElement>('.ant-app')).toHaveStyle('color: blue;');
'color: rgb(255, 0, 0);',
);
}); });
}); });

View File

@ -1,4 +1,4 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders components/auto-complete/demo/basic.tsx extend context correctly 1`] = ` exports[`renders components/auto-complete/demo/basic.tsx extend context correctly 1`] = `
Array [ Array [
@ -235,7 +235,7 @@ exports[`renders components/auto-complete/demo/certain-category.tsx extend conte
> >
<div <div
class="rc-virtual-list-holder" class="rc-virtual-list-holder"
style="max-height: 256px; overflow-y: auto; overflow-anchor: none;" style="max-height: 256px; overflow-y: auto;"
> >
<div> <div>
<div <div
@ -1827,7 +1827,7 @@ exports[`renders components/auto-complete/demo/non-case-sensitive.tsx extend con
> >
<div <div
class="rc-virtual-list-holder" class="rc-virtual-list-holder"
style="max-height: 256px; overflow-y: auto; overflow-anchor: none;" style="max-height: 256px; overflow-y: auto;"
> >
<div> <div>
<div <div
@ -2028,7 +2028,7 @@ exports[`renders components/auto-complete/demo/render-panel.tsx extend context c
> >
<div <div
class="rc-virtual-list-holder" class="rc-virtual-list-holder"
style="max-height: 256px; overflow-y: auto; overflow-anchor: none;" style="max-height: 256px; overflow-y: auto;"
> >
<div> <div>
<div <div

View File

@ -1,4 +1,4 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders components/auto-complete/demo/basic.tsx correctly 1`] = ` exports[`renders components/auto-complete/demo/basic.tsx correctly 1`] = `
Array [ Array [

View File

@ -1,6 +1,6 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`AutoComplete > rtl render > component should be rendered correctly in RTL direction 1`] = ` exports[`AutoComplete rtl render component should be rendered correctly in RTL direction 1`] = `
<div <div
class="ant-select ant-select-rtl ant-select-auto-complete ant-select-single ant-select-show-search" class="ant-select ant-select-rtl ant-select-auto-complete ant-select-single ant-select-show-search"
> >

View File

@ -5,7 +5,7 @@ import { render } from '../../../tests/utils';
describe('AutoComplete children could be focus', () => { describe('AutoComplete children could be focus', () => {
beforeAll(() => { beforeAll(() => {
vi.useFakeTimers(); jest.useFakeTimers();
}); });
let container: HTMLDivElement; let container: HTMLDivElement;
@ -15,7 +15,7 @@ describe('AutoComplete children could be focus', () => {
}); });
afterAll(() => { afterAll(() => {
vi.useRealTimers(); jest.useRealTimers();
}); });
afterEach(() => { afterEach(() => {
@ -23,31 +23,31 @@ describe('AutoComplete children could be focus', () => {
}); });
it('focus() and onFocus', () => { it('focus() and onFocus', () => {
const handleFocus = vi.fn(); const handleFocus = jest.fn();
const { container: wrapper } = render(<AutoComplete onFocus={handleFocus} />, { container }); const { container: wrapper } = render(<AutoComplete onFocus={handleFocus} />, { container });
wrapper.querySelector('input')?.focus(); wrapper.querySelector('input')?.focus();
act(() => { act(() => {
vi.runAllTimers(); jest.runAllTimers();
}); });
expect(handleFocus).toHaveBeenCalled(); expect(handleFocus).toHaveBeenCalled();
}); });
it('blur() and onBlur', () => { it('blur() and onBlur', () => {
const handleBlur = vi.fn(); const handleBlur = jest.fn();
const { container: wrapper } = render(<AutoComplete onBlur={handleBlur} />, { container }); const { container: wrapper } = render(<AutoComplete onBlur={handleBlur} />, { container });
wrapper.querySelector('input')?.focus(); wrapper.querySelector('input')?.focus();
act(() => { act(() => {
vi.runAllTimers(); jest.runAllTimers();
}); });
wrapper.querySelector('input')?.blur(); wrapper.querySelector('input')?.blur();
act(() => { act(() => {
vi.runAllTimers(); jest.runAllTimers();
}); });
expect(handleBlur).toHaveBeenCalled(); expect(handleBlur).toHaveBeenCalled();
}); });
it('child.ref should work', () => { it('child.ref should work', () => {
const mockRef = vi.fn(); const mockRef = jest.fn();
render( render(
<AutoComplete dataSource={[]}> <AutoComplete dataSource={[]}>
<input ref={mockRef} /> <input ref={mockRef} />

View File

@ -49,7 +49,7 @@ describe('AutoComplete', () => {
}); });
it('AutoComplete throws error when contains invalid dataSource', () => { it('AutoComplete throws error when contains invalid dataSource', () => {
const spy = vi.spyOn(console, 'error').mockImplementation(() => {}); const spy = jest.spyOn(console, 'error').mockImplementation(() => {});
render( render(
// @ts-ignore // @ts-ignore
@ -82,7 +82,7 @@ describe('AutoComplete', () => {
}); });
it('should not warning when getInputElement is null', () => { it('should not warning when getInputElement is null', () => {
const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {}); const warnSpy = jest.spyOn(console, 'warn').mockImplementation(() => {});
render(<AutoComplete placeholder="input here" allowClear />); render(<AutoComplete placeholder="input here" allowClear />);
expect(warnSpy).not.toHaveBeenCalled(); expect(warnSpy).not.toHaveBeenCalled();
warnSpy.mockRestore(); warnSpy.mockRestore();
@ -100,7 +100,7 @@ describe('AutoComplete', () => {
it('deprecated dropdownClassName', () => { it('deprecated dropdownClassName', () => {
resetWarned(); resetWarned();
const errSpy = vi.spyOn(console, 'error').mockImplementation(() => {}); const errSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
const { container } = render( const { container } = render(
<AutoComplete <AutoComplete
dropdownClassName="legacy" dropdownClassName="legacy"

View File

@ -178,7 +178,7 @@ const RefAutoComplete = React.forwardRef<RefSelectProps, AutoCompleteProps>(
}; };
// We don't care debug panel // We don't care debug panel
/* c8 ignore next */ /* istanbul ignore next */
const PurePanel = genPurePanel(RefAutoComplete); const PurePanel = genPurePanel(RefAutoComplete);
RefAutoComplete.Option = Option; RefAutoComplete.Option = Option;

View File

@ -7,7 +7,7 @@ import rtlTest from '../../../tests/shared/rtlTest';
import { fireEvent, render } from '../../../tests/utils'; import { fireEvent, render } from '../../../tests/utils';
import useBreakpoint from '../../grid/hooks/useBreakpoint'; import useBreakpoint from '../../grid/hooks/useBreakpoint';
vi.mock('../../grid/hooks/useBreakpoint'); jest.mock('../../grid/hooks/useBreakpoint');
describe('Avatar Render', () => { describe('Avatar Render', () => {
mountTest(Avatar); mountTest(Avatar);
@ -122,7 +122,7 @@ describe('Avatar Render', () => {
}); });
it('should warning when pass a string as icon props', () => { it('should warning when pass a string as icon props', () => {
const warnSpy = vi.spyOn(console, 'error').mockImplementation(() => {}); const warnSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
render(<Avatar size={64} icon="aa" />); render(<Avatar size={64} icon="aa" />);
expect(warnSpy).not.toHaveBeenCalled(); expect(warnSpy).not.toHaveBeenCalled();
@ -152,7 +152,7 @@ describe('Avatar Render', () => {
}); });
it('support onMouseEnter', () => { it('support onMouseEnter', () => {
const onMouseEnter = vi.fn(); const onMouseEnter = jest.fn();
const { container } = render(<Avatar {...{ onMouseEnter }}>TestString</Avatar>); const { container } = render(<Avatar {...{ onMouseEnter }}>TestString</Avatar>);
fireEvent.mouseEnter(container.firstChild!); fireEvent.mouseEnter(container.firstChild!);
expect(onMouseEnter).toHaveBeenCalled(); expect(onMouseEnter).toHaveBeenCalled();
@ -191,7 +191,7 @@ describe('Avatar Render', () => {
}); });
it('clickable', () => { it('clickable', () => {
const onClick = vi.fn(); const onClick = jest.fn();
const { container } = render(<Avatar onClick={onClick}>TestString</Avatar>); const { container } = render(<Avatar onClick={onClick}>TestString</Avatar>);
fireEvent.click(container.querySelector('.ant-avatar-string')!); fireEvent.click(container.querySelector('.ant-avatar-string')!);
expect(onClick).toHaveBeenCalled(); expect(onClick).toHaveBeenCalled();

View File

@ -1,6 +1,6 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Avatar Render > adjusts component size to 24 when window size is xs 1`] = ` exports[`Avatar Render adjusts component size to 24 when window size is xs 1`] = `
<div> <div>
<span <span
class="ant-avatar ant-avatar-circle" class="ant-avatar ant-avatar-circle"
@ -14,7 +14,7 @@ exports[`Avatar Render > adjusts component size to 24 when window size is xs 1`]
</div> </div>
`; `;
exports[`Avatar Render > adjusts component size to 32 when window size is sm 1`] = ` exports[`Avatar Render adjusts component size to 32 when window size is sm 1`] = `
<div> <div>
<span <span
class="ant-avatar ant-avatar-circle" class="ant-avatar ant-avatar-circle"
@ -28,7 +28,7 @@ exports[`Avatar Render > adjusts component size to 32 when window size is sm 1`]
</div> </div>
`; `;
exports[`Avatar Render > adjusts component size to 40 when window size is md 1`] = ` exports[`Avatar Render adjusts component size to 40 when window size is md 1`] = `
<div> <div>
<span <span
class="ant-avatar ant-avatar-circle" class="ant-avatar ant-avatar-circle"
@ -42,7 +42,7 @@ exports[`Avatar Render > adjusts component size to 40 when window size is md 1`]
</div> </div>
`; `;
exports[`Avatar Render > adjusts component size to 64 when window size is lg 1`] = ` exports[`Avatar Render adjusts component size to 64 when window size is lg 1`] = `
<div> <div>
<span <span
class="ant-avatar ant-avatar-circle" class="ant-avatar ant-avatar-circle"
@ -56,7 +56,7 @@ exports[`Avatar Render > adjusts component size to 64 when window size is lg 1`]
</div> </div>
`; `;
exports[`Avatar Render > adjusts component size to 80 when window size is xl 1`] = ` exports[`Avatar Render adjusts component size to 80 when window size is xl 1`] = `
<div> <div>
<span <span
class="ant-avatar ant-avatar-circle" class="ant-avatar ant-avatar-circle"
@ -70,7 +70,7 @@ exports[`Avatar Render > adjusts component size to 80 when window size is xl 1`]
</div> </div>
`; `;
exports[`Avatar Render > adjusts component size to 100 when window size is xxl 1`] = ` exports[`Avatar Render adjusts component size to 100 when window size is xxl 1`] = `
<div> <div>
<span <span
class="ant-avatar ant-avatar-circle" class="ant-avatar ant-avatar-circle"
@ -84,7 +84,7 @@ exports[`Avatar Render > adjusts component size to 100 when window size is xxl 1
</div> </div>
`; `;
exports[`Avatar Render > fallback 1`] = ` exports[`Avatar Render fallback 1`] = `
<span <span
class="ant-avatar ant-avatar-circle" class="ant-avatar ant-avatar-circle"
> >
@ -97,7 +97,7 @@ exports[`Avatar Render > fallback 1`] = `
</span> </span>
`; `;
exports[`Avatar Render > rtl render > component should be rendered correctly in RTL direction 1`] = ` exports[`Avatar Render rtl render component should be rendered correctly in RTL direction 1`] = `
<span <span
class="ant-avatar ant-avatar-circle" class="ant-avatar ant-avatar-circle"
> >
@ -108,7 +108,7 @@ exports[`Avatar Render > rtl render > component should be rendered correctly in
</span> </span>
`; `;
exports[`Avatar Render > should calculate scale of avatar children correctly 1`] = ` exports[`Avatar Render should calculate scale of avatar children correctly 1`] = `
<span <span
class="ant-avatar-string" class="ant-avatar-string"
style="transform: scale(0.72) translateX(-50%);" style="transform: scale(0.72) translateX(-50%);"
@ -117,7 +117,7 @@ exports[`Avatar Render > should calculate scale of avatar children correctly 1`]
</span> </span>
`; `;
exports[`Avatar Render > should calculate scale of avatar children correctly 2`] = ` exports[`Avatar Render should calculate scale of avatar children correctly 2`] = `
<span <span
class="ant-avatar-string" class="ant-avatar-string"
style="transform: scale(0.72) translateX(-50%);" style="transform: scale(0.72) translateX(-50%);"
@ -126,7 +126,7 @@ exports[`Avatar Render > should calculate scale of avatar children correctly 2`]
</span> </span>
`; `;
exports[`Avatar Render > should calculate scale of avatar children correctly with gap 1`] = ` exports[`Avatar Render should calculate scale of avatar children correctly with gap 1`] = `
<span <span
class="ant-avatar-string" class="ant-avatar-string"
style="transform: scale(0.36) translateX(-50%);" style="transform: scale(0.36) translateX(-50%);"
@ -135,7 +135,7 @@ exports[`Avatar Render > should calculate scale of avatar children correctly wit
</span> </span>
`; `;
exports[`Avatar Render > should handle onError correctly 1`] = ` exports[`Avatar Render should handle onError correctly 1`] = `
<span <span
class="ant-avatar ant-avatar-circle ant-avatar-image" class="ant-avatar ant-avatar-circle ant-avatar-image"
> >
@ -145,7 +145,7 @@ exports[`Avatar Render > should handle onError correctly 1`] = `
</span> </span>
`; `;
exports[`Avatar Render > should show image on success after a failure state 1`] = ` exports[`Avatar Render should show image on success after a failure state 1`] = `
<span <span
class="ant-avatar ant-avatar-circle" class="ant-avatar ant-avatar-circle"
> >
@ -158,7 +158,7 @@ exports[`Avatar Render > should show image on success after a failure state 1`]
</span> </span>
`; `;
exports[`Avatar Render > should show image on success after a failure state 2`] = ` exports[`Avatar Render should show image on success after a failure state 2`] = `
<span <span
class="ant-avatar ant-avatar-circle ant-avatar-image" class="ant-avatar ant-avatar-circle ant-avatar-image"
> >
@ -168,7 +168,7 @@ exports[`Avatar Render > should show image on success after a failure state 2`]
</span> </span>
`; `;
exports[`Avatar Render > support size is number 1`] = ` exports[`Avatar Render support size is number 1`] = `
<span <span
class="ant-avatar ant-avatar-circle" class="ant-avatar ant-avatar-circle"
style="width: 100px; height: 100px; line-height: 100px; font-size: 18px;" style="width: 100px; height: 100px; line-height: 100px; font-size: 18px;"

View File

@ -1,4 +1,4 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders components/avatar/demo/badge.tsx extend context correctly 1`] = ` exports[`renders components/avatar/demo/badge.tsx extend context correctly 1`] = `
<div <div

View File

@ -1,4 +1,4 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders components/avatar/demo/badge.tsx correctly 1`] = ` exports[`renders components/avatar/demo/badge.tsx correctly 1`] = `
<div <div

View File

@ -1,4 +1,4 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders components/back-top/demo/basic.tsx extend context correctly 1`] = ` exports[`renders components/back-top/demo/basic.tsx extend context correctly 1`] = `
Array [ Array [

View File

@ -1,4 +1,4 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders components/back-top/demo/basic.tsx correctly 1`] = ` exports[`renders components/back-top/demo/basic.tsx correctly 1`] = `
Array [ Array [

View File

@ -1,6 +1,6 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`BackTop > rtl render > component should be rendered correctly in RTL direction 1`] = ` exports[`BackTop rtl render component should be rendered correctly in RTL direction 1`] = `
<div <div
class="ant-back-top ant-back-top-rtl" class="ant-back-top ant-back-top-rtl"
/> />

View File

@ -6,17 +6,17 @@ import { fireEvent, render, waitFakeTimer } from '../../../tests/utils';
describe('BackTop', () => { describe('BackTop', () => {
beforeEach(() => { beforeEach(() => {
vi.useFakeTimers(); jest.useFakeTimers();
}); });
afterEach(() => { afterEach(() => {
vi.useRealTimers(); jest.useRealTimers();
}); });
mountTest(BackTop); mountTest(BackTop);
rtlTest(BackTop); rtlTest(BackTop);
it('should scroll to top after click it', async () => { it('should scroll to top after click it', async () => {
const { container } = render(<BackTop />); const { container } = render(<BackTop />);
const scrollToSpy = vi.spyOn(window, 'scrollTo').mockImplementation((_, y) => { const scrollToSpy = jest.spyOn(window, 'scrollTo').mockImplementation((_, y) => {
window.scrollY = y; window.scrollY = y;
window.pageYOffset = y; window.pageYOffset = y;
document.documentElement.scrollTop = y; document.documentElement.scrollTop = y;
@ -31,20 +31,20 @@ describe('BackTop', () => {
}); });
it('support onClick', () => { it('support onClick', () => {
const onClick = vi.fn(); const onClick = jest.fn();
const { container } = render(<BackTop onClick={onClick} visibilityHeight={0} />); const { container } = render(<BackTop onClick={onClick} visibilityHeight={0} />);
fireEvent.click(container.querySelector<HTMLDivElement>('.ant-back-top')!); fireEvent.click(container.querySelector<HTMLDivElement>('.ant-back-top')!);
expect(onClick).toHaveBeenCalled(); expect(onClick).toHaveBeenCalled();
}); });
it('invalid target', () => { it('invalid target', () => {
const onClick = vi.fn(); const onClick = jest.fn();
const { container } = render(<BackTop onClick={onClick} target={undefined} />); const { container } = render(<BackTop onClick={onClick} target={undefined} />);
fireEvent.click(container.querySelector<HTMLDivElement>('.ant-back-top')!); fireEvent.click(container.querySelector<HTMLDivElement>('.ant-back-top')!);
expect(onClick).toHaveBeenCalled(); expect(onClick).toHaveBeenCalled();
}); });
it('should console Error', () => { it('should console Error', () => {
const errSpy = vi.spyOn(console, 'error').mockImplementation(() => {}); const errSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
render(<BackTop />); render(<BackTop />);
expect(errSpy).toHaveBeenCalledWith( expect(errSpy).toHaveBeenCalledWith(
'Warning: [antd: BackTop] `BackTop` is deprecated, please use `FloatButton.BackTop` instead.', 'Warning: [antd: BackTop] `BackTop` is deprecated, please use `FloatButton.BackTop` instead.',

View File

@ -1,4 +1,4 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders components/badge/demo/basic.tsx extend context correctly 1`] = ` exports[`renders components/badge/demo/basic.tsx extend context correctly 1`] = `
<div <div

View File

@ -1,4 +1,4 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders components/badge/demo/basic.tsx correctly 1`] = ` exports[`renders components/badge/demo/basic.tsx correctly 1`] = `
<div <div

View File

@ -1,6 +1,6 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Badge > render Badge status/color when contains children 1`] = ` exports[`Badge render Badge status/color when contains children 1`] = `
<div> <div>
<span <span
class="ant-badge" class="ant-badge"
@ -69,7 +69,7 @@ exports[`Badge > render Badge status/color when contains children 1`] = `
</div> </div>
`; `;
exports[`Badge > render correct with negative number 1`] = ` exports[`Badge render correct with negative number 1`] = `
<div> <div>
<span <span
class="ant-badge ant-badge-not-a-wrapper" class="ant-badge ant-badge-not-a-wrapper"
@ -154,13 +154,13 @@ exports[`Badge > render correct with negative number 1`] = `
</div> </div>
`; `;
exports[`Badge > rtl render > component should be rendered correctly in RTL direction 1`] = ` exports[`Badge rtl render component should be rendered correctly in RTL direction 1`] = `
<span <span
class="ant-badge ant-badge-not-a-wrapper ant-badge-rtl" class="ant-badge ant-badge-not-a-wrapper ant-badge-rtl"
/> />
`; `;
exports[`Badge > rtl render > component should be rendered correctly in RTL direction 2`] = ` exports[`Badge rtl render component should be rendered correctly in RTL direction 2`] = `
<span <span
class="ant-badge ant-badge-rtl" class="ant-badge ant-badge-rtl"
> >
@ -190,7 +190,7 @@ exports[`Badge > rtl render > component should be rendered correctly in RTL dire
</span> </span>
`; `;
exports[`Badge > should be compatible with borderColor style 1`] = ` exports[`Badge should be compatible with borderColor style 1`] = `
<span <span
class="ant-badge ant-badge-not-a-wrapper" class="ant-badge ant-badge-not-a-wrapper"
> >
@ -214,7 +214,7 @@ exports[`Badge > should be compatible with borderColor style 1`] = `
</span> </span>
`; `;
exports[`Badge > should display custom color and number is 0 1`] = ` exports[`Badge should display custom color and number is 0 1`] = `
<div> <div>
<span <span
class="ant-badge ant-badge-not-a-wrapper" class="ant-badge ant-badge-not-a-wrapper"
@ -265,7 +265,7 @@ exports[`Badge > should display custom color and number is 0 1`] = `
</div> </div>
`; `;
exports[`Badge > should render when count is changed 1`] = ` exports[`Badge should render when count is changed 1`] = `
<span <span
class="ant-badge ant-badge-not-a-wrapper" class="ant-badge ant-badge-not-a-wrapper"
> >
@ -358,7 +358,7 @@ exports[`Badge > should render when count is changed 1`] = `
</span> </span>
`; `;
exports[`Badge > should render when count is changed 2`] = ` exports[`Badge should render when count is changed 2`] = `
<span <span
class="ant-badge ant-badge-not-a-wrapper" class="ant-badge ant-badge-not-a-wrapper"
> >
@ -451,7 +451,7 @@ exports[`Badge > should render when count is changed 2`] = `
</span> </span>
`; `;
exports[`Badge > should render when count is changed 3`] = ` exports[`Badge should render when count is changed 3`] = `
<span <span
class="ant-badge ant-badge-not-a-wrapper" class="ant-badge ant-badge-not-a-wrapper"
> >
@ -485,7 +485,7 @@ exports[`Badge > should render when count is changed 3`] = `
</span> </span>
`; `;
exports[`Badge > should render when count is changed 4`] = ` exports[`Badge should render when count is changed 4`] = `
<span <span
class="ant-badge ant-badge-not-a-wrapper" class="ant-badge ant-badge-not-a-wrapper"
> >
@ -499,7 +499,7 @@ exports[`Badge > should render when count is changed 4`] = `
</span> </span>
`; `;
exports[`Badge > should render when count is changed 5`] = ` exports[`Badge should render when count is changed 5`] = `
<span <span
class="ant-badge ant-badge-not-a-wrapper" class="ant-badge ant-badge-not-a-wrapper"
> >
@ -532,7 +532,7 @@ exports[`Badge > should render when count is changed 5`] = `
</span> </span>
`; `;
exports[`Badge > should render when count is changed 6`] = ` exports[`Badge should render when count is changed 6`] = `
<span <span
class="ant-badge ant-badge-not-a-wrapper" class="ant-badge ant-badge-not-a-wrapper"
> >
@ -615,7 +615,7 @@ exports[`Badge > should render when count is changed 6`] = `
</span> </span>
`; `;
exports[`Badge > should support offset when count is a ReactNode 1`] = ` exports[`Badge should support offset when count is a ReactNode 1`] = `
<span <span
class="ant-badge" class="ant-badge"
> >

View File

@ -1,6 +1,6 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Ribbon > rtl render > component should be rendered correctly in RTL direction 1`] = ` exports[`Ribbon rtl render component should be rendered correctly in RTL direction 1`] = `
<div <div
class="ant-ribbon-wrapper" class="ant-ribbon-wrapper"
> >

View File

@ -18,15 +18,15 @@ describe('Badge', () => {
)); ));
beforeEach(() => { beforeEach(() => {
vi.useFakeTimers(); jest.useFakeTimers();
}); });
afterEach(() => { afterEach(() => {
vi.useRealTimers(); jest.useRealTimers();
}); });
it('no strict warning', () => { it('no strict warning', () => {
const errSpy = vi.spyOn(console, 'error').mockImplementation(() => {}); const errSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
const { rerender } = render( const { rerender } = render(
<Badge dot> <Badge dot>
<span /> <span />
@ -83,7 +83,7 @@ describe('Badge', () => {
act(() => { act(() => {
fireEvent.mouseEnter(container.querySelector('.ant-badge')!); fireEvent.mouseEnter(container.querySelector('.ant-badge')!);
vi.runAllTimers(); jest.runAllTimers();
}); });
expect(container.querySelector('.ant-tooltip-open')).toBeTruthy(); expect(container.querySelector('.ant-tooltip-open')).toBeTruthy();
}); });
@ -95,7 +95,7 @@ describe('Badge', () => {
rerender(<Badge count={count} />); rerender(<Badge count={count} />);
act(() => { act(() => {
vi.runAllTimers(); jest.runAllTimers();
expect(asFragment().firstChild).toMatchSnapshot(); expect(asFragment().firstChild).toMatchSnapshot();
}); });
} }

View File

@ -12,7 +12,7 @@ describe('Breadcrumb', () => {
rtlTest(Breadcrumb); rtlTest(Breadcrumb);
accessibilityTest(Breadcrumb); accessibilityTest(Breadcrumb);
const errorSpy = vi.spyOn(console, 'error').mockImplementation(() => {}); const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
afterEach(() => { afterEach(() => {
errorSpy.mockReset(); errorSpy.mockReset();
@ -326,7 +326,7 @@ describe('Breadcrumb', () => {
it('should console Error when `overlay` in props', () => { it('should console Error when `overlay` in props', () => {
resetWarned(); resetWarned();
const errSpy = vi.spyOn(console, 'error').mockImplementation(() => {}); const errSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
render( render(
<Breadcrumb> <Breadcrumb>
<Breadcrumb.Item overlay={<div>test</div>} /> <Breadcrumb.Item overlay={<div>test</div>} />
@ -339,14 +339,14 @@ describe('Breadcrumb', () => {
}); });
it('should not console Error when `overlay` not in props', () => { it('should not console Error when `overlay` not in props', () => {
const errSpy = vi.spyOn(console, 'error').mockImplementation(() => {}); const errSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
render(<Breadcrumb items={[{ path: '/', title: 'Test' }]} />); render(<Breadcrumb items={[{ path: '/', title: 'Test' }]} />);
expect(errSpy).not.toHaveBeenCalled(); expect(errSpy).not.toHaveBeenCalled();
errSpy.mockRestore(); errSpy.mockRestore();
}); });
it('should use `onClick`', async () => { it('should use `onClick`', async () => {
const onClick = vi.fn(); const onClick = jest.fn();
const wrapper = render(<Breadcrumb items={[{ title: 'test', onClick }]} />); const wrapper = render(<Breadcrumb items={[{ title: 'test', onClick }]} />);
const item = await wrapper.findByText('test'); const item = await wrapper.findByText('test');
item.click(); item.click();

View File

@ -1,6 +1,6 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Breadcrumb > filter React.Fragment 1`] = ` exports[`Breadcrumb filter React.Fragment 1`] = `
<nav <nav
class="ant-breadcrumb" class="ant-breadcrumb"
> >
@ -36,7 +36,7 @@ exports[`Breadcrumb > filter React.Fragment 1`] = `
</nav> </nav>
`; `;
exports[`Breadcrumb > rtl render > component should be rendered correctly in RTL direction 1`] = ` exports[`Breadcrumb rtl render component should be rendered correctly in RTL direction 1`] = `
<nav <nav
class="ant-breadcrumb ant-breadcrumb-rtl" class="ant-breadcrumb ant-breadcrumb-rtl"
> >
@ -44,7 +44,7 @@ exports[`Breadcrumb > rtl render > component should be rendered correctly in RTL
</nav> </nav>
`; `;
exports[`Breadcrumb > should accept undefined items 1`] = ` exports[`Breadcrumb should accept undefined items 1`] = `
<nav <nav
class="ant-breadcrumb" class="ant-breadcrumb"
> >
@ -52,7 +52,7 @@ exports[`Breadcrumb > should accept undefined items 1`] = `
</nav> </nav>
`; `;
exports[`Breadcrumb > should allow Breadcrumb.Item is null or undefined 1`] = ` exports[`Breadcrumb should allow Breadcrumb.Item is null or undefined 1`] = `
<nav <nav
class="ant-breadcrumb" class="ant-breadcrumb"
> >
@ -68,7 +68,7 @@ exports[`Breadcrumb > should allow Breadcrumb.Item is null or undefined 1`] = `
</nav> </nav>
`; `;
exports[`Breadcrumb > should not display Breadcrumb Item when its children is falsy 1`] = ` exports[`Breadcrumb should not display Breadcrumb Item when its children is falsy 1`] = `
<nav <nav
class="ant-breadcrumb" class="ant-breadcrumb"
> >
@ -97,7 +97,7 @@ exports[`Breadcrumb > should not display Breadcrumb Item when its children is fa
</nav> </nav>
`; `;
exports[`Breadcrumb > should render a menu 1`] = ` exports[`Breadcrumb should render a menu 1`] = `
<nav <nav
class="ant-breadcrumb" class="ant-breadcrumb"
> >
@ -177,7 +177,7 @@ exports[`Breadcrumb > should render a menu 1`] = `
</nav> </nav>
`; `;
exports[`Breadcrumb > should render correct 1`] = ` exports[`Breadcrumb should render correct 1`] = `
<nav <nav
class="ant-breadcrumb" class="ant-breadcrumb"
> >
@ -209,7 +209,7 @@ exports[`Breadcrumb > should render correct 1`] = `
</nav> </nav>
`; `;
exports[`Breadcrumb > should support Breadcrumb.Item default separator 1`] = ` exports[`Breadcrumb should support Breadcrumb.Item default separator 1`] = `
<nav <nav
class="ant-breadcrumb" class="ant-breadcrumb"
> >
@ -253,7 +253,7 @@ exports[`Breadcrumb > should support Breadcrumb.Item default separator 1`] = `
</nav> </nav>
`; `;
exports[`Breadcrumb > should support React.Fragment and falsy children 1`] = ` exports[`Breadcrumb should support React.Fragment and falsy children 1`] = `
<nav <nav
class="ant-breadcrumb" class="ant-breadcrumb"
> >
@ -302,7 +302,7 @@ exports[`Breadcrumb > should support React.Fragment and falsy children 1`] = `
</nav> </nav>
`; `;
exports[`Breadcrumb > should support custom attribute 1`] = ` exports[`Breadcrumb should support custom attribute 1`] = `
<nav <nav
class="ant-breadcrumb" class="ant-breadcrumb"
data-custom="custom" data-custom="custom"
@ -333,7 +333,7 @@ exports[`Breadcrumb > should support custom attribute 1`] = `
</nav> </nav>
`; `;
exports[`Breadcrumb > should support string \`0\` and number \`0\` 1`] = ` exports[`Breadcrumb should support string \`0\` and number \`0\` 1`] = `
<nav <nav
class="ant-breadcrumb" class="ant-breadcrumb"
> >

View File

@ -1,4 +1,4 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders components/breadcrumb/demo/basic.tsx extend context correctly 1`] = ` exports[`renders components/breadcrumb/demo/basic.tsx extend context correctly 1`] = `
<nav <nav

View File

@ -1,4 +1,4 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders components/breadcrumb/demo/basic.tsx correctly 1`] = ` exports[`renders components/breadcrumb/demo/basic.tsx correctly 1`] = `
<nav <nav

View File

@ -1,6 +1,6 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Breadcrumb.ItemRender > render as expect 1`] = ` exports[`Breadcrumb.ItemRender render as expect 1`] = `
<div> <div>
<nav <nav
class="ant-breadcrumb" class="ant-breadcrumb"

View File

@ -1,6 +1,6 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`react router > react router 3 1`] = ` exports[`react router react router 3 1`] = `
<nav <nav
class="ant-breadcrumb" class="ant-breadcrumb"
> >

View File

@ -25,11 +25,11 @@ const breadcrumbNameMap = {
describe('react router', () => { describe('react router', () => {
beforeAll(() => { beforeAll(() => {
vi.useFakeTimers(); jest.useFakeTimers();
}); });
afterAll(() => { afterAll(() => {
vi.useRealTimers(); jest.useRealTimers();
}); });
it('react router 6', () => { it('react router 6', () => {

View File

@ -1,4 +1,4 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders components/button/demo/basic.tsx extend context correctly 1`] = ` exports[`renders components/button/demo/basic.tsx extend context correctly 1`] = `
<div <div

View File

@ -1,4 +1,4 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders components/button/demo/basic.tsx correctly 1`] = ` exports[`renders components/button/demo/basic.tsx correctly 1`] = `
<div <div

View File

@ -1,6 +1,6 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Button > fixbug renders {0} , 0 and {false} 1`] = ` exports[`Button fixbug renders {0} , 0 and {false} 1`] = `
<button <button
class="ant-btn ant-btn-default" class="ant-btn ant-btn-default"
type="button" type="button"
@ -9,7 +9,7 @@ exports[`Button > fixbug renders {0} , 0 and {false} 1`] = `
</button> </button>
`; `;
exports[`Button > fixbug renders {0} , 0 and {false} 2`] = ` exports[`Button fixbug renders {0} , 0 and {false} 2`] = `
<button <button
class="ant-btn ant-btn-default" class="ant-btn ant-btn-default"
type="button" type="button"
@ -20,14 +20,14 @@ exports[`Button > fixbug renders {0} , 0 and {false} 2`] = `
</button> </button>
`; `;
exports[`Button > fixbug renders {0} , 0 and {false} 3`] = ` exports[`Button fixbug renders {0} , 0 and {false} 3`] = `
<button <button
class="ant-btn ant-btn-default" class="ant-btn ant-btn-default"
type="button" type="button"
/> />
`; `;
exports[`Button > renders Chinese characters correctly 1`] = ` exports[`Button renders Chinese characters correctly 1`] = `
<button <button
class="ant-btn ant-btn-default" class="ant-btn ant-btn-default"
type="button" type="button"
@ -38,7 +38,7 @@ exports[`Button > renders Chinese characters correctly 1`] = `
</button> </button>
`; `;
exports[`Button > renders Chinese characters correctly 2`] = ` exports[`Button renders Chinese characters correctly 2`] = `
<button <button
class="ant-btn ant-btn-default" class="ant-btn ant-btn-default"
type="button" type="button"
@ -72,7 +72,7 @@ exports[`Button > renders Chinese characters correctly 2`] = `
</button> </button>
`; `;
exports[`Button > renders Chinese characters correctly 3`] = ` exports[`Button renders Chinese characters correctly 3`] = `
<button <button
class="ant-btn ant-btn-default" class="ant-btn ant-btn-default"
type="button" type="button"
@ -102,7 +102,7 @@ exports[`Button > renders Chinese characters correctly 3`] = `
</button> </button>
`; `;
exports[`Button > renders Chinese characters correctly 4`] = ` exports[`Button renders Chinese characters correctly 4`] = `
<button <button
class="ant-btn ant-btn-default" class="ant-btn ant-btn-default"
type="button" type="button"
@ -136,7 +136,7 @@ exports[`Button > renders Chinese characters correctly 4`] = `
</button> </button>
`; `;
exports[`Button > renders Chinese characters correctly 5`] = ` exports[`Button renders Chinese characters correctly 5`] = `
<button <button
class="ant-btn ant-btn-default ant-btn-loading" class="ant-btn ant-btn-default ant-btn-loading"
type="button" type="button"
@ -170,7 +170,7 @@ exports[`Button > renders Chinese characters correctly 5`] = `
</button> </button>
`; `;
exports[`Button > renders Chinese characters correctly 6`] = ` exports[`Button renders Chinese characters correctly 6`] = `
<button <button
class="ant-btn ant-btn-default ant-btn-loading" class="ant-btn ant-btn-default ant-btn-loading"
type="button" type="button"
@ -205,7 +205,7 @@ exports[`Button > renders Chinese characters correctly 6`] = `
</button> </button>
`; `;
exports[`Button > renders Chinese characters correctly 7`] = ` exports[`Button renders Chinese characters correctly 7`] = `
<button <button
class="ant-btn ant-btn-default" class="ant-btn ant-btn-default"
type="button" type="button"
@ -216,7 +216,7 @@ exports[`Button > renders Chinese characters correctly 7`] = `
</button> </button>
`; `;
exports[`Button > renders correctly 1`] = ` exports[`Button renders correctly 1`] = `
<button <button
class="ant-btn ant-btn-default" class="ant-btn ant-btn-default"
type="button" type="button"
@ -227,52 +227,52 @@ exports[`Button > renders correctly 1`] = `
</button> </button>
`; `;
exports[`Button > rtl render > component should be rendered correctly in RTL direction 1`] = ` exports[`Button rtl render component should be rendered correctly in RTL direction 1`] = `
<button <button
class="ant-btn ant-btn-default ant-btn-rtl" class="ant-btn ant-btn-default ant-btn-rtl"
type="button" type="button"
/> />
`; `;
exports[`Button > rtl render > component should be rendered correctly in RTL direction 2`] = ` exports[`Button rtl render component should be rendered correctly in RTL direction 2`] = `
<button <button
class="ant-btn ant-btn-default ant-btn-lg ant-btn-rtl" class="ant-btn ant-btn-default ant-btn-lg ant-btn-rtl"
type="button" type="button"
/> />
`; `;
exports[`Button > rtl render > component should be rendered correctly in RTL direction 3`] = ` exports[`Button rtl render component should be rendered correctly in RTL direction 3`] = `
<button <button
class="ant-btn ant-btn-default ant-btn-sm ant-btn-rtl" class="ant-btn ant-btn-default ant-btn-sm ant-btn-rtl"
type="button" type="button"
/> />
`; `;
exports[`Button > rtl render > component should be rendered correctly in RTL direction 4`] = ` exports[`Button rtl render component should be rendered correctly in RTL direction 4`] = `
<div <div
class="ant-btn-group ant-btn-group-rtl" class="ant-btn-group ant-btn-group-rtl"
/> />
`; `;
exports[`Button > rtl render > component should be rendered correctly in RTL direction 5`] = ` exports[`Button rtl render component should be rendered correctly in RTL direction 5`] = `
<div <div
class="ant-btn-group ant-btn-group-lg ant-btn-group-rtl" class="ant-btn-group ant-btn-group-lg ant-btn-group-rtl"
/> />
`; `;
exports[`Button > rtl render > component should be rendered correctly in RTL direction 6`] = ` exports[`Button rtl render component should be rendered correctly in RTL direction 6`] = `
<div <div
class="ant-btn-group ant-btn-group-sm ant-btn-group-rtl" class="ant-btn-group ant-btn-group-sm ant-btn-group-rtl"
/> />
`; `;
exports[`Button > rtl render > component should be rendered correctly in RTL direction 7`] = ` exports[`Button rtl render component should be rendered correctly in RTL direction 7`] = `
<div <div
class="ant-btn-group ant-btn-group-rtl" class="ant-btn-group ant-btn-group-rtl"
/> />
`; `;
exports[`Button > should handle fragment as children 1`] = ` exports[`Button should handle fragment as children 1`] = `
<button <button
class="ant-btn ant-btn-default" class="ant-btn ant-btn-default"
type="button" type="button"
@ -283,7 +283,7 @@ exports[`Button > should handle fragment as children 1`] = `
</button> </button>
`; `;
exports[`Button > should merge text if children using variable 1`] = ` exports[`Button should merge text if children using variable 1`] = `
<button <button
class="ant-btn ant-btn-default" class="ant-btn ant-btn-default"
type="button" type="button"
@ -294,7 +294,7 @@ exports[`Button > should merge text if children using variable 1`] = `
</button> </button>
`; `;
exports[`Button > should not render as link button when href is undefined 1`] = ` exports[`Button should not render as link button when href is undefined 1`] = `
<button <button
class="ant-btn ant-btn-primary" class="ant-btn ant-btn-primary"
type="button" type="button"
@ -305,14 +305,14 @@ exports[`Button > should not render as link button when href is undefined 1`] =
</button> </button>
`; `;
exports[`Button > should render empty button without errors 1`] = ` exports[`Button should render empty button without errors 1`] = `
<button <button
class="ant-btn ant-btn-default" class="ant-btn ant-btn-default"
type="button" type="button"
/> />
`; `;
exports[`Button > should support custom icon className 1`] = ` exports[`Button should support custom icon className 1`] = `
<div> <div>
<button <button
class="ant-btn ant-btn-primary ant-btn-icon-only" class="ant-btn ant-btn-primary ant-btn-icon-only"
@ -345,7 +345,7 @@ exports[`Button > should support custom icon className 1`] = `
</div> </div>
`; `;
exports[`Button > should support custom icon styles 1`] = ` exports[`Button should support custom icon styles 1`] = `
<div> <div>
<button <button
class="ant-btn ant-btn-primary ant-btn-icon-only" class="ant-btn ant-btn-primary ant-btn-icon-only"
@ -379,7 +379,7 @@ exports[`Button > should support custom icon styles 1`] = `
</div> </div>
`; `;
exports[`Button > should support link button 1`] = ` exports[`Button should support link button 1`] = `
<a <a
class="ant-btn ant-btn-default" class="ant-btn ant-btn-default"
href="https://ant.design" href="https://ant.design"

View File

@ -30,16 +30,16 @@ const Content = () => {
it('Delay loading timer in Button component', () => { it('Delay loading timer in Button component', () => {
const otherTimer = 9528; const otherTimer = 9528;
vi.spyOn<Window, 'setTimeout'>(window, 'setTimeout').mockReturnValue(otherTimer); jest.spyOn<Window, 'setTimeout'>(window, 'setTimeout').mockReturnValue(otherTimer);
vi.restoreAllMocks(); jest.restoreAllMocks();
const wrapper = render(<Content />); const wrapper = render(<Content />);
const btnTimer = 9527; const btnTimer = 9527;
const setTimeoutMock = vi const setTimeoutMock = jest
.spyOn<Window, 'setTimeout'>(window, 'setTimeout') .spyOn<Window, 'setTimeout'>(window, 'setTimeout')
.mockReturnValue(btnTimer); .mockReturnValue(btnTimer);
const clearTimeoutMock = vi.spyOn<Window, 'clearTimeout'>(window, 'clearTimeout'); const clearTimeoutMock = jest.spyOn<Window, 'clearTimeout'>(window, 'clearTimeout');
// other component may call setTimeout or clearTimeout // other component may call setTimeout or clearTimeout
const setTimeoutCount = () => { const setTimeoutCount = () => {
@ -89,7 +89,7 @@ it('Delay loading timer in Button component', () => {
expect(setTimeoutCount()).toBe(3); expect(setTimeoutCount()).toBe(3);
expect(clearTimeoutCount()).toBe(2); expect(clearTimeoutCount()).toBe(2);
vi.restoreAllMocks(); jest.restoreAllMocks();
}); });
it('Delay loading while use loading delay at first time', () => { it('Delay loading while use loading delay at first time', () => {
const Demo = () => <Button loading={{ delay: specialDelay }} />; const Demo = () => <Button loading={{ delay: specialDelay }} />;

View File

@ -37,7 +37,7 @@ describe('Button', () => {
it('warns if size is wrong', () => { it('warns if size is wrong', () => {
resetWarned(); resetWarned();
const mockWarn = vi.spyOn(console, 'error').mockImplementation(() => {}); const mockWarn = jest.spyOn(console, 'error').mockImplementation(() => {});
const size = 'who am I'; const size = 'who am I';
// @ts-expect-error: Type '"who am I"' is not assignable to type 'SizeType'.ts(2322) // @ts-expect-error: Type '"who am I"' is not assignable to type 'SizeType'.ts(2322)
render(<Button.Group size={size} />); render(<Button.Group size={size} />);
@ -177,22 +177,22 @@ describe('Button', () => {
}); });
it('reset when loading back of delay', () => { it('reset when loading back of delay', () => {
vi.useFakeTimers(); jest.useFakeTimers();
const { rerender, container } = render(<Button loading={{ delay: 1000 }} />); const { rerender, container } = render(<Button loading={{ delay: 1000 }} />);
rerender(<Button loading={{ delay: 2000 }} />); rerender(<Button loading={{ delay: 2000 }} />);
rerender(<Button loading={false} />); rerender(<Button loading={false} />);
act(() => { act(() => {
vi.runAllTimers(); jest.runAllTimers();
}); });
expect(container.querySelectorAll('.ant-btn-loading')).toHaveLength(0); expect(container.querySelectorAll('.ant-btn-loading')).toHaveLength(0);
vi.useRealTimers(); jest.useRealTimers();
}); });
it('should not clickable when button is loading', () => { it('should not clickable when button is loading', () => {
const onClick = vi.fn(); const onClick = jest.fn();
const { container } = render( const { container } = render(
<Button loading onClick={onClick}> <Button loading onClick={onClick}>
button button
@ -238,7 +238,7 @@ describe('Button', () => {
}); });
it('should support to change loading', async () => { it('should support to change loading', async () => {
vi.useFakeTimers(); jest.useFakeTimers();
const { container, rerender, unmount } = render(<Button>Button</Button>); const { container, rerender, unmount } = render(<Button>Button</Button>);
rerender(<Button loading />); rerender(<Button loading />);
expect(container.querySelectorAll('.ant-btn-loading').length).toBe(1); expect(container.querySelectorAll('.ant-btn-loading').length).toBe(1);
@ -252,12 +252,12 @@ describe('Button', () => {
await waitFakeTimer(); await waitFakeTimer();
expect(container.querySelectorAll('.ant-btn-loading').length).toBe(0); expect(container.querySelectorAll('.ant-btn-loading').length).toBe(0);
expect(unmount).not.toThrow(); expect(unmount).not.toThrow();
vi.useRealTimers(); jest.useRealTimers();
}); });
it('should warning when pass a string as icon props', () => { it('should warning when pass a string as icon props', () => {
resetWarned(); resetWarned();
const warnSpy = vi.spyOn(console, 'error').mockImplementation(() => {}); const warnSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
render(<Button type="primary" icon="ab" />); render(<Button type="primary" icon="ab" />);
expect(warnSpy).not.toHaveBeenCalled(); expect(warnSpy).not.toHaveBeenCalled();
@ -272,7 +272,7 @@ describe('Button', () => {
it('should warning when pass type=link and ghost=true', () => { it('should warning when pass type=link and ghost=true', () => {
resetWarned(); resetWarned();
const warnSpy = vi.spyOn(console, 'error').mockImplementation(() => {}); const warnSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
render(<Button type="link" ghost />); render(<Button type="link" ghost />);
expect(warnSpy).toHaveBeenCalledWith( expect(warnSpy).toHaveBeenCalledWith(
"Warning: [antd: Button] `link` or `text` button can't be a `ghost` button.", "Warning: [antd: Button] `link` or `text` button can't be a `ghost` button.",
@ -282,7 +282,7 @@ describe('Button', () => {
it('should warning when pass type=text and ghost=true', () => { it('should warning when pass type=text and ghost=true', () => {
resetWarned(); resetWarned();
const warnSpy = vi.spyOn(console, 'error').mockImplementation(() => {}); const warnSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
render(<Button type="text" ghost />); render(<Button type="text" ghost />);
expect(warnSpy).toHaveBeenCalledWith( expect(warnSpy).toHaveBeenCalledWith(
"Warning: [antd: Button] `link` or `text` button can't be a `ghost` button.", "Warning: [antd: Button] `link` or `text` button can't be a `ghost` button.",
@ -305,7 +305,7 @@ describe('Button', () => {
}); });
it('should not redirect when button is disabled', () => { it('should not redirect when button is disabled', () => {
const onClick = vi.fn(); const onClick = jest.fn();
const { container } = render( const { container } = render(
<Button href="https://ant.design" onClick={onClick} disabled> <Button href="https://ant.design" onClick={onClick} disabled>
click me click me

View File

@ -3,26 +3,28 @@ import React from 'react';
import Button from '..'; import Button from '..';
import { act, fireEvent, render } from '../../../tests/utils'; import { act, fireEvent, render } from '../../../tests/utils';
vi.mock('rc-util/es/Dom/isVisible', () => ({ default: () => true })); jest.mock('rc-util/lib/Dom/isVisible', () => {
const mockFn = () => true;
return mockFn;
});
describe('click wave effect', () => { describe('click wave effect', () => {
beforeEach(() => { beforeEach(() => {
vi.useFakeTimers(); jest.useFakeTimers();
}); });
afterEach(async () => { afterEach(() => {
await vi.runAllTimersAsync(); jest.clearAllTimers();
vi.clearAllTimers(); jest.useRealTimers();
vi.useRealTimers();
document.body.innerHTML = ''; document.body.innerHTML = '';
}); });
async function clickButton(container: HTMLElement) { async function clickButton(container: HTMLElement) {
const element = container.firstChild; const element = container.firstChild;
// https://github.com/testing-library/user-event/issues/833 // https://github.com/testing-library/user-event/issues/833
await userEvent.setup({ advanceTimers: vi.advanceTimersByTime }).click(element as Element); await userEvent.setup({ advanceTimers: jest.advanceTimersByTime }).click(element as Element);
act(() => { act(() => {
vi.advanceTimersByTime(100); jest.advanceTimersByTime(100);
}); });
fireEvent(element!, new Event('transitionstart')); fireEvent(element!, new Event('transitionstart'));

View File

@ -1,4 +1,4 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders components/calendar/demo/basic.tsx extend context correctly 1`] = ` exports[`renders components/calendar/demo/basic.tsx extend context correctly 1`] = `
<div <div
@ -74,7 +74,7 @@ exports[`renders components/calendar/demo/basic.tsx extend context correctly 1`]
> >
<div <div
class="rc-virtual-list-holder" class="rc-virtual-list-holder"
style="max-height: 256px; overflow-y: auto; overflow-anchor: none;" style="max-height: 256px; overflow-y: auto;"
> >
<div> <div>
<div <div
@ -521,7 +521,7 @@ exports[`renders components/calendar/demo/basic.tsx extend context correctly 1`]
> >
<div <div
class="rc-virtual-list-holder" class="rc-virtual-list-holder"
style="max-height: 256px; overflow-y: auto; overflow-anchor: none;" style="max-height: 256px; overflow-y: auto;"
> >
<div> <div>
<div <div
@ -1659,7 +1659,7 @@ exports[`renders components/calendar/demo/card.tsx extend context correctly 1`]
> >
<div <div
class="rc-virtual-list-holder" class="rc-virtual-list-holder"
style="max-height: 256px; overflow-y: auto; overflow-anchor: none;" style="max-height: 256px; overflow-y: auto;"
> >
<div> <div>
<div <div
@ -2106,7 +2106,7 @@ exports[`renders components/calendar/demo/card.tsx extend context correctly 1`]
> >
<div <div
class="rc-virtual-list-holder" class="rc-virtual-list-holder"
style="max-height: 256px; overflow-y: auto; overflow-anchor: none;" style="max-height: 256px; overflow-y: auto;"
> >
<div> <div>
<div <div
@ -3243,7 +3243,7 @@ Array [
> >
<div <div
class="rc-virtual-list-holder" class="rc-virtual-list-holder"
style="max-height: 256px; overflow-y: auto; overflow-anchor: none;" style="max-height: 256px; overflow-y: auto;"
> >
<div> <div>
<div <div
@ -3690,7 +3690,7 @@ Array [
> >
<div <div
class="rc-virtual-list-holder" class="rc-virtual-list-holder"
style="max-height: 256px; overflow-y: auto; overflow-anchor: none;" style="max-height: 256px; overflow-y: auto;"
> >
<div> <div>
<div <div
@ -4823,7 +4823,7 @@ Array [
> >
<div <div
class="rc-virtual-list-holder" class="rc-virtual-list-holder"
style="max-height: 256px; overflow-y: auto; overflow-anchor: none;" style="max-height: 256px; overflow-y: auto;"
> >
<div> <div>
<div <div
@ -5270,7 +5270,7 @@ Array [
> >
<div <div
class="rc-virtual-list-holder" class="rc-virtual-list-holder"
style="max-height: 256px; overflow-y: auto; overflow-anchor: none;" style="max-height: 256px; overflow-y: auto;"
> >
<div> <div>
<div <div
@ -6448,7 +6448,7 @@ exports[`renders components/calendar/demo/customize-header.tsx extend context co
> >
<div <div
class="rc-virtual-list-holder" class="rc-virtual-list-holder"
style="max-height: 256px; overflow-y: auto; overflow-anchor: none;" style="max-height: 256px; overflow-y: auto;"
> >
<div> <div>
<div <div
@ -6920,7 +6920,7 @@ exports[`renders components/calendar/demo/customize-header.tsx extend context co
> >
<div <div
class="rc-virtual-list-holder" class="rc-virtual-list-holder"
style="max-height: 256px; overflow-y: auto; overflow-anchor: none;" style="max-height: 256px; overflow-y: auto;"
> >
<div> <div>
<div <div
@ -8041,7 +8041,7 @@ exports[`renders components/calendar/demo/notice-calendar.tsx extend context cor
> >
<div <div
class="rc-virtual-list-holder" class="rc-virtual-list-holder"
style="max-height: 256px; overflow-y: auto; overflow-anchor: none;" style="max-height: 256px; overflow-y: auto;"
> >
<div> <div>
<div <div
@ -8488,7 +8488,7 @@ exports[`renders components/calendar/demo/notice-calendar.tsx extend context cor
> >
<div <div
class="rc-virtual-list-holder" class="rc-virtual-list-holder"
style="max-height: 256px; overflow-y: auto; overflow-anchor: none;" style="max-height: 256px; overflow-y: auto;"
> >
<div> <div>
<div <div
@ -10036,7 +10036,7 @@ Array [
> >
<div <div
class="rc-virtual-list-holder" class="rc-virtual-list-holder"
style="max-height: 256px; overflow-y: auto; overflow-anchor: none;" style="max-height: 256px; overflow-y: auto;"
> >
<div> <div>
<div <div
@ -10483,7 +10483,7 @@ Array [
> >
<div <div
class="rc-virtual-list-holder" class="rc-virtual-list-holder"
style="max-height: 256px; overflow-y: auto; overflow-anchor: none;" style="max-height: 256px; overflow-y: auto;"
> >
<div> <div>
<div <div

View File

@ -1,4 +1,4 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders components/calendar/demo/basic.tsx correctly 1`] = ` exports[`renders components/calendar/demo/basic.tsx correctly 1`] = `
<div <div

View File

@ -1,6 +1,6 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Calendar > Calendar MonthSelect should display correct label 1`] = ` exports[`Calendar Calendar MonthSelect should display correct label 1`] = `
<div <div
class="ant-picker-calendar ant-picker-calendar-full" class="ant-picker-calendar ant-picker-calendar-full"
> >
@ -946,7 +946,7 @@ exports[`Calendar > Calendar MonthSelect should display correct label 1`] = `
</div> </div>
`; `;
exports[`Calendar > Calendar should support locale 1`] = ` exports[`Calendar Calendar should support locale 1`] = `
<div <div
class="ant-picker-calendar ant-picker-calendar-full" class="ant-picker-calendar ant-picker-calendar-full"
> >
@ -1892,7 +1892,7 @@ exports[`Calendar > Calendar should support locale 1`] = `
</div> </div>
`; `;
exports[`Calendar > rtl render > component should be rendered correctly in RTL direction 1`] = ` exports[`Calendar rtl render component should be rendered correctly in RTL direction 1`] = `
<div <div
class="ant-picker-calendar ant-picker-calendar-full ant-picker-calendar-rtl" class="ant-picker-calendar ant-picker-calendar-full ant-picker-calendar-rtl"
> >
@ -2838,7 +2838,7 @@ exports[`Calendar > rtl render > component should be rendered correctly in RTL d
</div> </div>
`; `;
exports[`Calendar > support Calendar.generateCalendar 1`] = ` exports[`Calendar support Calendar.generateCalendar 1`] = `
<div <div
class="ant-picker-calendar ant-picker-calendar-full" class="ant-picker-calendar ant-picker-calendar-full"
> >

View File

@ -20,19 +20,17 @@ const ref: {
calendarHeaderProps?: CalendarHeaderProps<unknown>; calendarHeaderProps?: CalendarHeaderProps<unknown>;
} = {}; } = {};
vi.mock('../Header', async (importOriginal) => { jest.mock('../Header', () => {
const HeaderModule = await importOriginal<typeof import('../Header')>(); const HeaderModule = jest.requireActual('../Header');
const HeaderComponent = HeaderModule.default; const HeaderComponent = HeaderModule.default;
return { return (props: CalendarHeaderProps<any>) => {
default: (props: CalendarHeaderProps<any>) => {
ref.calendarHeaderProps = props; ref.calendarHeaderProps = props;
return <HeaderComponent {...props} />; return <HeaderComponent {...props} />;
},
}; };
}); });
vi.mock('rc-picker', async () => { jest.mock('rc-picker', () => {
const RcPicker = await vi.importActual<typeof import('rc-picker')>('rc-picker'); const RcPicker = jest.requireActual('rc-picker');
const PickerPanelComponent = RcPicker.PickerPanel; const PickerPanelComponent = RcPicker.PickerPanel;
return { return {
...RcPicker, ...RcPicker,
@ -73,8 +71,8 @@ describe('Calendar', () => {
it('Calendar should be selectable', () => { it('Calendar should be selectable', () => {
MockDate.set(Dayjs('2000-01-01').valueOf()); MockDate.set(Dayjs('2000-01-01').valueOf());
const onSelect = vi.fn(); const onSelect = jest.fn();
const onChange = vi.fn(); const onChange = jest.fn();
const { container } = render(<Calendar onSelect={onSelect} onChange={onChange} />); const { container } = render(<Calendar onSelect={onSelect} onChange={onChange} />);
fireEvent.click(container.querySelector('.ant-picker-cell')!); fireEvent.click(container.querySelector('.ant-picker-cell')!);
@ -89,7 +87,7 @@ describe('Calendar', () => {
}); });
it('only Valid range should be selectable', () => { it('only Valid range should be selectable', () => {
const onSelect = vi.fn(); const onSelect = jest.fn();
const validRange: [Dayjs.Dayjs, Dayjs.Dayjs] = [Dayjs('2018-02-02'), Dayjs('2018-02-18')]; const validRange: [Dayjs.Dayjs, Dayjs.Dayjs] = [Dayjs('2018-02-02'), Dayjs('2018-02-18')];
const wrapper = render( const wrapper = render(
<Calendar onSelect={onSelect} validRange={validRange} defaultValue={Dayjs('2018-02-02')} />, <Calendar onSelect={onSelect} validRange={validRange} defaultValue={Dayjs('2018-02-02')} />,
@ -100,7 +98,7 @@ describe('Calendar', () => {
}); });
it('dates other than in valid range should be disabled', () => { it('dates other than in valid range should be disabled', () => {
const onSelect = vi.fn(); const onSelect = jest.fn();
const validRange: [Dayjs.Dayjs, Dayjs.Dayjs] = [Dayjs('2018-02-02'), Dayjs('2018-02-18')]; const validRange: [Dayjs.Dayjs, Dayjs.Dayjs] = [Dayjs('2018-02-02'), Dayjs('2018-02-18')];
const { container } = render( const { container } = render(
<Calendar onSelect={onSelect} validRange={validRange} defaultValue={Dayjs('2018-02-02')} />, <Calendar onSelect={onSelect} validRange={validRange} defaultValue={Dayjs('2018-02-02')} />,
@ -114,7 +112,7 @@ describe('Calendar', () => {
}); });
it('months other than in valid range should be disabled', () => { it('months other than in valid range should be disabled', () => {
const onSelect = vi.fn(); const onSelect = jest.fn();
const validRange: [Dayjs.Dayjs, Dayjs.Dayjs] = [Dayjs('2018-02-02'), Dayjs('2018-05-18')]; const validRange: [Dayjs.Dayjs, Dayjs.Dayjs] = [Dayjs('2018-02-02'), Dayjs('2018-05-18')];
const { container } = render( const { container } = render(
<Calendar <Calendar
@ -189,7 +187,7 @@ describe('Calendar', () => {
it('Calendar should switch mode', () => { it('Calendar should switch mode', () => {
const monthMode = 'month'; const monthMode = 'month';
const yearMode = 'year'; const yearMode = 'year';
const onPanelChangeStub = vi.fn(); const onPanelChangeStub = jest.fn();
const wrapper = render(<Calendar mode={yearMode} onPanelChange={onPanelChangeStub} />); const wrapper = render(<Calendar mode={yearMode} onPanelChange={onPanelChangeStub} />);
expect(ref.calendarHeaderProps?.mode).toEqual(yearMode); expect(ref.calendarHeaderProps?.mode).toEqual(yearMode);
wrapper.rerender(<Calendar mode={monthMode} onPanelChange={onPanelChangeStub} />); wrapper.rerender(<Calendar mode={monthMode} onPanelChange={onPanelChangeStub} />);
@ -197,10 +195,10 @@ describe('Calendar', () => {
expect(onPanelChangeStub).toHaveBeenCalledTimes(0); expect(onPanelChangeStub).toHaveBeenCalledTimes(0);
}); });
it('Calendar should support locale', async () => { it('Calendar should support locale', () => {
MockDate.set(Dayjs('2018-10-19').valueOf()); MockDate.set(Dayjs('2018-10-19').valueOf());
// eslint-disable-next-line global-require // eslint-disable-next-line global-require
const zhCN = (await import('../locale/zh_CN')).default; const zhCN = require('../locale/zh_CN').default;
const wrapper = render(<Calendar locale={zhCN} />); const wrapper = render(<Calendar locale={zhCN} />);
expect(wrapper.container.children[0]).toMatchSnapshot(); expect(wrapper.container.children[0]).toMatchSnapshot();
MockDate.reset(); MockDate.reset();
@ -208,7 +206,7 @@ describe('Calendar', () => {
describe('onPanelChange', () => { describe('onPanelChange', () => {
it('trigger when click last month of date', () => { it('trigger when click last month of date', () => {
const onPanelChange = vi.fn(); const onPanelChange = jest.fn();
const date = Dayjs('1990-09-03'); const date = Dayjs('1990-09-03');
const wrapper = render(<Calendar onPanelChange={onPanelChange} value={date} />); const wrapper = render(<Calendar onPanelChange={onPanelChange} value={date} />);
@ -219,7 +217,7 @@ describe('Calendar', () => {
}); });
it('not trigger when in same month', () => { it('not trigger when in same month', () => {
const onPanelChange = vi.fn(); const onPanelChange = jest.fn();
const date = Dayjs('1990-09-03'); const date = Dayjs('1990-09-03');
const wrapper = render(<Calendar onPanelChange={onPanelChange} value={date} />); const wrapper = render(<Calendar onPanelChange={onPanelChange} value={date} />);
@ -230,7 +228,7 @@ describe('Calendar', () => {
}); });
it('switch should work correctly without prop mode', async () => { it('switch should work correctly without prop mode', async () => {
const onPanelChange = vi.fn(); const onPanelChange = jest.fn();
const date = Dayjs(new Date(Date.UTC(2017, 7, 9, 8))); const date = Dayjs(new Date(Date.UTC(2017, 7, 9, 8)));
const wrapper = render(<Calendar onPanelChange={onPanelChange} value={date} />); const wrapper = render(<Calendar onPanelChange={onPanelChange} value={date} />);
@ -270,7 +268,7 @@ describe('Calendar', () => {
const value = Dayjs('1990-01-03'); const value = Dayjs('1990-01-03');
const start = Dayjs('2019-04-01'); const start = Dayjs('2019-04-01');
const end = Dayjs('2019-11-01'); const end = Dayjs('2019-11-01');
const onValueChange = vi.fn(); const onValueChange = jest.fn();
createWrapper(start, end, value, onValueChange); createWrapper(start, end, value, onValueChange);
expect(onValueChange).toHaveBeenCalledWith(value.year(2019).month(3), 'year'); expect(onValueChange).toHaveBeenCalledWith(value.year(2019).month(3), 'year');
}); });
@ -279,7 +277,7 @@ describe('Calendar', () => {
const value = Dayjs('1990-01-03'); const value = Dayjs('1990-01-03');
const start = Dayjs('2019-11-01'); const start = Dayjs('2019-11-01');
const end = Dayjs('2019-03-01'); const end = Dayjs('2019-03-01');
const onValueChange = vi.fn(); const onValueChange = jest.fn();
createWrapper(start, end, value, onValueChange); createWrapper(start, end, value, onValueChange);
expect(onValueChange).toHaveBeenCalledWith(value.year(2019).month(10), 'year'); expect(onValueChange).toHaveBeenCalledWith(value.year(2019).month(10), 'year');
}); });
@ -288,7 +286,7 @@ describe('Calendar', () => {
const value = Dayjs('2018-11-03'); const value = Dayjs('2018-11-03');
const start = Dayjs('2000-01-01'); const start = Dayjs('2000-01-01');
const end = Dayjs('2019-03-01'); const end = Dayjs('2019-03-01');
const onValueChange = vi.fn(); const onValueChange = jest.fn();
const wrapper = render( const wrapper = render(
<Header <Header
prefixCls="ant-picker-calendar" prefixCls="ant-picker-calendar"
@ -311,7 +309,7 @@ describe('Calendar', () => {
const start = Dayjs('2018-11-01'); const start = Dayjs('2018-11-01');
const end = Dayjs('2019-03-01'); const end = Dayjs('2019-03-01');
const value = Dayjs('2018-12-03'); const value = Dayjs('2018-12-03');
const onValueChange = vi.fn(); const onValueChange = jest.fn();
const wrapper = render( const wrapper = render(
<Header <Header
prefixCls="ant-picker-calendar" prefixCls="ant-picker-calendar"
@ -330,7 +328,7 @@ describe('Calendar', () => {
}); });
it('onTypeChange should work correctly', () => { it('onTypeChange should work correctly', () => {
const onTypeChange = vi.fn(); const onTypeChange = jest.fn();
const value = Dayjs('2018-12-03'); const value = Dayjs('2018-12-03');
const wrapper = render( const wrapper = render(
<Header <Header
@ -350,12 +348,12 @@ describe('Calendar', () => {
}); });
it('headerRender should work correctly', () => { it('headerRender should work correctly', () => {
const onMonthChange = vi.fn(); const onMonthChange = jest.fn();
const onYearChange = vi.fn(); const onYearChange = jest.fn();
const onTypeChange = vi.fn(); const onTypeChange = jest.fn();
// Year // Year
const headerRender = vi.fn(({ value }) => { const headerRender = jest.fn(({ value }) => {
const year = value.year(); const year = value.year();
const options = []; const options = [];
for (let i = year - 100; i < year + 100; i += 1) { for (let i = year - 100; i < year + 100; i += 1) {
@ -389,7 +387,7 @@ describe('Calendar', () => {
expect(onYearChange).toHaveBeenCalled(); expect(onYearChange).toHaveBeenCalled();
// Month // Month
const headerRenderWithMonth = vi.fn(({ value }) => { const headerRenderWithMonth = jest.fn(({ value }) => {
const start = 0; const start = 0;
const end = 12; const end = 12;
const monthOptions = []; const monthOptions = [];
@ -432,7 +430,7 @@ describe('Calendar', () => {
expect(onMonthChange).toHaveBeenCalled(); expect(onMonthChange).toHaveBeenCalled();
// Type // Type
const headerRenderWithTypeChange = vi.fn(({ type }) => ( const headerRenderWithTypeChange = jest.fn(({ type }) => (
<Group size="small" onChange={onTypeChange} value={type}> <Group size="small" onChange={onTypeChange} value={type}>
<Button value="month">Month</Button> <Button value="month">Month</Button>
<Button value="year">Year</Button> <Button value="year">Year</Button>
@ -480,7 +478,7 @@ describe('Calendar', () => {
}); });
it('when fullscreen is false, the element returned by dateFullCellRender should be interactive', () => { it('when fullscreen is false, the element returned by dateFullCellRender should be interactive', () => {
const onClick = vi.fn(); const onClick = jest.fn();
const { container } = render( const { container } = render(
<Calendar <Calendar
fullscreen={false} fullscreen={false}
@ -498,7 +496,7 @@ describe('Calendar', () => {
it('deprecated dateCellRender and monthCellRender', () => { it('deprecated dateCellRender and monthCellRender', () => {
resetWarned(); resetWarned();
const errSpy = vi.spyOn(console, 'error').mockImplementation(() => {}); const errSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
const { container } = render( const { container } = render(
<Calendar <Calendar
dateCellRender={() => <div className="bamboo">Light</div>} dateCellRender={() => <div className="bamboo">Light</div>}
@ -522,7 +520,7 @@ describe('Calendar', () => {
it('deprecated dateFullCellRender and monthFullCellRender', () => { it('deprecated dateFullCellRender and monthFullCellRender', () => {
resetWarned(); resetWarned();
const errSpy = vi.spyOn(console, 'error').mockImplementation(() => {}); const errSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
const { container } = render( const { container } = render(
<Calendar <Calendar
dateFullCellRender={() => <div className="bamboo">Light</div>} dateFullCellRender={() => <div className="bamboo">Light</div>}
@ -542,12 +540,12 @@ describe('Calendar', () => {
}); });
it('support Calendar.generateCalendar', () => { it('support Calendar.generateCalendar', () => {
vi.useFakeTimers().setSystemTime(new Date('2000-01-01')); jest.useFakeTimers().setSystemTime(new Date('2000-01-01'));
const MyCalendar = Calendar.generateCalendar(dayjsGenerateConfig); const MyCalendar = Calendar.generateCalendar(dayjsGenerateConfig);
const { container } = render(<MyCalendar />); const { container } = render(<MyCalendar />);
expect(container.firstChild).toMatchSnapshot(); expect(container.firstChild).toMatchSnapshot();
vi.useRealTimers(); jest.useRealTimers();
}); });
}); });

View File

@ -13,16 +13,16 @@ describe('Calendar.onSelect', () => {
beforeEach(() => { beforeEach(() => {
resetWarned(); resetWarned();
vi.useFakeTimers(); jest.useFakeTimers();
vi.clearAllTimers(); jest.clearAllTimers();
}); });
afterEach(() => { afterEach(() => {
vi.useRealTimers(); jest.useRealTimers();
}); });
it('source of year select', async () => { it('source of year select', async () => {
const onSelect = vi.fn(); const onSelect = jest.fn();
const { container } = render(<Calendar onSelect={onSelect} />); const { container } = render(<Calendar onSelect={onSelect} />);
fireEvent.mouseDown(container.querySelector('.ant-select-selector')!); fireEvent.mouseDown(container.querySelector('.ant-select-selector')!);
@ -35,20 +35,20 @@ describe('Calendar.onSelect', () => {
}); });
it('source of month select', async () => { it('source of month select', async () => {
const onSelect = vi.fn(); const onSelect = jest.fn();
const { container } = render(<Calendar onSelect={onSelect} />); const { container } = render(<Calendar onSelect={onSelect} />);
fireEvent.mouseDown(container.querySelectorAll('.ant-select-selector')[1]!); fireEvent.mouseDown(container.querySelectorAll('.ant-select-selector')[1]!);
await waitFakeTimer(); await waitFakeTimer();
fireEvent.click(container.querySelectorAll('.ant-select-item-option')[1]!); fireEvent.click(container.querySelector('.ant-select-item-option')!);
await waitFakeTimer(); await waitFakeTimer();
expect(onSelect).toHaveBeenCalledWith(expect.anything(), { source: 'month' }); expect(onSelect).toHaveBeenCalledWith(expect.anything(), { source: 'month' });
}); });
it('source of customize', async () => { it('source of customize', async () => {
const onSelect = vi.fn(); const onSelect = jest.fn();
const { container } = render( const { container } = render(
<Calendar <Calendar
onSelect={onSelect} onSelect={onSelect}
@ -73,7 +73,7 @@ describe('Calendar.onSelect', () => {
}); });
it('source of date', () => { it('source of date', () => {
const onSelect = vi.fn(); const onSelect = jest.fn();
const { container } = render(<Calendar onSelect={onSelect} />); const { container } = render(<Calendar onSelect={onSelect} />);
fireEvent.click(container.querySelector('.ant-picker-cell')!); fireEvent.click(container.querySelector('.ant-picker-cell')!);
@ -81,8 +81,8 @@ describe('Calendar.onSelect', () => {
}); });
it('source of date with month panel', async () => { it('source of date with month panel', async () => {
const onSelect = vi.fn(); const onSelect = jest.fn();
const onPanelChange = vi.fn(); const onPanelChange = jest.fn();
const { container } = render(<Calendar onSelect={onSelect} onPanelChange={onPanelChange} />); const { container } = render(<Calendar onSelect={onSelect} onPanelChange={onPanelChange} />);
// Default is month radio // Default is month radio

View File

@ -1,4 +1,4 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders components/card/demo/basic.tsx extend context correctly 1`] = ` exports[`renders components/card/demo/basic.tsx extend context correctly 1`] = `
<div <div

View File

@ -1,4 +1,4 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders components/card/demo/basic.tsx correctly 1`] = ` exports[`renders components/card/demo/basic.tsx correctly 1`] = `
<div <div

View File

@ -1,6 +1,6 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Card > correct pass tabList props 1`] = ` exports[`Card correct pass tabList props 1`] = `
<div <div
class="ant-card ant-card-bordered ant-card-contain-tabs" class="ant-card ant-card-bordered ant-card-contain-tabs"
> >
@ -263,7 +263,7 @@ exports[`Card > correct pass tabList props 1`] = `
</div> </div>
`; `;
exports[`Card > rtl render > component should be rendered correctly in RTL direction 1`] = ` exports[`Card rtl render component should be rendered correctly in RTL direction 1`] = `
<div <div
class="ant-card ant-card-bordered ant-card-rtl" class="ant-card ant-card-bordered ant-card-rtl"
> >
@ -273,7 +273,7 @@ exports[`Card > rtl render > component should be rendered correctly in RTL direc
</div> </div>
`; `;
exports[`Card > should still have padding when card which set padding to 0 is loading 1`] = ` exports[`Card should still have padding when card which set padding to 0 is loading 1`] = `
<div <div
class="ant-card ant-card-loading ant-card-bordered" class="ant-card ant-card-loading ant-card-bordered"
> >
@ -303,7 +303,7 @@ exports[`Card > should still have padding when card which set padding to 0 is lo
</div> </div>
`; `;
exports[`Card > title should be vertically aligned 1`] = ` exports[`Card title should be vertically aligned 1`] = `
<div <div
class="ant-card ant-card-bordered" class="ant-card ant-card-bordered"
style="width: 300px;" style="width: 300px;"

View File

@ -12,11 +12,11 @@ describe('Card', () => {
rtlTest(Card); rtlTest(Card);
beforeAll(() => { beforeAll(() => {
vi.useFakeTimers(); jest.useFakeTimers();
}); });
afterAll(() => { afterAll(() => {
vi.useRealTimers(); jest.useRealTimers();
}); });
it('should still have padding when card which set padding to 0 is loading', () => { it('should still have padding when card which set padding to 0 is loading', () => {
@ -48,7 +48,7 @@ describe('Card', () => {
tab: 'tab2', tab: 'tab2',
}, },
]; ];
const onTabChange = vi.fn(); const onTabChange = jest.fn();
render( render(
<Card onTabChange={onTabChange} tabList={tabList}> <Card onTabChange={onTabChange} tabList={tabList}>
xxx xxx

View File

@ -1,4 +1,4 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders components/carousel/demo/autoplay.tsx extend context correctly 1`] = ` exports[`renders components/carousel/demo/autoplay.tsx extend context correctly 1`] = `
<div <div

View File

@ -1,4 +1,4 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders components/carousel/demo/autoplay.tsx correctly 1`] = ` exports[`renders components/carousel/demo/autoplay.tsx correctly 1`] = `
<div <div

View File

@ -1,6 +1,6 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Carousel > rtl render > component should be rendered correctly in RTL direction 1`] = ` exports[`Carousel rtl render component should be rendered correctly in RTL direction 1`] = `
<div <div
class="ant-carousel ant-carousel-rtl" class="ant-carousel ant-carousel-rtl"
> >
@ -19,7 +19,7 @@ exports[`Carousel > rtl render > component should be rendered correctly in RTL d
</div> </div>
`; `;
exports[`Carousel > should works for dotPosition > bottom 1`] = ` exports[`Carousel should works for dotPosition bottom 1`] = `
<div <div
class="ant-carousel" class="ant-carousel"
> >
@ -53,7 +53,7 @@ exports[`Carousel > should works for dotPosition > bottom 1`] = `
</div> </div>
`; `;
exports[`Carousel > should works for dotPosition > left 1`] = ` exports[`Carousel should works for dotPosition left 1`] = `
<div <div
class="ant-carousel ant-carousel-vertical" class="ant-carousel ant-carousel-vertical"
> >
@ -87,7 +87,7 @@ exports[`Carousel > should works for dotPosition > left 1`] = `
</div> </div>
`; `;
exports[`Carousel > should works for dotPosition > right 1`] = ` exports[`Carousel should works for dotPosition right 1`] = `
<div <div
class="ant-carousel ant-carousel-vertical" class="ant-carousel ant-carousel-vertical"
> >
@ -121,7 +121,7 @@ exports[`Carousel > should works for dotPosition > right 1`] = `
</div> </div>
`; `;
exports[`Carousel > should works for dotPosition > top 1`] = ` exports[`Carousel should works for dotPosition top 1`] = `
<div <div
class="ant-carousel" class="ant-carousel"
> >

View File

@ -10,11 +10,11 @@ describe('Carousel', () => {
rtlTest(Carousel); rtlTest(Carousel);
beforeEach(() => { beforeEach(() => {
vi.useFakeTimers(); jest.useFakeTimers();
}); });
afterEach(() => { afterEach(() => {
vi.useRealTimers(); jest.useRealTimers();
}); });
it('should has innerSlider', () => { it('should has innerSlider', () => {
@ -65,7 +65,7 @@ describe('Carousel', () => {
<div>3</div> <div>3</div>
</Carousel>, </Carousel>,
); );
const spy = vi.spyOn(ref.current?.innerSlider, 'autoPlay'); const spy = jest.spyOn(ref.current?.innerSlider, 'autoPlay');
window.resizeTo(1000, window.outerHeight); window.resizeTo(1000, window.outerHeight);
expect(spy).not.toHaveBeenCalled(); expect(spy).not.toHaveBeenCalled();
await waitFakeTimer(); await waitFakeTimer();
@ -80,13 +80,14 @@ describe('Carousel', () => {
<div>3</div> <div>3</div>
</Carousel>, </Carousel>,
); );
const spy = vi.spyOn(window, 'removeEventListener'); const spy = jest.spyOn(window, 'removeEventListener');
unmount(); unmount();
expect(spy).toHaveBeenCalled(); expect(spy).toHaveBeenCalled();
}); });
describe('should works for dotPosition', () => { describe('should works for dotPosition', () => {
(['left', 'right', 'top', 'bottom'] as const).forEach((dotPosition) => { (['left', 'right', 'top', 'bottom'] as const).forEach((dotPosition) => {
// eslint-disable-next-line jest/valid-title
it(dotPosition, () => { it(dotPosition, () => {
const { container } = render( const { container } = render(
<Carousel dotPosition={dotPosition}> <Carousel dotPosition={dotPosition}>

View File

@ -1,4 +1,4 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders components/cascader/demo/basic.tsx extend context correctly 1`] = ` exports[`renders components/cascader/demo/basic.tsx extend context correctly 1`] = `
<div <div

View File

@ -1,4 +1,4 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders components/cascader/demo/basic.tsx correctly 1`] = ` exports[`renders components/cascader/demo/basic.tsx correctly 1`] = `
<div <div

View File

@ -1,6 +1,6 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Cascader > can be selected 1`] = ` exports[`Cascader can be selected 1`] = `
<div <div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-cascader-dropdown ant-select-dropdown-placement-bottomLeft" class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-cascader-dropdown ant-select-dropdown-placement-bottomLeft"
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; min-width: auto;" style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; min-width: auto;"
@ -132,7 +132,7 @@ exports[`Cascader > can be selected 1`] = `
</div> </div>
`; `;
exports[`Cascader > can be selected 2`] = ` exports[`Cascader can be selected 2`] = `
<div <div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-cascader-dropdown ant-select-dropdown-placement-bottomLeft" class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-cascader-dropdown ant-select-dropdown-placement-bottomLeft"
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; min-width: auto;" style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; min-width: auto;"
@ -282,7 +282,7 @@ exports[`Cascader > can be selected 2`] = `
</div> </div>
`; `;
exports[`Cascader > can be selected 3`] = ` exports[`Cascader can be selected 3`] = `
<div <div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-cascader-dropdown ant-select-dropdown-placement-bottomLeft" class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-cascader-dropdown ant-select-dropdown-placement-bottomLeft"
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; min-width: auto;" style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; min-width: auto;"
@ -432,7 +432,7 @@ exports[`Cascader > can be selected 3`] = `
</div> </div>
`; `;
exports[`Cascader > can be selected in RTL direction 1`] = ` exports[`Cascader can be selected in RTL direction 1`] = `
<div <div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-cascader-dropdown ant-cascader-dropdown-rtl ant-select-dropdown-placement-bottomRight" class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-cascader-dropdown ant-cascader-dropdown-rtl ant-select-dropdown-placement-bottomRight"
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; min-width: auto;" style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; min-width: auto;"
@ -564,7 +564,7 @@ exports[`Cascader > can be selected in RTL direction 1`] = `
</div> </div>
`; `;
exports[`Cascader > can be selected in RTL direction 2`] = ` exports[`Cascader can be selected in RTL direction 2`] = `
<div <div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-cascader-dropdown ant-cascader-dropdown-rtl ant-select-dropdown-placement-bottomRight" class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-cascader-dropdown ant-cascader-dropdown-rtl ant-select-dropdown-placement-bottomRight"
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; min-width: auto;" style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; min-width: auto;"
@ -714,7 +714,7 @@ exports[`Cascader > can be selected in RTL direction 2`] = `
</div> </div>
`; `;
exports[`Cascader > can be selected in RTL direction 3`] = ` exports[`Cascader can be selected in RTL direction 3`] = `
<div <div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-cascader-dropdown ant-cascader-dropdown-rtl ant-select-dropdown-placement-bottomRight" class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-cascader-dropdown ant-cascader-dropdown-rtl ant-select-dropdown-placement-bottomRight"
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; min-width: auto;" style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; min-width: auto;"
@ -864,7 +864,7 @@ exports[`Cascader > can be selected in RTL direction 3`] = `
</div> </div>
`; `;
exports[`Cascader > legacy props > should support showCheckedStrategy child 1`] = ` exports[`Cascader legacy props should support showCheckedStrategy child 1`] = `
<div <div
class="ant-select ant-cascader ant-select-multiple ant-select-allow-clear ant-select-show-arrow ant-select-open" class="ant-select ant-cascader ant-select-multiple ant-select-allow-clear ant-select-show-arrow ant-select-open"
> >
@ -1041,7 +1041,7 @@ exports[`Cascader > legacy props > should support showCheckedStrategy child 1`]
</div> </div>
`; `;
exports[`Cascader > legacy props > should support showCheckedStrategy parent 1`] = ` exports[`Cascader legacy props should support showCheckedStrategy parent 1`] = `
<div <div
class="ant-select ant-cascader ant-select-multiple ant-select-allow-clear ant-select-show-arrow ant-select-open" class="ant-select ant-cascader ant-select-multiple ant-select-allow-clear ant-select-show-arrow ant-select-open"
> >
@ -1218,7 +1218,7 @@ exports[`Cascader > legacy props > should support showCheckedStrategy parent 1`]
</div> </div>
`; `;
exports[`Cascader > popup correctly with defaultValue 1`] = ` exports[`Cascader popup correctly with defaultValue 1`] = `
<div <div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-cascader-dropdown ant-select-dropdown-placement-bottomLeft" class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-cascader-dropdown ant-select-dropdown-placement-bottomLeft"
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; min-width: auto;" style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; min-width: auto;"
@ -1368,7 +1368,7 @@ exports[`Cascader > popup correctly with defaultValue 1`] = `
</div> </div>
`; `;
exports[`Cascader > popup correctly with defaultValue RTL 1`] = ` exports[`Cascader popup correctly with defaultValue RTL 1`] = `
<div <div
class="ant-select ant-cascader ant-select-rtl ant-select-single ant-select-allow-clear ant-select-show-arrow ant-select-open" class="ant-select ant-cascader ant-select-rtl ant-select-single ant-select-allow-clear ant-select-show-arrow ant-select-open"
> >
@ -1604,7 +1604,7 @@ exports[`Cascader > popup correctly with defaultValue RTL 1`] = `
</div> </div>
`; `;
exports[`Cascader > rtl render > component should be rendered correctly in RTL direction 1`] = ` exports[`Cascader rtl render component should be rendered correctly in RTL direction 1`] = `
<div <div
class="ant-select ant-cascader ant-select-rtl ant-select-single ant-select-allow-clear ant-select-show-arrow" class="ant-select ant-cascader ant-select-rtl ant-select-single ant-select-allow-clear ant-select-show-arrow"
> >
@ -1664,11 +1664,11 @@ exports[`Cascader > rtl render > component should be rendered correctly in RTL d
</div> </div>
`; `;
exports[`Cascader > should highlight keyword and filter when search in Cascader 1`] = `"<div><div class=\\"ant-cascader-menus\\"><ul class=\\"ant-cascader-menu\\" role=\\"menu\\"><li class=\\"ant-cascader-menu-item\\" role=\\"menuitemcheckbox\\" aria-checked=\\"false\\" data-path-key=\\"zhejiang__RC_CASCADER_SPLIT__hangzhou__RC_CASCADER_SPLIT__xihu\\"><div class=\\"ant-cascader-menu-item-content\\"><span class=\\"ant-cascader-menu-item-keyword\\">Z</span>hejiang / Hang<span class=\\"ant-cascader-menu-item-keyword\\">z</span>hou / West Lake</div></li><li class=\\"ant-cascader-menu-item\\" role=\\"menuitemcheckbox\\" aria-checked=\\"false\\" data-path-key=\\"jiangsu__RC_CASCADER_SPLIT__nanjing__RC_CASCADER_SPLIT__zhonghuamen\\"><div class=\\"ant-cascader-menu-item-content\\">Jiangsu / Nanjing / <span class=\\"ant-cascader-menu-item-keyword\\">Z</span>hong Hua Men</div></li></ul></div></div>"`; exports[`Cascader should highlight keyword and filter when search in Cascader 1`] = `"<div><div class="ant-cascader-menus"><ul class="ant-cascader-menu" role="menu"><li class="ant-cascader-menu-item" role="menuitemcheckbox" aria-checked="false" data-path-key="zhejiang__RC_CASCADER_SPLIT__hangzhou__RC_CASCADER_SPLIT__xihu"><div class="ant-cascader-menu-item-content"><span class="ant-cascader-menu-item-keyword">Z</span>hejiang / Hang<span class="ant-cascader-menu-item-keyword">z</span>hou / West Lake</div></li><li class="ant-cascader-menu-item" role="menuitemcheckbox" aria-checked="false" data-path-key="jiangsu__RC_CASCADER_SPLIT__nanjing__RC_CASCADER_SPLIT__zhonghuamen"><div class="ant-cascader-menu-item-content">Jiangsu / Nanjing / <span class="ant-cascader-menu-item-keyword">Z</span>hong Hua Men</div></li></ul></div></div>"`;
exports[`Cascader > should highlight keyword and filter when search in Cascader with same field name of label and value 1`] = `"<div><div class=\\"ant-cascader-menus\\"><ul class=\\"ant-cascader-menu\\" role=\\"menu\\"><li class=\\"ant-cascader-menu-item\\" role=\\"menuitemcheckbox\\" aria-checked=\\"false\\" data-path-key=\\"Zhejiang__RC_CASCADER_SPLIT__Hangzhou__RC_CASCADER_SPLIT__West Lake\\"><div class=\\"ant-cascader-menu-item-content\\"><span class=\\"ant-cascader-menu-item-keyword\\">Z</span>hejiang / Hang<span class=\\"ant-cascader-menu-item-keyword\\">z</span>hou / West Lake</div></li><li class=\\"ant-cascader-menu-item ant-cascader-menu-item-disabled\\" role=\\"menuitemcheckbox\\" aria-checked=\\"false\\" data-path-key=\\"Zhejiang__RC_CASCADER_SPLIT__Hangzhou__RC_CASCADER_SPLIT__Xia Sha\\"><div class=\\"ant-cascader-menu-item-content\\"><span class=\\"ant-cascader-menu-item-keyword\\">Z</span>hejiang / Hang<span class=\\"ant-cascader-menu-item-keyword\\">z</span>hou / Xia Sha</div></li></ul></div></div>"`; exports[`Cascader should highlight keyword and filter when search in Cascader with same field name of label and value 1`] = `"<div><div class="ant-cascader-menus"><ul class="ant-cascader-menu" role="menu"><li class="ant-cascader-menu-item" role="menuitemcheckbox" aria-checked="false" data-path-key="Zhejiang__RC_CASCADER_SPLIT__Hangzhou__RC_CASCADER_SPLIT__West Lake"><div class="ant-cascader-menu-item-content"><span class="ant-cascader-menu-item-keyword">Z</span>hejiang / Hang<span class="ant-cascader-menu-item-keyword">z</span>hou / West Lake</div></li><li class="ant-cascader-menu-item ant-cascader-menu-item-disabled" role="menuitemcheckbox" aria-checked="false" data-path-key="Zhejiang__RC_CASCADER_SPLIT__Hangzhou__RC_CASCADER_SPLIT__Xia Sha"><div class="ant-cascader-menu-item-content"><span class="ant-cascader-menu-item-keyword">Z</span>hejiang / Hang<span class="ant-cascader-menu-item-keyword">z</span>hou / Xia Sha</div></li></ul></div></div>"`;
exports[`Cascader > should render not found content 1`] = ` exports[`Cascader should render not found content 1`] = `
<div <div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-cascader-dropdown ant-select-dropdown-empty ant-select-dropdown-placement-bottomLeft" class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-cascader-dropdown ant-select-dropdown-empty ant-select-dropdown-placement-bottomLeft"
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; min-width: 0;" style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; min-width: 0;"
@ -1743,7 +1743,7 @@ exports[`Cascader > should render not found content 1`] = `
</div> </div>
`; `;
exports[`Cascader > should show not found content when options.length is 0 1`] = ` exports[`Cascader should show not found content when options.length is 0 1`] = `
<div <div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-cascader-dropdown ant-select-dropdown-empty ant-select-dropdown-placement-bottomLeft" class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-cascader-dropdown ant-select-dropdown-empty ant-select-dropdown-placement-bottomLeft"
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; min-width: 0;" style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; min-width: 0;"
@ -1818,7 +1818,7 @@ exports[`Cascader > should show not found content when options.length is 0 1`] =
</div> </div>
`; `;
exports[`Cascader > support controlled mode 1`] = ` exports[`Cascader support controlled mode 1`] = `
<div <div
class="ant-select ant-cascader ant-select-single ant-select-allow-clear ant-select-show-arrow" class="ant-select ant-cascader ant-select-single ant-select-allow-clear ant-select-show-arrow"
> >

View File

@ -90,7 +90,7 @@ describe('Cascader', () => {
}); });
it('popup correctly when panel is open', () => { it('popup correctly when panel is open', () => {
const onPopupVisibleChange = vi.fn(); const onPopupVisibleChange = jest.fn();
const { container } = render( const { container } = render(
<Cascader options={options} onPopupVisibleChange={onPopupVisibleChange} />, <Cascader options={options} onPopupVisibleChange={onPopupVisibleChange} />,
); );
@ -123,7 +123,7 @@ describe('Cascader', () => {
}); });
it('can be selected', () => { it('can be selected', () => {
const onChange = vi.fn(); const onChange = jest.fn();
const { container } = render(<Cascader open options={options} onChange={onChange} />); const { container } = render(<Cascader open options={options} onChange={onChange} />);
clickOption(container, 0, 0); clickOption(container, 0, 0);
@ -284,7 +284,7 @@ describe('Cascader', () => {
}, },
]; ];
const onChange = vi.fn(); const onChange = jest.fn();
const { container } = render( const { container } = render(
<Cascader <Cascader
@ -320,7 +320,7 @@ describe('Cascader', () => {
}); });
describe('limit filtered item count', () => { describe('limit filtered item count', () => {
const errorSpy = vi.spyOn(console, 'error').mockImplementation(() => {}); const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
afterAll(() => { afterAll(() => {
errorSpy.mockRestore(); errorSpy.mockRestore();
@ -353,8 +353,9 @@ describe('Cascader', () => {
}); });
// FIXME: Move to `rc-tree-select` instead // FIXME: Move to `rc-tree-select` instead
// eslint-disable-next-line jest/no-disabled-tests
it.skip('should warning if not find `value` in `options`', () => { it.skip('should warning if not find `value` in `options`', () => {
const errorSpy = vi.spyOn(console, 'error').mockImplementation(() => {}); const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
render(<Cascader options={[{ label: 'a', value: 'a', children: [{ label: 'b' }] }]} />); render(<Cascader options={[{ label: 'a', value: 'a', children: [{ label: 'b' }] }]} />);
expect(errorSpy).toHaveBeenCalledWith( expect(errorSpy).toHaveBeenCalledWith(
'Warning: [antd: Cascader] Not found `value` in `options`.', 'Warning: [antd: Cascader] Not found `value` in `options`.',
@ -409,7 +410,8 @@ describe('Cascader', () => {
const { container } = render(<Cascader options={customOptions} placement="topRight" />); const { container } = render(<Cascader options={customOptions} placement="topRight" />);
toggleOpen(container); toggleOpen(container);
expect(globalThis.triggerProps.popupPlacement).toEqual('topRight'); // Inject in tests/__mocks__/rc-trigger.js
expect((global as any)?.triggerProps.popupPlacement).toEqual('topRight');
}); });
it('popup correctly with defaultValue RTL', () => { it('popup correctly with defaultValue RTL', () => {
@ -456,7 +458,7 @@ describe('Cascader', () => {
], ],
}, },
]; ];
const onChange = vi.fn(); const onChange = jest.fn();
const { container } = render( const { container } = render(
<ConfigProvider direction="rtl"> <ConfigProvider direction="rtl">
<Cascader <Cascader
@ -492,7 +494,7 @@ describe('Cascader', () => {
}); });
it('can be selected when showSearch', () => { it('can be selected when showSearch', () => {
const onChange = vi.fn(); const onChange = jest.fn();
const { container } = render(<Cascader options={options} onChange={onChange} showSearch />); const { container } = render(<Cascader options={options} onChange={onChange} showSearch />);
fireEvent.change(container.querySelector('input')!, { target: { value: 'Zh' } }); fireEvent.change(container.querySelector('input')!, { target: { value: 'Zh' } });
@ -512,7 +514,7 @@ describe('Cascader', () => {
}); });
it('onChange works correctly when the label of fieldNames is the same as value', () => { it('onChange works correctly when the label of fieldNames is the same as value', () => {
const onChange = vi.fn(); const onChange = jest.fn();
const sameNames = { label: 'label', value: 'label' }; const sameNames = { label: 'label', value: 'label' };
const { container } = render( const { container } = render(
<Cascader options={options} onChange={onChange} showSearch fieldNames={sameNames} />, <Cascader options={options} onChange={onChange} showSearch fieldNames={sameNames} />,
@ -526,20 +528,21 @@ describe('Cascader', () => {
const { container } = render(<Cascader options={options} direction="rtl" />); const { container } = render(<Cascader options={options} direction="rtl" />);
toggleOpen(container); toggleOpen(container);
expect(globalThis.triggerProps.popupPlacement).toEqual('bottomRight'); // Inject in tests/__mocks__/rc-trigger.js
expect((global as any).triggerProps.popupPlacement).toEqual('bottomRight');
}); });
describe('legacy props', () => { describe('legacy props', () => {
it('popupPlacement', () => { it('popupPlacement', () => {
render(<Cascader open popupPlacement="bottomLeft" />); render(<Cascader open popupPlacement="bottomLeft" />);
// Inject in __mocks__/@rc-component/trigger.tsx // Inject in tests/__mocks__/rc-trigger.js
expect((global as any).triggerProps.popupPlacement).toEqual('bottomLeft'); expect((global as any).triggerProps.popupPlacement).toEqual('bottomLeft');
}); });
it('legacy dropdownClassName', () => { it('legacy dropdownClassName', () => {
resetWarned(); resetWarned();
const errSpy = vi.spyOn(console, 'error').mockImplementation(() => {}); const errSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
const { container } = render(<Cascader dropdownClassName="legacy" open />); const { container } = render(<Cascader dropdownClassName="legacy" open />);
expect(errSpy).toHaveBeenCalledWith( expect(errSpy).toHaveBeenCalledWith(
'Warning: [antd: Cascader] `dropdownClassName` is deprecated. Please use `popupClassName` instead.', 'Warning: [antd: Cascader] `dropdownClassName` is deprecated. Please use `popupClassName` instead.',

View File

@ -335,7 +335,7 @@ if (process.env.NODE_ENV !== 'production') {
} }
// We don't care debug panel // We don't care debug panel
/* c8 ignore next */ /* istanbul ignore next */
const PurePanel = genPurePanel(Cascader); const PurePanel = genPurePanel(Cascader);
Cascader.SHOW_PARENT = SHOW_PARENT; Cascader.SHOW_PARENT = SHOW_PARENT;

View File

@ -1,6 +1,6 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Checkbox > rtl render > component should be rendered correctly in RTL direction 1`] = ` exports[`Checkbox rtl render component should be rendered correctly in RTL direction 1`] = `
<label <label
class="ant-checkbox-wrapper ant-checkbox-rtl" class="ant-checkbox-wrapper ant-checkbox-rtl"
> >

View File

@ -1,4 +1,4 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders components/checkbox/demo/basic.tsx extend context correctly 1`] = ` exports[`renders components/checkbox/demo/basic.tsx extend context correctly 1`] = `
<label <label

View File

@ -1,4 +1,4 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders components/checkbox/demo/basic.tsx correctly 1`] = ` exports[`renders components/checkbox/demo/basic.tsx correctly 1`] = `
<label <label

View File

@ -1,6 +1,6 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`CheckboxGroup > passes prefixCls down to checkbox 1`] = ` exports[`CheckboxGroup passes prefixCls down to checkbox 1`] = `
<div <div
class="my-checkbox-group" class="my-checkbox-group"
> >
@ -46,7 +46,7 @@ exports[`CheckboxGroup > passes prefixCls down to checkbox 1`] = `
</div> </div>
`; `;
exports[`CheckboxGroup > rtl render > component should be rendered correctly in RTL direction 1`] = ` exports[`CheckboxGroup rtl render component should be rendered correctly in RTL direction 1`] = `
<div <div
class="ant-checkbox-group ant-checkbox-group-rtl" class="ant-checkbox-group ant-checkbox-group-rtl"
/> />

View File

@ -12,8 +12,8 @@ describe('Checkbox', () => {
rtlTest(Checkbox); rtlTest(Checkbox);
it('responses hover events', () => { it('responses hover events', () => {
const onMouseEnter = vi.fn(); const onMouseEnter = jest.fn();
const onMouseLeave = vi.fn(); const onMouseLeave = jest.fn();
const { container } = render( const { container } = render(
<Checkbox onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave} />, <Checkbox onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave} />,
@ -29,7 +29,7 @@ describe('Checkbox', () => {
it('warning if set `value`', () => { it('warning if set `value`', () => {
resetWarned(); resetWarned();
const errorSpy = vi.spyOn(console, 'error').mockImplementation(() => {}); const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
render(<Checkbox value />); render(<Checkbox value />);
expect(errorSpy).toHaveBeenCalledWith( expect(errorSpy).toHaveBeenCalledWith(
'Warning: [antd: Checkbox] `value` is not a valid prop, do you mean `checked`?', 'Warning: [antd: Checkbox] `value` is not a valid prop, do you mean `checked`?',

View File

@ -14,7 +14,7 @@ describe('CheckboxGroup', () => {
rtlTest(Checkbox.Group); rtlTest(Checkbox.Group);
it('should work basically', () => { it('should work basically', () => {
const onChange = vi.fn(); const onChange = jest.fn();
const { container } = render( const { container } = render(
<Checkbox.Group options={['Apple', 'Pear', 'Orange']} onChange={onChange} />, <Checkbox.Group options={['Apple', 'Pear', 'Orange']} onChange={onChange} />,
); );
@ -29,7 +29,7 @@ describe('CheckboxGroup', () => {
}); });
it('does not trigger onChange callback of both Checkbox and CheckboxGroup when CheckboxGroup is disabled', () => { it('does not trigger onChange callback of both Checkbox and CheckboxGroup when CheckboxGroup is disabled', () => {
const onChangeGroup = vi.fn(); const onChangeGroup = jest.fn();
const options = [ const options = [
{ label: 'Apple', value: 'Apple' }, { label: 'Apple', value: 'Apple' },
@ -46,7 +46,7 @@ describe('CheckboxGroup', () => {
}); });
it('does not prevent onChange callback from Checkbox when CheckboxGroup is not disabled', () => { it('does not prevent onChange callback from Checkbox when CheckboxGroup is not disabled', () => {
const onChangeGroup = vi.fn(); const onChangeGroup = jest.fn();
const options = [ const options = [
{ label: 'Apple', value: 'Apple' }, { label: 'Apple', value: 'Apple' },
@ -94,7 +94,7 @@ describe('CheckboxGroup', () => {
// https://github.com/ant-design/ant-design/issues/12642 // https://github.com/ant-design/ant-design/issues/12642
it('should trigger onChange in sub Checkbox', () => { it('should trigger onChange in sub Checkbox', () => {
const onChange = vi.fn(); const onChange = jest.fn();
const { container } = render( const { container } = render(
<Checkbox.Group> <Checkbox.Group>
<Checkbox value="my" onChange={onChange} /> <Checkbox value="my" onChange={onChange} />
@ -107,7 +107,7 @@ describe('CheckboxGroup', () => {
// https://github.com/ant-design/ant-design/issues/16376 // https://github.com/ant-design/ant-design/issues/16376
it('onChange should filter removed value', () => { it('onChange should filter removed value', () => {
const onChange = vi.fn(); const onChange = jest.fn();
const { container, rerender } = render( const { container, rerender } = render(
<Checkbox.Group defaultValue={[1]} onChange={onChange}> <Checkbox.Group defaultValue={[1]} onChange={onChange}>
<Checkbox key={1} value={1} /> <Checkbox key={1} value={1} />
@ -126,7 +126,7 @@ describe('CheckboxGroup', () => {
}); });
it('checkbox should register value again after value changed', () => { it('checkbox should register value again after value changed', () => {
const onChange = vi.fn(); const onChange = jest.fn();
const { container, rerender } = render( const { container, rerender } = render(
<Checkbox.Group defaultValue={[1]} onChange={onChange}> <Checkbox.Group defaultValue={[1]} onChange={onChange}>
<Checkbox key={1} value={1} /> <Checkbox key={1} value={1} />
@ -144,7 +144,7 @@ describe('CheckboxGroup', () => {
// https://github.com/ant-design/ant-design/issues/17297 // https://github.com/ant-design/ant-design/issues/17297
it('onChange should keep the order of the original values', () => { it('onChange should keep the order of the original values', () => {
const onChange = vi.fn(); const onChange = jest.fn();
const { container } = render( const { container } = render(
<Checkbox.Group onChange={onChange}> <Checkbox.Group onChange={onChange}>
<Checkbox key={1} value={1} /> <Checkbox key={1} value={1} />
@ -194,7 +194,7 @@ describe('CheckboxGroup', () => {
}); });
it('skipGroup', () => { it('skipGroup', () => {
const onChange = vi.fn(); const onChange = jest.fn();
const { container } = render( const { container } = render(
<Checkbox.Group onChange={onChange}> <Checkbox.Group onChange={onChange}>
<Checkbox value={1} /> <Checkbox value={1} />
@ -206,7 +206,7 @@ describe('CheckboxGroup', () => {
}); });
it('Table rowSelection', () => { it('Table rowSelection', () => {
const onChange = vi.fn(); const onChange = jest.fn();
const { container } = render( const { container } = render(
<Checkbox.Group onChange={onChange}> <Checkbox.Group onChange={onChange}>
<Table <Table
@ -227,7 +227,7 @@ describe('CheckboxGroup', () => {
}); });
it('should support number option', () => { it('should support number option', () => {
const onChange = vi.fn(); const onChange = jest.fn();
const { container } = render( const { container } = render(
<Checkbox.Group options={[1, 'Pear', 'Orange']} onChange={onChange} />, <Checkbox.Group options={[1, 'Pear', 'Orange']} onChange={onChange} />,
@ -238,7 +238,7 @@ describe('CheckboxGroup', () => {
}); });
it('should store latest checkbox value if changed', () => { it('should store latest checkbox value if changed', () => {
const onChange = vi.fn(); const onChange = jest.fn();
const Demo: React.FC = () => { const Demo: React.FC = () => {
const [v, setV] = useState(''); const [v, setV] = useState('');

View File

@ -1,4 +1,4 @@
// Compatible for babel-plugin-import // Compatible for babel-plugin-import
/* c8 ignore next */ /* istanbul ignore next */
export default {}; export default {};

View File

@ -1,4 +1,4 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders components/collapse/demo/accordion.tsx extend context correctly 1`] = ` exports[`renders components/collapse/demo/accordion.tsx extend context correctly 1`] = `
<div <div
@ -1016,7 +1016,7 @@ Array [
> >
<div <div
class="rc-virtual-list-holder" class="rc-virtual-list-holder"
style="max-height: 256px; overflow-y: auto; overflow-anchor: none;" style="max-height: 256px; overflow-y: auto;"
> >
<div> <div>
<div <div

View File

@ -1,4 +1,4 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders components/collapse/demo/accordion.tsx correctly 1`] = ` exports[`renders components/collapse/demo/accordion.tsx correctly 1`] = `
<div <div

View File

@ -1,6 +1,6 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Collapse > Collapse.Panel usage 1`] = ` exports[`Collapse Collapse.Panel usage 1`] = `
<div <div
class="ant-collapse ant-collapse-icon-position-start ant-collapse-borderless" class="ant-collapse ant-collapse-icon-position-start ant-collapse-borderless"
> >
@ -87,7 +87,7 @@ exports[`Collapse > Collapse.Panel usage 1`] = `
</div> </div>
`; `;
exports[`Collapse > could override default openMotion 1`] = ` exports[`Collapse could override default openMotion 1`] = `
<div <div
class="ant-collapse ant-collapse-icon-position-start" class="ant-collapse ant-collapse-icon-position-start"
> >
@ -144,7 +144,7 @@ exports[`Collapse > could override default openMotion 1`] = `
</div> </div>
`; `;
exports[`Collapse > should render extra node of panel 1`] = ` exports[`Collapse should render extra node of panel 1`] = `
<div <div
class="ant-collapse ant-collapse-icon-position-start" class="ant-collapse ant-collapse-icon-position-start"
> >
@ -249,7 +249,7 @@ exports[`Collapse > should render extra node of panel 1`] = `
</div> </div>
`; `;
exports[`Collapse > should support remove expandIcon 1`] = ` exports[`Collapse should support remove expandIcon 1`] = `
<div <div
class="ant-collapse ant-collapse-icon-position-start" class="ant-collapse ant-collapse-icon-position-start"
> >

View File

@ -1,18 +1,19 @@
import React from 'react'; import React from 'react';
import { act } from 'react-dom/test-utils'; import { act } from 'react-dom/test-utils';
import { vi } from 'vitest';
import { fireEvent, render, waitFakeTimer } from '../../../tests/utils'; import { fireEvent, render, waitFakeTimer } from '../../../tests/utils';
import { resetWarned } from '../../_util/warning'; import { resetWarned } from '../../_util/warning';
import Collapse from '../Collapse';
describe('Collapse', () => { describe('Collapse', () => {
const errorSpy = vi.spyOn(console, 'error').mockImplementation(() => {}); // eslint-disable-next-line global-require
const Collapse = require('..').default;
const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
// fix React concurrent // fix React concurrent
function triggerAllTimer() { function triggerAllTimer() {
for (let i = 0; i < 10; i += 1) { for (let i = 0; i < 10; i += 1) {
act(() => { act(() => {
vi.runAllTimers(); jest.runAllTimers();
}); });
} }
} }
@ -32,7 +33,7 @@ describe('Collapse', () => {
it('should support remove expandIcon', () => { it('should support remove expandIcon', () => {
const { asFragment } = render( const { asFragment } = render(
<Collapse expandIcon={() => null}> <Collapse expandIcon={() => null}>
<Collapse.Panel key={1} header="header" /> <Collapse.Panel header="header" />
</Collapse>, </Collapse>,
); );
expect(asFragment().firstChild).toMatchSnapshot(); expect(asFragment().firstChild).toMatchSnapshot();
@ -55,7 +56,7 @@ describe('Collapse', () => {
</button> </button>
)} )}
> >
<Collapse.Panel key={1} header="header" /> <Collapse.Panel header="header" />
</Collapse>, </Collapse>,
); );
@ -65,15 +66,15 @@ describe('Collapse', () => {
it('should render extra node of panel', () => { it('should render extra node of panel', () => {
const { asFragment } = render( const { asFragment } = render(
<Collapse> <Collapse>
<Collapse.Panel header="header" key={1} extra={<button type="button">action</button>} /> <Collapse.Panel header="header" extra={<button type="button">action</button>} />
<Collapse.Panel header="header" key={2} extra={<button type="button">action</button>} /> <Collapse.Panel header="header" extra={<button type="button">action</button>} />
</Collapse>, </Collapse>,
); );
expect(asFragment().firstChild).toMatchSnapshot(); expect(asFragment().firstChild).toMatchSnapshot();
}); });
it('could be expand and collapse', async () => { it('could be expand and collapse', async () => {
vi.useFakeTimers(); jest.useFakeTimers();
const { container } = render( const { container } = render(
<Collapse> <Collapse>
<Collapse.Panel header="This is panel header 1" key="1"> <Collapse.Panel header="This is panel header 1" key="1">
@ -89,13 +90,12 @@ describe('Collapse', () => {
expect( expect(
container.querySelector('.ant-collapse-item')?.classList.contains('ant-collapse-item-active'), container.querySelector('.ant-collapse-item')?.classList.contains('ant-collapse-item-active'),
).toBe(true); ).toBe(true);
vi.useRealTimers(); jest.useRealTimers();
}); });
it('could override default openMotion', () => { it('could override default openMotion', () => {
const props = { openMotion: {} };
const { container, asFragment } = render( const { container, asFragment } = render(
<Collapse {...props}> <Collapse openMotion={{}}>
<Collapse.Panel header="This is panel header 1" key="1"> <Collapse.Panel header="This is panel header 1" key="1">
content content
</Collapse.Panel> </Collapse.Panel>
@ -153,8 +153,8 @@ describe('Collapse', () => {
}); });
it('should end motion when set activeKey while hiding', async () => { it('should end motion when set activeKey while hiding', async () => {
vi.useFakeTimers(); jest.useFakeTimers();
const spiedRAF = vi const spiedRAF = jest
.spyOn(window, 'requestAnimationFrame') .spyOn(window, 'requestAnimationFrame')
.mockImplementation((cb) => setTimeout(cb, 16.66)); .mockImplementation((cb) => setTimeout(cb, 16.66));
@ -185,7 +185,7 @@ describe('Collapse', () => {
expect(container.querySelectorAll('.ant-motion-collapse').length).toBe(0); expect(container.querySelectorAll('.ant-motion-collapse').length).toBe(0);
spiedRAF.mockRestore(); spiedRAF.mockRestore();
vi.useRealTimers(); jest.useRealTimers();
}); });
it('ref should work', () => { it('ref should work', () => {
@ -213,7 +213,8 @@ describe('Collapse', () => {
}); });
describe('expandIconPosition', () => { describe('expandIconPosition', () => {
it.each(['left', 'right'] as const)(`warning for legacy %s'`, (pos) => { ['left', 'right'].forEach((pos) => {
it(`warning for legacy '${pos}'`, () => {
render( render(
<Collapse expandIconPosition={pos}> <Collapse expandIconPosition={pos}>
<Collapse.Panel header="header" key="1" /> <Collapse.Panel header="header" key="1" />
@ -235,6 +236,7 @@ describe('Collapse', () => {
expect(container.querySelector('.ant-collapse-icon-position-end')).toBeTruthy(); expect(container.querySelector('.ant-collapse-icon-position-end')).toBeTruthy();
}); });
}); });
});
it('Collapse.Panel usage', () => { it('Collapse.Panel usage', () => {
const { container } = render( const { container } = render(

View File

@ -194,7 +194,7 @@ if (process.env.NODE_ENV !== 'production') {
const PurePanel = genPurePanel( const PurePanel = genPurePanel(
ColorPicker, ColorPicker,
'color-picker', 'color-picker',
/* c8 ignore next */ /* istanbul ignore next */
(prefixCls) => prefixCls, (prefixCls) => prefixCls,
(props: ColorPickerProps) => ({ (props: ColorPickerProps) => ({
...props, ...props,

View File

@ -1,4 +1,4 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders components/color-picker/demo/allowClear.tsx extend context correctly 1`] = ` exports[`renders components/color-picker/demo/allowClear.tsx extend context correctly 1`] = `
Array [ Array [
@ -190,7 +190,7 @@ Array [
> >
<div <div
class="rc-virtual-list-holder" class="rc-virtual-list-holder"
style="max-height: 256px; overflow-y: auto; overflow-anchor: none;" style="max-height: 256px; overflow-y: auto;"
> >
<div> <div>
<div <div
@ -572,7 +572,7 @@ Array [
> >
<div <div
class="rc-virtual-list-holder" class="rc-virtual-list-holder"
style="max-height: 256px; overflow-y: auto; overflow-anchor: none;" style="max-height: 256px; overflow-y: auto;"
> >
<div> <div>
<div <div
@ -954,7 +954,7 @@ Array [
> >
<div <div
class="rc-virtual-list-holder" class="rc-virtual-list-holder"
style="max-height: 256px; overflow-y: auto; overflow-anchor: none;" style="max-height: 256px; overflow-y: auto;"
> >
<div> <div>
<div <div
@ -1336,7 +1336,7 @@ Array [
> >
<div <div
class="rc-virtual-list-holder" class="rc-virtual-list-holder"
style="max-height: 256px; overflow-y: auto; overflow-anchor: none;" style="max-height: 256px; overflow-y: auto;"
> >
<div> <div>
<div <div
@ -1738,7 +1738,7 @@ exports[`renders components/color-picker/demo/format.tsx extend context correctl
> >
<div <div
class="rc-virtual-list-holder" class="rc-virtual-list-holder"
style="max-height: 256px; overflow-y: auto; overflow-anchor: none;" style="max-height: 256px; overflow-y: auto;"
> >
<div> <div>
<div <div
@ -2149,7 +2149,7 @@ exports[`renders components/color-picker/demo/format.tsx extend context correctl
> >
<div <div
class="rc-virtual-list-holder" class="rc-virtual-list-holder"
style="max-height: 256px; overflow-y: auto; overflow-anchor: none;" style="max-height: 256px; overflow-y: auto;"
> >
<div> <div>
<div <div
@ -2777,7 +2777,7 @@ exports[`renders components/color-picker/demo/format.tsx extend context correctl
> >
<div <div
class="rc-virtual-list-holder" class="rc-virtual-list-holder"
style="max-height: 256px; overflow-y: auto; overflow-anchor: none;" style="max-height: 256px; overflow-y: auto;"
> >
<div> <div>
<div <div
@ -3394,7 +3394,7 @@ Array [
> >
<div <div
class="rc-virtual-list-holder" class="rc-virtual-list-holder"
style="max-height: 256px; overflow-y: auto; overflow-anchor: none;" style="max-height: 256px; overflow-y: auto;"
> >
<div> <div>
<div <div
@ -4153,7 +4153,7 @@ exports[`renders components/color-picker/demo/pure-panel.tsx extend context corr
> >
<div <div
class="rc-virtual-list-holder" class="rc-virtual-list-holder"
style="max-height: 256px; overflow-y: auto; overflow-anchor: none;" style="max-height: 256px; overflow-y: auto;"
> >
<div> <div>
<div <div
@ -4533,7 +4533,7 @@ Array [
> >
<div <div
class="rc-virtual-list-holder" class="rc-virtual-list-holder"
style="max-height: 256px; overflow-y: auto; overflow-anchor: none;" style="max-height: 256px; overflow-y: auto;"
> >
<div> <div>
<div <div
@ -4915,7 +4915,7 @@ Array [
> >
<div <div
class="rc-virtual-list-holder" class="rc-virtual-list-holder"
style="max-height: 256px; overflow-y: auto; overflow-anchor: none;" style="max-height: 256px; overflow-y: auto;"
> >
<div> <div>
<div <div

View File

@ -1,4 +1,4 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders components/color-picker/demo/allowClear.tsx correctly 1`] = ` exports[`renders components/color-picker/demo/allowClear.tsx correctly 1`] = `
<div <div

Some files were not shown because too many files have changed in this diff Show More