diff --git a/tests/__mocks__/@rc-component/trigger.tsx b/__mocks__/@rc-component/trigger.tsx similarity index 65% rename from tests/__mocks__/@rc-component/trigger.tsx rename to __mocks__/@rc-component/trigger.tsx index b9c9d5c88d47..c199b787d466 100644 --- a/tests/__mocks__/@rc-component/trigger.tsx +++ b/__mocks__/@rc-component/trigger.tsx @@ -1,16 +1,17 @@ import type { TriggerProps } from '@rc-component/trigger'; -import MockTrigger from '@rc-component/trigger/lib/mock'; +import MockTrigger from '@rc-component/trigger/es/mock'; import * as React from 'react'; -import { TriggerMockContext } from '../../shared/demoTestContext'; +import { TriggerMockContext } from '../../tests/shared/demoTestContext'; -let OriginTrigger = jest.requireActual('@rc-component/trigger'); -OriginTrigger = OriginTrigger.default ?? OriginTrigger; +const { default: OriginTrigger } = await vi.importActual( + '@rc-component/trigger', +); const ForwardTrigger = React.forwardRef((props, ref) => { const context = React.useContext(TriggerMockContext); const mergedPopupVisible = context?.popupVisible ?? props.popupVisible; - (global as any).triggerProps = props; + globalThis.triggerProps = props; const mergedProps = { ...props, diff --git a/tests/__mocks__/copy-to-clipboard.ts b/__mocks__/copy-to-clipboard.ts similarity index 100% rename from tests/__mocks__/copy-to-clipboard.ts rename to __mocks__/copy-to-clipboard.ts diff --git a/tests/__mocks__/rc-trigger.tsx b/__mocks__/rc-trigger.tsx similarity index 68% rename from tests/__mocks__/rc-trigger.tsx rename to __mocks__/rc-trigger.tsx index 44631901fe5e..a65a367b655f 100644 --- a/tests/__mocks__/rc-trigger.tsx +++ b/__mocks__/rc-trigger.tsx @@ -1,16 +1,15 @@ import type { TriggerProps } from 'rc-trigger'; -import MockTrigger from 'rc-trigger/lib/mock'; +import MockTrigger from 'rc-trigger/es/mock'; import * as React from 'react'; -import { TriggerMockContext } from '../shared/demoTestContext'; +import { TriggerMockContext } from '../tests/shared/demoTestContext'; -let OriginTrigger = jest.requireActual('rc-trigger'); -OriginTrigger = OriginTrigger.default ?? OriginTrigger; +const { default: OriginTrigger } = await vi.importActual('rc-trigger'); const ForwardTrigger = React.forwardRef((props, ref) => { const context = React.useContext(TriggerMockContext); const mergedPopupVisible = context?.popupVisible ?? props.popupVisible; - (global as any).triggerProps = props; + globalThis.triggerProps = props as any; const mergedProps = { ...props, diff --git a/tests/__mocks__/rc-util/lib/Portal.tsx b/__mocks__/rc-util/es/Portal.tsx similarity index 78% rename from tests/__mocks__/rc-util/lib/Portal.tsx rename to __mocks__/rc-util/es/Portal.tsx index 9fe393670f86..2858c6319f29 100644 --- a/tests/__mocks__/rc-util/lib/Portal.tsx +++ b/__mocks__/rc-util/es/Portal.tsx @@ -1,8 +1,8 @@ import React from 'react'; -import { TriggerMockContext } from '../../../shared/demoTestContext'; +import { TriggerMockContext } from '../../../tests/shared/demoTestContext'; + +const { default: OriginPortal } = await vi.importActual('rc-util/es/Portal'); -let OriginPortal = jest.requireActual('rc-util/lib/Portal'); -OriginPortal = OriginPortal.default ?? OriginPortal; class MockPortal extends React.Component<{ children?: React.ReactNode }> { container: boolean; diff --git a/__mocks__/rc-virtual-list.ts b/__mocks__/rc-virtual-list.ts new file mode 100644 index 000000000000..22cd22f5be60 --- /dev/null +++ b/__mocks__/rc-virtual-list.ts @@ -0,0 +1 @@ +export { default as default } from 'rc-virtual-list/es/mock'; diff --git a/components/__tests__/__snapshots__/index.test.ts.snap b/components/__tests__/__snapshots__/index.test.ts.snap index 8572ab796ffb..a6f6d0399c22 100644 --- a/components/__tests__/__snapshots__/index.test.ts.snap +++ b/components/__tests__/__snapshots__/index.test.ts.snap @@ -1,6 +1,6 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html -exports[`antd exports modules correctly 1`] = ` +exports[`antd > exports modules correctly 1`] = ` [ "Affix", "Alert", @@ -37,7 +37,9 @@ exports[`antd exports modules correctly 1`] = ` "List", "Mentions", "Menu", + "message", "Modal", + "notification", "Pagination", "Popconfirm", "Popover", @@ -59,6 +61,7 @@ exports[`antd exports modules correctly 1`] = ` "Table", "Tabs", "Tag", + "theme", "TimePicker", "Timeline", "Tooltip", @@ -68,10 +71,7 @@ exports[`antd exports modules correctly 1`] = ` "TreeSelect", "Typography", "Upload", - "Watermark", - "message", - "notification", - "theme", "version", + "Watermark", ] `; diff --git a/components/__tests__/__snapshots__/setup.test.tsx.snap b/components/__tests__/__snapshots__/setup.test.tsx.snap index f2e4db6141ac..c3c40d4094ec 100644 --- a/components/__tests__/__snapshots__/setup.test.tsx.snap +++ b/components/__tests__/__snapshots__/setup.test.tsx.snap @@ -1,6 +1,6 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html -exports[`SetUp.Test diff of React 18 & React 17 1`] = ` +exports[`SetUp.Test > diff of React 18 & React 17 1`] = ` NodeList [
bamboo diff --git a/components/__tests__/index.test.ts b/components/__tests__/index.test.ts index 9ab8d246ba51..a103f2129876 100644 --- a/components/__tests__/index.test.ts +++ b/components/__tests__/index.test.ts @@ -1,13 +1,13 @@ const OLD_NODE_ENV = process.env.NODE_ENV; process.env.NODE_ENV = 'development'; -const antd = require('..'); describe('antd', () => { afterAll(() => { process.env.NODE_ENV = OLD_NODE_ENV; }); - it('exports modules correctly', () => { + it('exports modules correctly', async () => { + const antd = await import('../index'); expect(Object.keys(antd)).toMatchSnapshot(); }); }); diff --git a/components/__tests__/node.test.tsx b/components/__tests__/node.test.tsx index cc63dd37e41d..76df67ea10b2 100644 --- a/components/__tests__/node.test.tsx +++ b/components/__tests__/node.test.tsx @@ -5,19 +5,22 @@ import type { Options } from '../../tests/shared/demoTest'; (global as any).testConfig = {}; -jest.mock('../../tests/shared/demoTest', () => { +vi.mock('../../tests/shared/demoTest', () => { function fakeDemoTest(name: string, option: Options = {}) { (global as any).testConfig[name] = option; } fakeDemoTest.rootPropsTest = () => {}; - return fakeDemoTest; + return { + default: fakeDemoTest, + rootPropsTest: () => {}, + }; }); describe('node', () => { beforeAll(() => { - jest.useFakeTimers().setSystemTime(new Date('2016-11-22')); + vi.useFakeTimers().setSystemTime(new Date('2016-11-22')); }); // Find the component exist demo test file @@ -27,19 +30,20 @@ describe('node', () => { const componentName = componentTestFile.match(/components\/([^/]*)\//)![1]; // Test for ssr - describe(componentName, () => { + // eslint-disable-next-line jest/valid-describe-callback + describe(componentName, async () => { const demoList = globSync(`./components/${componentName}/demo/*.tsx`); // Use mock to get config - require(`../../${componentTestFile}`); // eslint-disable-line global-require, import/no-dynamic-require + await import(`../../${componentTestFile}`); const option = (global as any).testConfig?.[componentName]; demoList.forEach((demoFile) => { const skip: string[] = option?.skip || []; const test = skip.some((skipMarkdown) => demoFile.includes(skipMarkdown)) ? it.skip : it; - test(demoFile, () => { - const Demo = require(`../../${demoFile}`).default; // eslint-disable-line global-require, import/no-dynamic-require + test(demoFile, async () => { + const Demo = (await import(`../../${demoFile}`)).default; expect(() => { renderToString(); }).not.toThrow(); diff --git a/components/_util/__tests__/getScroll.test.ts b/components/_util/__tests__/getScroll.test.ts index 8cb737ff1a40..0eb77443ad93 100644 --- a/components/_util/__tests__/getScroll.test.ts +++ b/components/_util/__tests__/getScroll.test.ts @@ -7,7 +7,7 @@ describe('getScroll', () => { }); it('getScroll window', async () => { - const scrollToSpy = jest.spyOn(window, 'scrollTo').mockImplementation((x, y) => { + const scrollToSpy = vi.spyOn(window, 'scrollTo').mockImplementation((x, y) => { window.pageXOffset = x; window.pageYOffset = y; }); @@ -18,7 +18,7 @@ describe('getScroll', () => { }); it('getScroll document', async () => { - const scrollToSpy = jest.spyOn(window, 'scrollTo').mockImplementation((x, y) => { + const scrollToSpy = vi.spyOn(window, 'scrollTo').mockImplementation((x, y) => { document.documentElement.scrollLeft = x; document.documentElement.scrollTop = y; }); @@ -30,7 +30,7 @@ describe('getScroll', () => { it('getScroll div', async () => { const div = document.createElement('div'); - const scrollToSpy = jest.spyOn(window, 'scrollTo').mockImplementation((x, y) => { + const scrollToSpy = vi.spyOn(window, 'scrollTo').mockImplementation((x, y) => { div.scrollLeft = x; div.scrollTop = y; }); @@ -42,7 +42,7 @@ describe('getScroll', () => { it('getScroll documentElement', async () => { const div: any = {}; - const scrollToSpy = jest.spyOn(window, 'scrollTo').mockImplementation((x, y) => { + const scrollToSpy = vi.spyOn(window, 'scrollTo').mockImplementation((x, y) => { div.scrollLeft = null; div.scrollTop = null; div.documentElement = {}; diff --git a/components/_util/__tests__/responsiveObserve.test.tsx b/components/_util/__tests__/responsiveObserve.test.tsx index d88c5ea6066c..b47595d4cdc0 100644 --- a/components/_util/__tests__/responsiveObserve.test.tsx +++ b/components/_util/__tests__/responsiveObserve.test.tsx @@ -11,7 +11,7 @@ describe('Test ResponsiveObserve', () => { return null; }; render(); - const subscribeFunc = jest.fn(); + const subscribeFunc = vi.fn(); const token = responsiveObserveRef.subscribe(subscribeFunc); expect( responsiveObserveRef.matchHandlers[responsiveObserveRef.responsiveMap.xs].mql.matches, diff --git a/components/_util/__tests__/scrollTo.test.ts b/components/_util/__tests__/scrollTo.test.ts index 5fe2e09502c0..a6e7533c1cac 100644 --- a/components/_util/__tests__/scrollTo.test.ts +++ b/components/_util/__tests__/scrollTo.test.ts @@ -2,10 +2,10 @@ import { waitFakeTimer } from '../../../tests/utils'; import scrollTo from '../scrollTo'; describe('Test ScrollTo function', () => { - const dateNowMock = jest.spyOn(Date, 'now'); + const dateNowMock = vi.spyOn(Date, 'now'); beforeAll(() => { - jest.useFakeTimers(); + vi.useFakeTimers(); }); beforeEach(() => { @@ -13,16 +13,16 @@ describe('Test ScrollTo function', () => { }); afterAll(() => { - jest.useRealTimers(); + vi.useRealTimers(); }); afterEach(() => { - jest.clearAllTimers(); + vi.clearAllTimers(); dateNowMock.mockClear(); }); it('test scrollTo', async () => { - const scrollToSpy = jest.spyOn(window, 'scrollTo').mockImplementation((_, y) => { + const scrollToSpy = vi.spyOn(window, 'scrollTo').mockImplementation((_, y) => { window.scrollY = y; window.pageYOffset = y; }); @@ -36,7 +36,7 @@ describe('Test ScrollTo function', () => { }); it('test callback - option', async () => { - const cbMock = jest.fn(); + const cbMock = vi.fn(); scrollTo(1000, { callback: cbMock, }); diff --git a/components/_util/__tests__/util.test.tsx b/components/_util/__tests__/util.test.tsx index 70b8950c4c70..8dd5090131b6 100644 --- a/components/_util/__tests__/util.test.tsx +++ b/components/_util/__tests__/util.test.tsx @@ -1,7 +1,7 @@ /* eslint-disable class-methods-use-this */ import KeyCode from 'rc-util/lib/KeyCode'; import React from 'react'; -import { waitFakeTimer, render, fireEvent } from '../../../tests/utils'; +import { fireEvent, render, waitFakeTimer } from '../../../tests/utils'; import getDataOrAriaProps from '../getDataOrAriaProps'; import { isStyleSupport } from '../styleChecker'; import throttleByAnimationFrame from '../throttleByAnimationFrame'; @@ -10,19 +10,19 @@ import TransButton from '../transButton'; describe('Test utils function', () => { describe('throttle', () => { beforeAll(() => { - jest.useFakeTimers(); + vi.useFakeTimers(); }); afterAll(() => { - jest.useRealTimers(); + vi.useRealTimers(); }); afterEach(() => { - jest.clearAllTimers(); + vi.clearAllTimers(); }); it('throttle function should work', async () => { - const callback = jest.fn(); + const callback = vi.fn(); const throttled = throttleByAnimationFrame(callback); expect(callback).not.toHaveBeenCalled(); @@ -35,7 +35,7 @@ describe('Test utils function', () => { }); it('throttle function should be canceled', async () => { - const callback = jest.fn(); + const callback = vi.fn(); const throttled = throttleByAnimationFrame(callback); throttled(); @@ -106,7 +106,7 @@ describe('Test utils function', () => { }); it('should trigger onClick when press enter', () => { - const onClick = jest.fn(); + const onClick = vi.fn(); const { container } = render(TransButton); diff --git a/components/_util/__tests__/warning.test.ts b/components/_util/__tests__/warning.test.ts index 00a952bd49d8..f57b961f079e 100644 --- a/components/_util/__tests__/warning.test.ts +++ b/components/_util/__tests__/warning.test.ts @@ -1,8 +1,10 @@ +import { SpyInstance } from 'vitest'; + describe('Test warning', () => { - let spy: jest.SpyInstance; + let spy: SpyInstance; beforeAll(() => { - spy = jest.spyOn(console, 'error').mockImplementation(() => {}); + spy = vi.spyOn(console, 'error').mockImplementation(() => {}); }); afterAll(() => { @@ -10,7 +12,7 @@ describe('Test warning', () => { }); beforeEach(() => { - jest.resetModules(); + vi.resetModules(); }); afterEach(() => { diff --git a/components/_util/__tests__/wave.test.tsx b/components/_util/__tests__/wave.test.tsx index b6829855b1ea..ca20ae1adfd5 100644 --- a/components/_util/__tests__/wave.test.tsx +++ b/components/_util/__tests__/wave.test.tsx @@ -1,11 +1,11 @@ import React from 'react'; import mountTest from '../../../tests/shared/mountTest'; -import { render, fireEvent, getByText, waitFakeTimer, act } from '../../../tests/utils'; +import { act, fireEvent, getByText, render, waitFakeTimer } from '../../../tests/utils'; import Wave from '../wave'; (global as any).isVisible = true; -jest.mock('rc-util/lib/Dom/isVisible', () => { +vi.mock('rc-util/lib/Dom/isVisible', () => { const mockFn = () => (global as any).isVisible; return mockFn; }); @@ -29,11 +29,11 @@ describe('Wave component', () => { } (window as any).ResizeObserver = FakeResizeObserver; - jest.useFakeTimers(); + vi.useFakeTimers(); }); afterAll(() => { - jest.useRealTimers(); + vi.useRealTimers(); expect(obCnt).not.toBe(0); expect(disCnt).not.toBe(0); }); @@ -44,7 +44,7 @@ describe('Wave component', () => { }); afterEach(() => { - jest.clearAllTimers(); + vi.clearAllTimers(); const styles = document.getElementsByTagName('style'); for (let i = 0; i < styles.length; i += 1) { styles[i].remove(); @@ -66,7 +66,7 @@ describe('Wave component', () => { function waitRaf() { act(() => { - jest.advanceTimersByTime(100); + vi.advanceTimersByTime(100); }); } diff --git a/components/affix/__tests__/Affix.test.tsx b/components/affix/__tests__/Affix.test.tsx index cbe9b44815e0..bebd688af11d 100644 --- a/components/affix/__tests__/Affix.test.tsx +++ b/components/affix/__tests__/Affix.test.tsx @@ -42,12 +42,12 @@ describe('Affix Render', () => { rtlTest(Affix); accessibilityTest(Affix); - const domMock = jest.spyOn(HTMLElement.prototype, 'getBoundingClientRect'); + const domMock = vi.spyOn(HTMLElement.prototype, 'getBoundingClientRect'); const classRect: Record = { container: { top: 0, bottom: 100 } as DOMRect }; beforeEach(() => { - jest.useFakeTimers(); + vi.useFakeTimers(); }); beforeAll(() => { @@ -57,8 +57,8 @@ describe('Affix Render', () => { }); afterEach(() => { - jest.useRealTimers(); - jest.clearAllTimers(); + vi.useRealTimers(); + vi.clearAllTimers(); }); afterAll(() => { @@ -109,7 +109,7 @@ describe('Affix Render', () => { }); it('updatePosition when offsetTop changed', async () => { - const onChange = jest.fn(); + const onChange = vi.fn(); const { container, rerender } = render(); await waitFakeTimer(); @@ -228,7 +228,7 @@ describe('Affix Render', () => { '.fixed', // outer ].forEach((selector) => { it(`trigger listener when size change: ${selector}`, async () => { - const updateCalled = jest.fn(); + const updateCalled = vi.fn(); const { container } = render( , { diff --git a/components/affix/__tests__/__snapshots__/Affix.test.tsx.snap b/components/affix/__tests__/__snapshots__/Affix.test.tsx.snap index bd230c7ac40d..1d68a8068ffa 100644 --- a/components/affix/__tests__/__snapshots__/Affix.test.tsx.snap +++ b/components/affix/__tests__/__snapshots__/Affix.test.tsx.snap @@ -1,6 +1,6 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html -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`] = `
custom action 1`] = `
`; -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`] = `
{ accessibilityTest(Alert); beforeAll(() => { - jest.useFakeTimers(); + vi.useFakeTimers(); }); afterAll(() => { - jest.useRealTimers(); + vi.useRealTimers(); }); it('should show close button and could be closed', async () => { - const onClose = jest.fn(); + const onClose = vi.fn(); render( { await userEvent.click(screen.getByRole('button', { name: /close/i })); - act(() => { - jest.runAllTimers(); - }); - expect(onClose).toHaveBeenCalledTimes(1); }); @@ -76,7 +72,7 @@ describe('Alert', () => { }); it('should show error as ErrorBoundary when children have error', () => { - const warnSpy = jest.spyOn(console, 'error').mockImplementation(() => {}); + const warnSpy = vi.spyOn(console, 'error').mockImplementation(() => {}); expect(warnSpy).toHaveBeenCalledTimes(0); // @ts-expect-error // eslint-disable-next-line react/jsx-no-undef @@ -105,10 +101,6 @@ describe('Alert', () => { await userEvent.hover(screen.getByRole('alert')); - act(() => { - jest.runAllTimers(); - }); - expect(screen.getByRole('tooltip')).toBeInTheDocument(); }); @@ -123,10 +115,6 @@ describe('Alert', () => { ); await userEvent.click(screen.getByRole('alert')); - act(() => { - jest.runAllTimers(); - }); - expect(screen.getByRole('tooltip')).toBeInTheDocument(); }); diff --git a/components/anchor/__tests__/Anchor.test.tsx b/components/anchor/__tests__/Anchor.test.tsx index 51cf8972649d..b9850ed36f8e 100644 --- a/components/anchor/__tests__/Anchor.test.tsx +++ b/components/anchor/__tests__/Anchor.test.tsx @@ -2,6 +2,7 @@ import { resetWarned } from 'rc-util/lib/warning'; import React, { useState } from 'react'; import scrollIntoView from 'scroll-into-view-if-needed'; +import type { SpyInstance } from 'vitest'; import Anchor from '..'; import { act, fireEvent, render, waitFakeTimer } from '../../../tests/utils'; import Button from '../../button'; @@ -18,18 +19,16 @@ function createDiv() { let idCounter = 0; const getHashUrl = () => `Anchor-API-${idCounter++}`; -jest.mock('scroll-into-view-if-needed', () => jest.fn()); +vi.mock('scroll-into-view-if-needed', () => ({ + default: vi.fn(), +})); describe('Anchor Render', () => { - const getBoundingClientRectMock = jest.spyOn( - HTMLHeadingElement.prototype, - 'getBoundingClientRect', - ); - const getClientRectsMock = jest.spyOn(HTMLHeadingElement.prototype, 'getClientRects'); - const scrollIntoViewMock = jest.createMockFromModule('scroll-into-view-if-needed'); + const getBoundingClientRectMock = vi.spyOn(HTMLHeadingElement.prototype, 'getBoundingClientRect'); + const getClientRectsMock = vi.spyOn(HTMLHeadingElement.prototype, 'getClientRects'); beforeAll(() => { - jest.useFakeTimers(); + vi.useFakeTimers(); getBoundingClientRectMock.mockReturnValue({ width: 100, height: 100, @@ -39,18 +38,18 @@ describe('Anchor Render', () => { }); beforeEach(() => { - jest.useFakeTimers(); - scrollIntoViewMock.mockReset(); + vi.useFakeTimers(); + vi.mocked(scrollIntoView).mockReset(); }); afterEach(() => { - jest.clearAllTimers(); - jest.useRealTimers(); + vi.clearAllTimers(); + vi.useRealTimers(); }); afterAll(() => { - jest.clearAllTimers(); - jest.useRealTimers(); + vi.clearAllTimers(); + vi.useRealTimers(); getBoundingClientRectMock.mockRestore(); getClientRectsMock.mockRestore(); }); @@ -186,12 +185,12 @@ describe('Anchor Render', () => { const link = container.querySelector(`a[href="http://www.example.com/#${hash}"]`)!; fireEvent.click(link); await waitFakeTimer(); - expect(link.classList).toContain('ant-anchor-link-title-active'); + expect(link.classList.contains('ant-anchor-link-title-active')).toBeTruthy(); }); it('scrolls the page when clicking a link', async () => { const root = createDiv(); - const scrollToSpy = jest.spyOn(window, 'scrollTo'); + const scrollToSpy = vi.spyOn(window, 'scrollTo'); render(
Q1
, { container: root }); const { container } = render( , @@ -206,7 +205,7 @@ describe('Anchor Render', () => { const hash1 = getHashUrl(); const hash2 = getHashUrl(); const root = createDiv(); - const onChange = jest.fn(); + const onChange = vi.fn(); render(
Hello
@@ -265,7 +264,7 @@ describe('Anchor Render', () => { it('targetOffset prop', async () => { const hash = getHashUrl(); - const scrollToSpy = jest.spyOn(window, 'scrollTo'); + const scrollToSpy = vi.spyOn(window, 'scrollTo'); const root = createDiv(); render(

Hello

, { container: root }); const { container, rerender } = render( @@ -296,7 +295,7 @@ describe('Anchor Render', () => { it('targetOffset prop when contain spaces', async () => { const hash = `${getHashUrl()} s p a c e s`; - const scrollToSpy = jest.spyOn(window, 'scrollTo'); + const scrollToSpy = vi.spyOn(window, 'scrollTo'); const root = createDiv(); render(

Hello

, { container: root }); const { container, rerender } = render( @@ -347,7 +346,7 @@ describe('Anchor Render', () => { it('onChange event', () => { const hash1 = getHashUrl(); const hash2 = getHashUrl(); - const onChange = jest.fn(); + const onChange = vi.fn(); const { container } = render( { const hash1 = getHashUrl(); const hash2 = getHashUrl(); - const beforeFn = jest.fn(); - const afterFn = jest.fn(); + const beforeFn = vi.fn(); + const afterFn = vi.fn(); const Demo: React.FC = () => { const [trigger, setTrigger] = useState(false); @@ -435,7 +434,7 @@ describe('Anchor Render', () => { getBoundingClientRectMock.mockReturnValue({ width: 0, height: 0, top: 1000 } as DOMRect); const hash = getHashUrl(); - const scrollToSpy = jest.spyOn(window, 'scrollTo'); + const scrollToSpy = vi.spyOn(window, 'scrollTo'); const root = createDiv(); render(

Hello

, { container: root }); const { container, rerender } = render( @@ -472,10 +471,10 @@ describe('Anchor Render', () => { } as DOMRect); }); - it('test edge case when container is not windows', async () => { + it.todo('test edge case when container is not windows', async () => { const hash = getHashUrl(); - const scrollToSpy = jest.spyOn(window, 'scrollTo'); + const scrollToSpy = vi.spyOn(window, 'scrollTo'); const root = createDiv(); render(

Hello

, { container: root }); @@ -529,7 +528,7 @@ describe('Anchor Render', () => { it('should trigger onChange when have getCurrentAnchor', () => { const hash1 = getHashUrl(); const hash2 = getHashUrl(); - const onChange = jest.fn(); + const onChange = vi.fn(); const { container } = render( { it('getCurrentAnchor have default link as argument', () => { const hash1 = getHashUrl(); const hash2 = getHashUrl(); - const getCurrentAnchor = jest.fn(); + const getCurrentAnchor = vi.fn(); const { container } = render( { describe('scroll x', () => { it('targetOffset horizontal', async () => { const hash = getHashUrl(); - const scrollToSpy = jest.spyOn(window, 'scrollTo'); + const scrollToSpy = vi.spyOn(window, 'scrollTo'); const root = createDiv(); render(

Hello

, { container: root }); const { container, rerender } = render( @@ -756,12 +755,12 @@ describe('Anchor Render', () => { const link = container.querySelector(`a[href="http://www.example.com/#${hash}"]`)!; fireEvent.click(link); await waitFakeTimer(); - expect(link.classList).toContain('ant-anchor-link-title-active'); + expect(link.classList.contains('ant-anchor-link-title-active')).toBeTruthy(); }); it('scrolls the page when clicking a link', async () => { const root = createDiv(); - const scrollToSpy = jest.spyOn(window, 'scrollTo'); + const scrollToSpy = vi.spyOn(window, 'scrollTo'); render(
Q1
, { container: root }); const { container } = render( @@ -778,7 +777,7 @@ describe('Anchor Render', () => { const hash1 = getHashUrl(); const hash2 = getHashUrl(); const root = createDiv(); - const onChange = jest.fn(); + const onChange = vi.fn(); render(
Hello
@@ -851,10 +850,10 @@ describe('Anchor Render', () => { }); describe('warning', () => { - let errSpy: jest.SpyInstance; + let errSpy: SpyInstance; beforeEach(() => { resetWarned(); - errSpy = jest.spyOn(console, 'error').mockImplementation(() => {}); + errSpy = vi.spyOn(console, 'error').mockImplementation(() => {}); }); afterEach(() => { @@ -971,14 +970,14 @@ describe('Anchor Render', () => { const toggleButton = wrapper.container.querySelector('button')!; fireEvent.click(toggleButton); - act(() => jest.runAllTimers()); + act(() => vi.runAllTimers()); expect(!!ink.style.left).toBe(true); expect(!!ink.style.width).toBe(true); expect(ink.style.top).toBe(''); expect(ink.style.height).toBe(''); fireEvent.click(toggleButton); - act(() => jest.runAllTimers()); + act(() => vi.runAllTimers()); expect(!!ink.style.top).toBe(true); expect(!!ink.style.height).toBe(true); expect(ink.style.left).toBe(''); diff --git a/components/anchor/__tests__/__snapshots__/Anchor.test.tsx.snap b/components/anchor/__tests__/__snapshots__/Anchor.test.tsx.snap index aa6da33ae783..0a030f440b25 100644 --- a/components/anchor/__tests__/__snapshots__/Anchor.test.tsx.snap +++ b/components/anchor/__tests__/__snapshots__/Anchor.test.tsx.snap @@ -1,6 +1,6 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html -exports[`Anchor Render render items and ignore jsx children 1`] = ` +exports[`Anchor Render > render items and ignore jsx children 1`] = `
`; -exports[`Anchor Render renders items correctly 1`] = ` +exports[`Anchor Render > renders items correctly 1`] = `
`; -exports[`Anchor Render renders items correctly#horizontal 1`] = ` +exports[`Anchor Render > renders items correctly#horizontal 1`] = `
rtl render > component should be rendered correctly in RTL direction 1`] = `
`; -exports[`App single 1`] = ` +exports[`App > single 1`] = `
diff --git a/components/app/__tests__/index.test.tsx b/components/app/__tests__/index.test.tsx index c738a60a203d..4d528e7e9ebc 100644 --- a/components/app/__tests__/index.test.tsx +++ b/components/app/__tests__/index.test.tsx @@ -11,12 +11,12 @@ describe('App', () => { rtlTest(App); beforeEach(() => { - jest.useFakeTimers(); + vi.useFakeTimers(); }); afterEach(() => { - jest.clearAllTimers(); - jest.useRealTimers(); + vi.clearAllTimers(); + vi.useRealTimers(); }); it('single', () => { diff --git a/components/auto-complete/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/auto-complete/__tests__/__snapshots__/demo-extend.test.ts.snap index 74e10a5422ec..126a275dc4c9 100644 --- a/components/auto-complete/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/auto-complete/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -1,4 +1,4 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html exports[`renders components/auto-complete/demo/basic.tsx extend context correctly 1`] = ` Array [ @@ -188,7 +188,7 @@ exports[`renders components/auto-complete/demo/certain-category.tsx extend conte >
rtl render > component should be rendered correctly in RTL direction 1`] = `
diff --git a/components/auto-complete/__tests__/focus.test.tsx b/components/auto-complete/__tests__/focus.test.tsx index 167d5798485d..98868cd7ea09 100644 --- a/components/auto-complete/__tests__/focus.test.tsx +++ b/components/auto-complete/__tests__/focus.test.tsx @@ -5,7 +5,7 @@ import { render } from '../../../tests/utils'; describe('AutoComplete children could be focus', () => { beforeAll(() => { - jest.useFakeTimers(); + vi.useFakeTimers(); }); let container: HTMLDivElement; @@ -15,7 +15,7 @@ describe('AutoComplete children could be focus', () => { }); afterAll(() => { - jest.useRealTimers(); + vi.useRealTimers(); }); afterEach(() => { @@ -23,31 +23,31 @@ describe('AutoComplete children could be focus', () => { }); it('focus() and onFocus', () => { - const handleFocus = jest.fn(); + const handleFocus = vi.fn(); const { container: wrapper } = render(, { container }); wrapper.querySelector('input')?.focus(); act(() => { - jest.runAllTimers(); + vi.runAllTimers(); }); expect(handleFocus).toHaveBeenCalled(); }); it('blur() and onBlur', () => { - const handleBlur = jest.fn(); + const handleBlur = vi.fn(); const { container: wrapper } = render(, { container }); wrapper.querySelector('input')?.focus(); act(() => { - jest.runAllTimers(); + vi.runAllTimers(); }); wrapper.querySelector('input')?.blur(); act(() => { - jest.runAllTimers(); + vi.runAllTimers(); }); expect(handleBlur).toHaveBeenCalled(); }); it('child.ref should work', () => { - const mockRef = jest.fn(); + const mockRef = vi.fn(); render( diff --git a/components/auto-complete/__tests__/index.test.tsx b/components/auto-complete/__tests__/index.test.tsx index f597cb28ba7b..7295e21e6ce4 100644 --- a/components/auto-complete/__tests__/index.test.tsx +++ b/components/auto-complete/__tests__/index.test.tsx @@ -1,11 +1,11 @@ -import React from 'react'; import userEvent from '@testing-library/user-event'; +import React from 'react'; import AutoComplete from '..'; import mountTest from '../../../tests/shared/mountTest'; import rtlTest from '../../../tests/shared/rtlTest'; import { render, screen } from '../../../tests/utils'; -import Input from '../../input'; import { resetWarned } from '../../_util/warning'; +import Input from '../../input'; describe('AutoComplete', () => { mountTest(AutoComplete); @@ -49,7 +49,7 @@ describe('AutoComplete', () => { }); it('AutoComplete throws error when contains invalid dataSource', () => { - const spy = jest.spyOn(console, 'error').mockImplementation(() => {}); + const spy = vi.spyOn(console, 'error').mockImplementation(() => {}); render( // @ts-ignore @@ -82,7 +82,7 @@ describe('AutoComplete', () => { }); it('should not warning when getInputElement is null', () => { - const warnSpy = jest.spyOn(console, 'warn').mockImplementation(() => {}); + const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {}); render(); expect(warnSpy).not.toHaveBeenCalled(); warnSpy.mockRestore(); @@ -100,7 +100,7 @@ describe('AutoComplete', () => { it('deprecated dropdownClassName', () => { resetWarned(); - const errSpy = jest.spyOn(console, 'error').mockImplementation(() => {}); + const errSpy = vi.spyOn(console, 'error').mockImplementation(() => {}); const { container } = render( { mountTest(Avatar); @@ -122,7 +122,7 @@ describe('Avatar Render', () => { }); it('should warning when pass a string as icon props', () => { - const warnSpy = jest.spyOn(console, 'error').mockImplementation(() => {}); + const warnSpy = vi.spyOn(console, 'error').mockImplementation(() => {}); render(); expect(warnSpy).not.toHaveBeenCalled(); @@ -152,7 +152,7 @@ describe('Avatar Render', () => { }); it('support onMouseEnter', () => { - const onMouseEnter = jest.fn(); + const onMouseEnter = vi.fn(); const { container } = render(TestString); fireEvent.mouseEnter(container.firstChild!); expect(onMouseEnter).toHaveBeenCalled(); @@ -191,7 +191,7 @@ describe('Avatar Render', () => { }); it('clickable', () => { - const onClick = jest.fn(); + const onClick = vi.fn(); const { container } = render(TestString); fireEvent.click(container.querySelector('.ant-avatar-string')!); expect(onClick).toHaveBeenCalled(); diff --git a/components/avatar/__tests__/__snapshots__/Avatar.test.tsx.snap b/components/avatar/__tests__/__snapshots__/Avatar.test.tsx.snap index a07848455ede..fd3b8d62ea84 100644 --- a/components/avatar/__tests__/__snapshots__/Avatar.test.tsx.snap +++ b/components/avatar/__tests__/__snapshots__/Avatar.test.tsx.snap @@ -1,6 +1,6 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html -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`] = `
`; -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`] = `
`; -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`] = `
`; -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`] = `
`; -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`] = `
`; -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`] = `
`; -exports[`Avatar Render fallback 1`] = ` +exports[`Avatar Render > fallback 1`] = ` @@ -97,7 +97,7 @@ exports[`Avatar Render fallback 1`] = ` `; -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`] = ` @@ -108,7 +108,7 @@ exports[`Avatar Render rtl render component should be rendered correctly in RTL `; -exports[`Avatar Render should calculate scale of avatar children correctly 1`] = ` +exports[`Avatar Render > should calculate scale of avatar children correctly 1`] = ` `; -exports[`Avatar Render should calculate scale of avatar children correctly 2`] = ` +exports[`Avatar Render > should calculate scale of avatar children correctly 2`] = ` `; -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`] = ` `; -exports[`Avatar Render should handle onError correctly 1`] = ` +exports[`Avatar Render > should handle onError correctly 1`] = ` @@ -145,7 +145,7 @@ exports[`Avatar Render should handle onError correctly 1`] = ` `; -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`] = ` @@ -158,7 +158,7 @@ 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 2`] = ` +exports[`Avatar Render > should show image on success after a failure state 2`] = ` @@ -168,7 +168,7 @@ exports[`Avatar Render should show image on success after a failure state 2`] = `; -exports[`Avatar Render support size is number 1`] = ` +exports[`Avatar Render > support size is number 1`] = ` rtl render > component should be rendered correctly in RTL direction 1`] = `
diff --git a/components/back-top/__tests__/index.test.tsx b/components/back-top/__tests__/index.test.tsx index 66fa73a41036..38157b4a4dbd 100644 --- a/components/back-top/__tests__/index.test.tsx +++ b/components/back-top/__tests__/index.test.tsx @@ -6,17 +6,17 @@ import { fireEvent, render, waitFakeTimer } from '../../../tests/utils'; describe('BackTop', () => { beforeEach(() => { - jest.useFakeTimers(); + vi.useFakeTimers(); }); afterEach(() => { - jest.useRealTimers(); + vi.useRealTimers(); }); mountTest(BackTop); rtlTest(BackTop); it('should scroll to top after click it', async () => { const { container } = render(); - const scrollToSpy = jest.spyOn(window, 'scrollTo').mockImplementation((_, y) => { + const scrollToSpy = vi.spyOn(window, 'scrollTo').mockImplementation((_, y) => { window.scrollY = y; window.pageYOffset = y; document.documentElement.scrollTop = y; @@ -31,20 +31,20 @@ describe('BackTop', () => { }); it('support onClick', () => { - const onClick = jest.fn(); + const onClick = vi.fn(); const { container } = render(); fireEvent.click(container.querySelector('.ant-back-top')!); expect(onClick).toHaveBeenCalled(); }); it('invalid target', () => { - const onClick = jest.fn(); + const onClick = vi.fn(); const { container } = render(); fireEvent.click(container.querySelector('.ant-back-top')!); expect(onClick).toHaveBeenCalled(); }); it('should console Error', () => { - const errSpy = jest.spyOn(console, 'error').mockImplementation(() => {}); + const errSpy = vi.spyOn(console, 'error').mockImplementation(() => {}); render(); expect(errSpy).toHaveBeenCalledWith( 'Warning: [antd: BackTop] `BackTop` is deprecated, please use `FloatButton.BackTop` instead.', diff --git a/components/badge/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/badge/__tests__/__snapshots__/demo-extend.test.ts.snap index e5231453e9ee..85b868d8ec30 100644 --- a/components/badge/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/badge/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -1,4 +1,4 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html exports[`renders components/badge/demo/basic.tsx extend context correctly 1`] = `
render Badge status/color when contains children 1`] = `
`; -exports[`Badge render correct with negative number 1`] = ` +exports[`Badge > render correct with negative number 1`] = `
`; -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`] = ` `; -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`] = ` @@ -190,7 +190,7 @@ exports[`Badge rtl render component should be rendered correctly in RTL directio `; -exports[`Badge should be compatible with borderColor style 1`] = ` +exports[`Badge > should be compatible with borderColor style 1`] = ` @@ -214,7 +214,7 @@ exports[`Badge should be compatible with borderColor style 1`] = ` `; -exports[`Badge should display custom color and number is 0 1`] = ` +exports[`Badge > should display custom color and number is 0 1`] = `
`; -exports[`Badge should render when count is changed 1`] = ` +exports[`Badge > should render when count is changed 1`] = ` @@ -358,7 +358,7 @@ exports[`Badge should render when count is changed 1`] = ` `; -exports[`Badge should render when count is changed 2`] = ` +exports[`Badge > should render when count is changed 2`] = ` @@ -451,7 +451,7 @@ exports[`Badge should render when count is changed 2`] = ` `; -exports[`Badge should render when count is changed 3`] = ` +exports[`Badge > should render when count is changed 3`] = ` @@ -485,7 +485,7 @@ exports[`Badge should render when count is changed 3`] = ` `; -exports[`Badge should render when count is changed 4`] = ` +exports[`Badge > should render when count is changed 4`] = ` @@ -499,7 +499,7 @@ exports[`Badge should render when count is changed 4`] = ` `; -exports[`Badge should render when count is changed 5`] = ` +exports[`Badge > should render when count is changed 5`] = ` @@ -532,7 +532,7 @@ exports[`Badge should render when count is changed 5`] = ` `; -exports[`Badge should render when count is changed 6`] = ` +exports[`Badge > should render when count is changed 6`] = ` @@ -615,7 +615,7 @@ exports[`Badge should render when count is changed 6`] = ` `; -exports[`Badge should support offset when count is a ReactNode 1`] = ` +exports[`Badge > should support offset when count is a ReactNode 1`] = ` diff --git a/components/badge/__tests__/__snapshots__/ribbon.test.tsx.snap b/components/badge/__tests__/__snapshots__/ribbon.test.tsx.snap index 6a4f0245ab74..237c04e86dfd 100644 --- a/components/badge/__tests__/__snapshots__/ribbon.test.tsx.snap +++ b/components/badge/__tests__/__snapshots__/ribbon.test.tsx.snap @@ -1,6 +1,6 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html -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`] = `
diff --git a/components/badge/__tests__/index.test.tsx b/components/badge/__tests__/index.test.tsx index 228297e38114..415690a07ed3 100644 --- a/components/badge/__tests__/index.test.tsx +++ b/components/badge/__tests__/index.test.tsx @@ -18,15 +18,15 @@ describe('Badge', () => { )); beforeEach(() => { - jest.useFakeTimers(); + vi.useFakeTimers(); }); afterEach(() => { - jest.useRealTimers(); + vi.useRealTimers(); }); it('no strict warning', () => { - const errSpy = jest.spyOn(console, 'error').mockImplementation(() => {}); + const errSpy = vi.spyOn(console, 'error').mockImplementation(() => {}); const { rerender } = render( @@ -83,7 +83,7 @@ describe('Badge', () => { act(() => { fireEvent.mouseEnter(container.querySelector('.ant-badge')!); - jest.runAllTimers(); + vi.runAllTimers(); }); expect(container.querySelector('.ant-tooltip-open')).toBeTruthy(); }); @@ -95,7 +95,7 @@ describe('Badge', () => { rerender(); act(() => { - jest.runAllTimers(); + vi.runAllTimers(); expect(asFragment().firstChild).toMatchSnapshot(); }); } diff --git a/components/breadcrumb/__tests__/Breadcrumb.test.tsx b/components/breadcrumb/__tests__/Breadcrumb.test.tsx index bf07b881b91e..970e78b35239 100644 --- a/components/breadcrumb/__tests__/Breadcrumb.test.tsx +++ b/components/breadcrumb/__tests__/Breadcrumb.test.tsx @@ -12,7 +12,7 @@ describe('Breadcrumb', () => { rtlTest(Breadcrumb); accessibilityTest(Breadcrumb); - const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {}); + const errorSpy = vi.spyOn(console, 'error').mockImplementation(() => {}); afterEach(() => { errorSpy.mockReset(); @@ -326,7 +326,7 @@ describe('Breadcrumb', () => { it('should console Error when `overlay` in props', () => { resetWarned(); - const errSpy = jest.spyOn(console, 'error').mockImplementation(() => {}); + const errSpy = vi.spyOn(console, 'error').mockImplementation(() => {}); render( test
} /> @@ -339,14 +339,14 @@ describe('Breadcrumb', () => { }); it('should not console Error when `overlay` not in props', () => { - const errSpy = jest.spyOn(console, 'error').mockImplementation(() => {}); + const errSpy = vi.spyOn(console, 'error').mockImplementation(() => {}); render(); expect(errSpy).not.toHaveBeenCalled(); errSpy.mockRestore(); }); it('should use `onClick`', async () => { - const onClick = jest.fn(); + const onClick = vi.fn(); const wrapper = render(); const item = await wrapper.findByText('test'); item.click(); diff --git a/components/breadcrumb/__tests__/__snapshots__/Breadcrumb.test.tsx.snap b/components/breadcrumb/__tests__/__snapshots__/Breadcrumb.test.tsx.snap index 2af8918a6be6..6773e26cc974 100644 --- a/components/breadcrumb/__tests__/__snapshots__/Breadcrumb.test.tsx.snap +++ b/components/breadcrumb/__tests__/__snapshots__/Breadcrumb.test.tsx.snap @@ -1,6 +1,6 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html -exports[`Breadcrumb filter React.Fragment 1`] = ` +exports[`Breadcrumb > filter React.Fragment 1`] = ` `; -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`] = ` `; -exports[`Breadcrumb should accept undefined items 1`] = ` +exports[`Breadcrumb > should accept undefined items 1`] = ` `; -exports[`Breadcrumb should allow Breadcrumb.Item is null or undefined 1`] = ` +exports[`Breadcrumb > should allow Breadcrumb.Item is null or undefined 1`] = ` `; -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`] = ` `; -exports[`Breadcrumb should render a menu 1`] = ` +exports[`Breadcrumb > should render a menu 1`] = ` `; -exports[`Breadcrumb should render correct 1`] = ` +exports[`Breadcrumb > should render correct 1`] = ` `; -exports[`Breadcrumb should support Breadcrumb.Item default separator 1`] = ` +exports[`Breadcrumb > should support Breadcrumb.Item default separator 1`] = ` `; -exports[`Breadcrumb should support React.Fragment and falsy children 1`] = ` +exports[`Breadcrumb > should support React.Fragment and falsy children 1`] = ` `; -exports[`Breadcrumb should support custom attribute 1`] = ` +exports[`Breadcrumb > should support custom attribute 1`] = `