diff --git a/TESTING.md b/TESTING.md index ff0758707..9b7ec006c 100644 --- a/TESTING.md +++ b/TESTING.md @@ -4,7 +4,7 @@ Please beware all features or bug fixes must be tested by one or more specs (uni ## Unit tests -For unit testing, we are using Jest along with [React Testing Library](https://testing-library.com/docs/intro) +For unit testing, we are using Vitest along with [React Testing Library](https://testing-library.com/docs/intro) and [jest-dom](https://github.com/testing-library/jest-dom/blob/master/README.md). Unit tests should primarily be used for testing component interactions. For testing the visual aspects of components, visual regression tests should be used. However, this does not mean that visual changes in components cannot be used for testing the result of interaction with the component. For example, it is completely valid to test whether the component content is not visible after closing a modal window. diff --git a/jest.config.ts b/jest.config.ts deleted file mode 100644 index 4a9a0dcde..000000000 --- a/jest.config.ts +++ /dev/null @@ -1,21 +0,0 @@ -export default { - roots: ['./src'], - setupFilesAfterEnv: ['/jest.setup.ts'], - moduleFileExtensions: ['js', 'ts', 'tsx', 'json'], - testPathIgnorePatterns: ['node_modules/'], - transform: { - '^.+\\.[tj]sx?$': [ - 'ts-jest', - { - tsconfig: 'tsconfig.build.json', - }, - ], - }, - transformIgnorePatterns: ['node_modules/(?!(styled-reset-advanced))'], - testMatch: ['./**/*.(test).(ts|tsx)'], - moduleNameMapper: { - '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga|css)$': - 'identity-obj-proxy', - }, - testEnvironment: 'jsdom', -}; diff --git a/package.json b/package.json index 427082823..b252f1289 100644 --- a/package.json +++ b/package.json @@ -58,12 +58,12 @@ "test:storybook:visual": "./visual-regressions/bin/take-and-check-in-docker.sh", "test:storybook:visual:update": "./visual-regressions/bin/take-and-update-in-docker.sh", "test:storybook:visual:ci": "./visual-regressions/bin/take-and-check-in-docker-ci.sh", - "test": "jest -w 4", - "test:watch": "jest --watch", + "test": "vitest --run", + "test:watch": "vitest", "test:a11y": "test-storybook --maxWorkers 4 --url=http://localhost:8008", "test:a11y:ci": "concurrently -k -s first -n \"SB,TEST\" -c \"magenta,blue\" \"http-server storybook-static --port 6006 --silent\" \"wait-on tcp:6006 && yarn test-storybook --maxWorkers 2 --shard ${SHARD}/${MAX_SHARDS}\"", "test:storybook:coverage": "test-storybook --coverage --coverageDirectory coverage/storybook --maxWorkers 4 --url=http://localhost:8008", - "test:unit:coverage": "yarn run test --coverage --coverageDirectory coverage/jest", + "test:unit:coverage": "yarn run test --coverage", "test:coverage": "yarn run test:unit:coverage & yarn run test:storybook:coverage", "types": "tsc -b", "lint": "eslint . --ext js,ts,jsx,tsx,md,mdx", @@ -140,11 +140,10 @@ "@storybook/test-runner": "^0.19.1", "@storybook/theming": "^8.4.4", "@testing-library/dom": ">=7.21.4", - "@testing-library/jest-dom": "^5.16.4", + "@testing-library/jest-dom": "^6.6.3", "@testing-library/react": "^12.1.4", "@testing-library/react-hooks": "^7.0.2", "@testing-library/user-event": "^13.5.0", - "@types/jest": "^29.5.12", "@types/node": "^22.5.5", "@types/react": "^18.3.1", "@types/react-dom": "^18.3.0", @@ -157,6 +156,7 @@ "@typescript-eslint/eslint-plugin": "^7.14.1", "@typescript-eslint/parser": "^7.14.1", "@vitejs/plugin-react": "^4.3.1", + "@vitest/coverage-v8": "2.1.7", "axe-playwright": "^2.0.3", "babel-plugin-styled-components": "^2.0.7", "concurrently": "^9.0.1", @@ -177,12 +177,11 @@ "eslint-plugin-react-hooks": "^4.0.4", "eslint-plugin-storybook": "^0.9.0", "eslint-plugin-testing-library": "^5.1.0", + "happy-dom": "^15.11.7", "history": "^5.3.0", "http-server": "^14.1.1", "husky": "^7.0.4", "identity-obj-proxy": "^3.0.0", - "jest": "^29.7.0", - "jest-environment-jsdom": "^29.7.0", "jest-styled-components": "^7.0.8", "knip": "^5.30.5", "lint-staged": "^12.3.7", @@ -210,13 +209,13 @@ "styled-components": "^5.3.3", "stylelint": "^16.6.1", "stylelint-config-standard": "^36.0.0", - "ts-jest": "^29.1.2", "ts-node": "^10.9.2", "tslib": "^2.6.2", "typescript": "^5.6.2", "vite": "^5.4.6", "vite-plugin-dts": "^4.2.1", "vite-require": "^0.2.3", + "vitest": "^2.1.7", "wait-on": "^8.0.1" }, "resolutions": { diff --git a/src/components/Accordion/Accordion.test.tsx b/src/components/Accordion/Accordion.test.tsx index a0e645a30..d0be1cc48 100644 --- a/src/components/Accordion/Accordion.test.tsx +++ b/src/components/Accordion/Accordion.test.tsx @@ -1,5 +1,6 @@ import { render, screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; +import { vi } from 'vitest'; import Accordion, { filterState } from './Accordion'; @@ -89,7 +90,7 @@ describe('Accordion', () => { }); it('should handle click events correctly, updating the state based on whether the item is already open and the `isCollapsedOnOpen` setting', () => { - const onChangeMock = jest.fn(); + const onChangeMock = vi.fn(); render( { const [controlledIsOpen, setControlledIsOpen] = useState(isOpen ?? false); @@ -76,7 +77,7 @@ describe('Collapsible', () => { expect(screen.queryByText('Collapsible content')).not.toBeInTheDocument(); }); it('should call "onOpen" on trigger click', async () => { - const onOpenMock = jest.fn(); + const onOpenMock = vi.fn(); renderWithProviders( Collapsible content @@ -87,7 +88,7 @@ describe('Collapsible', () => { expect(onOpenMock).toBeCalledTimes(1); }); it('should call "onOpen" only when is open', async () => { - const onOpenMock = jest.fn(); + const onOpenMock = vi.fn(); renderWithProviders( Collapsible content @@ -101,7 +102,7 @@ describe('Collapsible', () => { describe('controlled mode', () => { it('should toggle open state on trigger click', async () => { - const onOpenChangeMock = jest.fn(); + const onOpenChangeMock = vi.fn(); renderWithProviders( Collapsible content @@ -115,7 +116,7 @@ describe('Collapsible', () => { }); it('should toggle open state on external state change', async () => { - const onOpenChangeMock = jest.fn(); + const onOpenChangeMock = vi.fn(); renderWithProviders( Collapsible content @@ -129,7 +130,7 @@ describe('Collapsible', () => { }); it('should be opened when "isOpen" is true', () => { - const onOpenChangeMock = jest.fn(); + const onOpenChangeMock = vi.fn(); renderWithProviders( Collapsible content diff --git a/src/components/Datatable/BatchModule/BatchActions/BatchActions.test.tsx b/src/components/Datatable/BatchModule/BatchActions/BatchActions.test.tsx index 22363af2e..c6372369b 100644 --- a/src/components/Datatable/BatchModule/BatchActions/BatchActions.test.tsx +++ b/src/components/Datatable/BatchModule/BatchActions/BatchActions.test.tsx @@ -1,11 +1,12 @@ import { act, fireEvent, screen, waitFor } from '@testing-library/react'; +import { vi } from 'vitest'; import { renderWithProviders } from '../../../../utils/tests/renderWithProviders'; import { DatatableStore, datatableInitialState } from '../../Datatable.store'; import BatchActions from './BatchActions'; -const actionFnMock = jest.fn(); -const subactionFnMock = jest.fn(); +const actionFnMock = vi.fn(); +const subactionFnMock = vi.fn(); const actions = [ { label: 'Action', @@ -31,7 +32,7 @@ describe('Datatable/BatchActions', () => { DatatableStore.replace(datatableInitialState); }); afterEach(() => { - jest.resetAllMocks(); + vi.resetAllMocks(); }); describe('given exclusive selection is disabled', () => { diff --git a/src/components/Datatable/ControlsModule/ControlsModule.test.tsx b/src/components/Datatable/ControlsModule/ControlsModule.test.tsx index 6982f76be..5bde7203e 100644 --- a/src/components/Datatable/ControlsModule/ControlsModule.test.tsx +++ b/src/components/Datatable/ControlsModule/ControlsModule.test.tsx @@ -1,5 +1,6 @@ import { fireEvent, screen, waitFor } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; +import { vi } from 'vitest'; import { renderWithProviders } from '../../../utils/tests/renderWithProviders'; import { InputFilter } from '../../Filters/components'; @@ -162,7 +163,7 @@ describe('Datatable/ControlsModule', () => { describe('given search is enabled', () => { it('should perform search on mount when defaultValue is provided', async () => { - const onSearchMock = jest.fn(); + const onSearchMock = vi.fn(); renderWithProviders( { }); }); it('should not perform search when no defaultValue is provided', async () => { - const onSearchMock = jest.fn(); + const onSearchMock = vi.fn(); renderWithProviders( { expect(DatatableStore.getRawState().hasAppliedFilters).toBe(false); }); it('should store search query when perform search', async () => { - jest.useFakeTimers(); const query = 'Search query'; renderWithProviders( { await waitFor(() => expect(DatatableStore.getRawState().query).toBe(query), ); - jest.useRealTimers(); }); it('should clear search query on Clear button click', async () => { - jest.useFakeTimers(); const query = 'Search query'; renderWithProviders( { await waitFor(() => DatatableStore.getRawState().query === query); expect(DatatableStore.getRawState().query).toBe(''); - jest.useRealTimers(); }); }); }); diff --git a/src/components/Datatable/Datatable.test.tsx b/src/components/Datatable/Datatable.test.tsx index 1265c5184..b8584628b 100644 --- a/src/components/Datatable/Datatable.test.tsx +++ b/src/components/Datatable/Datatable.test.tsx @@ -3,6 +3,7 @@ import { screen, waitFor } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import { Column } from 'react-table'; import { filter } from 'ramda'; +import { vi } from 'vitest'; import { renderWithProviders } from '../../utils/tests/renderWithProviders'; import { fields } from '../Filters/mocks/options'; @@ -64,10 +65,10 @@ describe('Datatable', () => { DatatableStore.replace(datatableInitialState); }); afterEach(() => { - jest.resetAllMocks(); + vi.resetAllMocks(); }); it('should not call "onDataFetch" on mount', () => { - const onDataFetchMock = jest.fn(); + const onDataFetchMock = vi.fn(); renderWithProviders( @@ -83,10 +84,10 @@ describe('Datatable', () => { }); describe('on request cancelation', () => { it('should call "onCancelLoading"', () => { - const onCancelLoading = jest.fn(); + const onCancelLoading = vi.fn(); renderWithProviders( - onDataFetch={jest.fn()} + onDataFetch={vi.fn()} onCancelLoading={onCancelLoading} data={data} columns={columns} diff --git a/src/components/Datatable/Table/Table.test.tsx b/src/components/Datatable/Table/Table.test.tsx index 59838ba6d..2442fd926 100644 --- a/src/components/Datatable/Table/Table.test.tsx +++ b/src/components/Datatable/Table/Table.test.tsx @@ -1,6 +1,7 @@ import { act, screen, waitFor } from '@testing-library/react'; import { Column } from 'react-table'; import userEvent from '@testing-library/user-event'; +import { vi } from 'vitest'; import { renderWithProviders } from '../../../utils/tests/renderWithProviders'; import { DatatableStore, datatableInitialState } from '../Datatable.store'; @@ -40,7 +41,7 @@ describe('Datatable/Table', () => { DatatableStore.replace(datatableInitialState); }); afterEach(() => { - jest.resetAllMocks(); + vi.resetAllMocks(); }); it('should select all rows on Toggle All click', () => { @@ -134,7 +135,7 @@ describe('Datatable/Table', () => { }); }); it('should call onClick handler in row action dropdown with correct parameters', async () => { - const rowActionMock = jest.fn(); + const rowActionMock = vi.fn(); const rowIndex = 0; renderWithProviders( @@ -409,7 +410,7 @@ describe('Datatable/Table', () => { {...defaultTableConfig} isDataLoading isCancelDisabled={false} - onCancelLoading={jest.fn} + onCancelLoading={vi.fn} />, ); @@ -429,7 +430,7 @@ describe('Datatable/Table', () => { {...defaultTableConfig} isDataLoading isCancelDisabled - onCancelLoading={jest.fn} + onCancelLoading={vi.fn} />, ); diff --git a/src/components/Datatable/components/Search/Search.test.tsx b/src/components/Datatable/components/Search/Search.test.tsx index 2fa360399..77a31618e 100644 --- a/src/components/Datatable/components/Search/Search.test.tsx +++ b/src/components/Datatable/components/Search/Search.test.tsx @@ -1,24 +1,19 @@ /* eslint-disable testing-library/await-async-query */ import { screen, waitFor } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; +import { vi } from 'vitest'; -import { createIconLibrary, resetIconLibrary } from '../../../../theme'; import Search from './Search'; import { renderWithProviders } from '../../../../utils/tests/renderWithProviders'; -const onSearch = jest.fn(); -const onClear = jest.fn(); +const onSearch = vi.fn(); +const onClear = vi.fn(); describe('Search', () => { - beforeAll(() => { - createIconLibrary(); - }); afterEach(() => { - jest.clearAllMocks(); - }); - afterAll(() => { - resetIconLibrary(); + vi.clearAllMocks(); }); + it('should have defaultValue when provided', async () => { renderWithProviders( { it('should trigger search when value is changed', async () => { renderWithProviders(); const searchInput = screen.getByRole('searchbox'); - jest.useFakeTimers(); userEvent.type(searchInput, 'query'); expect(searchInput).toHaveValue('query'); await waitFor(() => expect(onSearch).toHaveBeenCalled()); - jest.useRealTimers(); }); it('should trigger search if value is empty', async () => { renderWithProviders( , ); const searchInput = screen.getByRole('searchbox'); - jest.useFakeTimers(); expect(searchInput).toHaveValue('ab'); userEvent.type(searchInput, '{Backspace}{Backspace}'); - await waitFor(() => expect(onSearch).toBeCalledWith('')); - jest.useRealTimers(); + await waitFor(() => expect(onSearch).toHaveBeenCalledWith('')); }); it('should not trigger search when value is invalid', async () => { renderWithProviders( @@ -77,7 +68,7 @@ describe('Search', () => { const searchInput = screen.getByRole('searchbox'); userEvent.type(searchInput, 'query{Enter}'); - await waitFor(() => expect(onSearch).not.toBeCalled()); + await waitFor(() => expect(onSearch).not.toHaveBeenCalled()); }); it('should validate according to pattern', () => { diff --git a/src/components/Datatable/hooks/useDataFetch.test.ts b/src/components/Datatable/hooks/useDataFetch.test.ts index 2a238f22a..4090a0a95 100644 --- a/src/components/Datatable/hooks/useDataFetch.test.ts +++ b/src/components/Datatable/hooks/useDataFetch.test.ts @@ -1,10 +1,11 @@ import { renderHook } from '@testing-library/react-hooks'; +import { vi } from 'vitest'; import { Operators } from '../../Filters/Filters.enums'; import { DatatableStore, datatableInitialState } from '../Datatable.store'; import { useDataFetch } from './useDataFetch'; -const fetchCallback = jest.fn(); +const fetchCallback = vi.fn(); const pageIndex = 10; const pageSize = 20; const sortBy = [{ id: 'colId', desc: true }]; @@ -26,7 +27,7 @@ describe('useDataFetch', () => { DatatableStore.replace(datatableInitialState); }); afterEach(() => { - jest.resetAllMocks(); + vi.resetAllMocks(); }); it('should not call callback funtion on init', () => { diff --git a/src/components/Datatable/hooks/useTableRowSelect.test.ts b/src/components/Datatable/hooks/useTableRowSelect.test.ts index 9aa9d6f47..d041bf15f 100644 --- a/src/components/Datatable/hooks/useTableRowSelect.test.ts +++ b/src/components/Datatable/hooks/useTableRowSelect.test.ts @@ -1,9 +1,10 @@ import { renderHook } from '@testing-library/react-hooks'; +import { vi } from 'vitest'; import { DatatableStore, datatableInitialState } from '../Datatable.store'; import { useTableRowSelect } from './useTableRowSelect'; -const selectCallback = jest.fn(); +const selectCallback = vi.fn(); const selectedRowIds = ['a', 'b', 'c']; describe('useTableRowSelect', () => { @@ -11,7 +12,7 @@ describe('useTableRowSelect', () => { DatatableStore.replace(datatableInitialState); }); afterEach(() => { - jest.resetAllMocks(); + vi.resetAllMocks(); }); it('should store default selected row ids on init', () => { diff --git a/src/components/DatatableV2/tests/columnResizing.test.tsx b/src/components/DatatableV2/tests/columnResizing.test.tsx index b752c73d7..b6bc9dfe5 100644 --- a/src/components/DatatableV2/tests/columnResizing.test.tsx +++ b/src/components/DatatableV2/tests/columnResizing.test.tsx @@ -1,5 +1,6 @@ import { fireEvent, screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; +import { vi } from 'vitest'; import { renderWithProviders } from '../../../utils/tests/renderWithProviders'; import Datatable from '../Datatable'; @@ -19,7 +20,7 @@ describe('DatatableV2/columnResizing', () => { describe('when is column resizing enabled', () => { it('should resize column by dragging handler', () => { - const columnSizeMock = jest.fn(); + const columnSizeMock = vi.fn(); renderWithProviders( { }); it('should resize column by using left and right arrow keys', async () => { - const columnSizeMock = jest.fn(); + const columnSizeMock = vi.fn(); renderWithProviders( { }); it('should not resize column by using other keys', async () => { - const columnSizeMock = jest.fn(); + const columnSizeMock = vi.fn(); renderWithProviders( { }); it('should reset column sizing on double click', async () => { - const columnSizeMock = jest.fn(); + const columnSizeMock = vi.fn(); renderWithProviders( { }); it.skip('should reset column sizing with column action', async () => { - const columnSizeMock = jest.fn(); + const columnSizeMock = vi.fn(); renderWithProviders( { }); it('should sort on header name click', async () => { - const sortCallback = jest.fn(); + const sortCallback = vi.fn(); renderWithProviders( { }); it('should disable sorting for specific column if in columns definition', async () => { - const sortCallback = jest.fn(); + const sortCallback = vi.fn(); renderWithProviders( { describe('when is sorting disabled', () => { it('should not sort on header name click', async () => { - const sortCallback = jest.fn(); + const sortCallback = vi.fn(); renderWithProviders( { userEvent.click(inputStartDate); @@ -18,7 +19,7 @@ const checkInputClick = ( describe('DateRangePicker', () => { it('should date range picker popping up when user clicks on the input ', async () => { - const handleChangeDate = jest.fn(); + const handleChangeDate = vi.fn(); renderWithProviders( { }); it('should call onchange when a start date or end date is picked', () => { - const handleChangeDate = jest.fn(); + const handleChangeDate = vi.fn(); renderWithProviders( { }); it('should determine selected date by input value', () => { - const handleChangeDate = jest.fn(); + const handleChangeDate = vi.fn(); renderWithProviders( { }); it('should change the default placeholder', () => { - const handleChangeDate = jest.fn(); + const handleChangeDate = vi.fn(); renderWithProviders( { }); it('should disable the dates outside the range', async () => { - const handleChangeDate = jest.fn(); + const handleChangeDate = vi.fn(); renderWithProviders( { , ); - const maxWidthValue = pxToRem('480'); + const maxWidthValue = '480px'; const drawer = screen.getByRole('dialog'); expect(drawer).toHaveStyle(`max-width: ${maxWidthValue}`); }); @@ -108,7 +108,7 @@ describe('Drawer', () => { }); it('should allow clicking on interactive elements in dropdown', async () => { - const dropdownClickMock = jest.fn(); + const dropdownClickMock = vi.fn(); renderWithProviders( { }); it('should should trigger the onClose when clicking on overlay', () => { - const onCloseMock = jest.fn(); + const onCloseMock = vi.fn(); renderWithProviders( { }); it('test_error_boundary_handles_invalid_size', () => { - const loggerSpy = jest + const loggerSpy = vi .spyOn(console, 'error') - .mockImplementation(() => jest.fn()); + .mockImplementation(() => vi.fn()); // @ts-expect-error testing runtime error const props: ErrorBoundaryProps = { size: 'invalid' }; expect(() => render()).toThrow( @@ -27,7 +28,7 @@ describe('ErrorBoundary Component', () => { it('test_error_boundary_passes_props', () => { const props: ErrorBoundaryProps = { size: 'lg', - onClick: jest.fn(), + onClick: vi.fn(), }; render(); userEvent.click(screen.getByText('Try Again')); diff --git a/src/components/Filters/Filters.test.tsx b/src/components/Filters/Filters.test.tsx index a82db854c..aa7a768c6 100644 --- a/src/components/Filters/Filters.test.tsx +++ b/src/components/Filters/Filters.test.tsx @@ -1,16 +1,17 @@ import { fireEvent, screen } from '@testing-library/react'; import selectEvent from 'react-select-event'; +import { vi } from 'vitest'; import { renderWithProviders } from '../../utils/tests/renderWithProviders'; import Filters from './Filters'; import { mockTestFields, mockTestState } from './mocks/options'; -const onApplyFnMock = jest.fn(); -const onCloseFnMock = jest.fn(); +const onApplyFnMock = vi.fn(); +const onCloseFnMock = vi.fn(); describe('Filters', () => { afterEach(() => { - jest.resetAllMocks(); + vi.resetAllMocks(); }); it('should display remove button when value exists', () => { @@ -208,7 +209,7 @@ describe('Filters', () => { }); it('should call "onCancel" when cancel button was clicked', () => { - const onCancel = jest.fn(); + const onCancel = vi.fn(); renderWithProviders( { let loggerSpy; beforeAll(() => { - loggerSpy = jest - .spyOn(console, 'error') - .mockImplementation(() => jest.fn()); + loggerSpy = vi.spyOn(console, 'error').mockImplementation(() => vi.fn()); }); afterAll(() => { loggerSpy.mockRestore(); diff --git a/src/components/Link/Link.test.tsx b/src/components/Link/Link.test.tsx index c74f44352..7c36dff74 100644 --- a/src/components/Link/Link.test.tsx +++ b/src/components/Link/Link.test.tsx @@ -1,4 +1,5 @@ import { render, screen } from '@testing-library/react'; +import { vi } from 'vitest'; import { renderWithProviders } from '../../utils/tests/renderWithProviders'; import * as requireRouterLink from '../../utils/require-router-link'; @@ -24,7 +25,7 @@ describe('Link', () => { }); it('should return null if react-router link import fails', () => { - jest.spyOn(requireRouterLink, 'requireRouterLink').mockReturnValue(null); + vi.spyOn(requireRouterLink, 'requireRouterLink').mockReturnValue(null); renderWithProviders(Empty); expect( screen.queryByRole('link', { name: /Empty/i }), diff --git a/src/components/Modal/Modal.test.tsx b/src/components/Modal/Modal.test.tsx index 2a567b282..5d93cf7ee 100644 --- a/src/components/Modal/Modal.test.tsx +++ b/src/components/Modal/Modal.test.tsx @@ -1,12 +1,13 @@ import { screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; +import { vi } from 'vitest'; import { renderWithProviders } from '../../utils/tests/renderWithProviders'; import Modal from './Modal'; describe('Modal', () => { it('should should trigger the onClose when clicking on overlay', () => { - const onCloseMock = jest.fn(); + const onCloseMock = vi.fn(); renderWithProviders( Content diff --git a/src/components/Pagination/PageButtons.test.tsx b/src/components/Pagination/PageButtons.test.tsx index f4d810cb2..fdbb5591f 100644 --- a/src/components/Pagination/PageButtons.test.tsx +++ b/src/components/Pagination/PageButtons.test.tsx @@ -1,5 +1,6 @@ import { screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; +import { vi } from 'vitest'; import { renderWithProviders } from '../../utils/tests/renderWithProviders'; import PageButtons, { calculatePagePositions } from './PageButtons'; @@ -31,7 +32,7 @@ describe('calculatePageButtons', () => { describe('Pagination/PageButtons', () => { afterEach(() => { - jest.resetAllMocks(); + vi.resetAllMocks(); }); it('should show all page buttons when page count is less than number of positions', () => { const pageCount = 3; @@ -39,7 +40,9 @@ describe('Pagination/PageButtons', () => { { + vi.fn(); + }} positions={8} />, ); @@ -53,7 +56,9 @@ describe('Pagination/PageButtons', () => { { + vi.fn(); + }} positions={8} />, ); @@ -62,7 +67,7 @@ describe('Pagination/PageButtons', () => { }); it('should call onChange handler with correct parameters', () => { - const changeMock = jest.fn(); + const changeMock = vi.fn(); renderWithProviders( { afterEach(() => { - jest.resetAllMocks(); + vi.resetAllMocks(); }); it('should render custom item function instead of default one', () => { - const customRenderItem = jest.fn(); + const customRenderItem = vi.fn(); customRenderItem.mockImplementation((props) => (
)); @@ -31,8 +32,8 @@ describe('Custom renderItem prop', () => { }); it('should pass on click events', () => { - const customRenderItem = jest.fn(); - const onPageChange = jest.fn(); + const customRenderItem = vi.fn(); + const onPageChange = vi.fn(); customRenderItem.mockImplementation((props) => (