diff --git a/src/traces/__snapshots__/tracePlot.component.test.tsx.snap b/src/traces/__snapshots__/tracePlot.component.test.tsx.snap index 0b49e6e58..a2a835c32 100644 --- a/src/traces/__snapshots__/tracePlot.component.test.tsx.snap +++ b/src/traces/__snapshots__/tracePlot.component.test.tsx.snap @@ -1,13 +1,13 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html -exports[`Trace plot component renders a canvas element with the correct attributes passed the correct props 1`] = ` +exports[`Trace plot component > renders a canvas element with the correct attributes passed the correct props 1`] = `
`; -exports[`Trace plot component updates data object correctly when points are set to visible 1`] = ` +exports[`Trace plot component > updates data object correctly when points are set to visible 1`] = `
{ +vi.mock('../windows/windowPortal.component', () => { // eslint-disable-next-line @typescript-eslint/no-var-requires const ReactMock = require('react'); - return ReactMock.forwardRef(({ children }, ref) => ( - // eslint-disable-next-line @typescript-eslint/ban-ts-comment - // @ts-ignore - {children} - )); + return { + default: ReactMock.forwardRef(({ children }, ref) => ( + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore + {children} + )), + }; }); -jest.mock('./tracePlot.component', () => () => ( +vi.mock('./tracePlot.component', () => { // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore - -)); + return { default: () => }; +}); describe('Trace Window component', () => { let testTraceConfig: TraceOrImageWindow; @@ -55,7 +57,7 @@ describe('Trace Window component', () => { }); it('renders correctly while waveform is loading', () => { - const loadingHandler = (req, res, ctx) => { + const loadingHandler = () => { // taken from https://github.com/mswjs/msw/issues/778 - a way of mocking pending promises without breaking jest return new Promise(() => undefined); }; diff --git a/src/views/__snapshots__/recordTable.component.test.tsx.snap b/src/views/__snapshots__/recordTable.component.test.tsx.snap index 2f3186c44..221529dc9 100644 --- a/src/views/__snapshots__/recordTable.component.test.tsx.snap +++ b/src/views/__snapshots__/recordTable.component.test.tsx.snap @@ -1,6 +1,6 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html -exports[`Record Table renders correctly 1`] = ` +exports[`Record Table > renders correctly 1`] = `
`; -exports[`Record Table renders correctly while data count is zero 1`] = ` +exports[`Record Table > renders correctly while data count is zero 1`] = `
`; -exports[`Record Table renders correctly while loading 1`] = ` +exports[`Record Table > renders correctly while loading 1`] = `
renders the buttons 1`] = `
renders correctly 1`] = `
{ beforeEach(() => { state = getInitialState(); - jest - .spyOn(global.crypto, 'randomUUID') - .mockImplementation(() => `${++uuidCount}`); + vi.spyOn(global.crypto, 'randomUUID').mockImplementation( + () => `${++uuidCount}` + ); }); afterEach(() => { @@ -57,7 +57,7 @@ describe('Record Table', () => { }); it('renders correctly while loading', () => { - const loadingHandler = (req, res, ctx) => { + const loadingHandler = () => { // taken from https://github.com/mswjs/msw/issues/778 - a way of mocking pending promises without breaking jest return new Promise(() => undefined); }; @@ -73,12 +73,8 @@ describe('Record Table', () => { it('renders correctly while data count is zero', async () => { server.use( - http.get('/records', (req, res, ctx) => { - return res(ctx.status(200), ctx.json([])); - }), - http.get('/records/count', (req, res, ctx) => { - return res(ctx.status(200), ctx.json(0)); - }) + http.get('/records', () => HttpResponse.json([], { status: 200 })), + http.get('/records/count', () => HttpResponse.json(0, { status: 200 })) ); const view = createView(); @@ -95,9 +91,9 @@ describe('Record Table', () => { const user = userEvent.setup(); server.use( - http.get('/records', (req, res, ctx) => { - return res(ctx.status(200), ctx.json(recordsJson.slice(0, 3))); - }) + http.get('/records', () => + HttpResponse.json(recordsJson.slice(0, 3), { status: 200 }) + ) ); const { store } = createView({ table: { ...state.table }, @@ -120,9 +116,9 @@ describe('Record Table', () => { it('can select single and multiple rows', async () => { const user = userEvent.setup(); server.use( - http.get('/records', (req, res, ctx) => { - return res(ctx.status(200), ctx.json(recordsJson)); - }) + http.get('/records', () => + HttpResponse.json(recordsJson, { status: 200 }) + ) ); const { store } = createView({ table: { ...state.table }, @@ -270,9 +266,9 @@ describe('Record Table', () => { ...recordsJson.slice(recordToModifyIndex + 1), ]; server.use( - http.get('/records', (req, res, ctx) => { - return res(ctx.status(200), ctx.json(modifiedRecords)); - }) + http.get('/records', () => + HttpResponse.json(modifiedRecords, { status: 200 }) + ) ); createView({ diff --git a/src/windows/__snapshots__/openWindows.component.test.tsx.snap b/src/windows/__snapshots__/openWindows.component.test.tsx.snap index c62fa222a..23b3d461d 100644 --- a/src/windows/__snapshots__/openWindows.component.test.tsx.snap +++ b/src/windows/__snapshots__/openWindows.component.test.tsx.snap @@ -1,6 +1,6 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html -exports[`Open Windows component renders windows for each open window 1`] = ` +exports[`Open Windows component > renders windows for each open window 1`] = ` renders correctly when loading 1`] = `
`; -exports[`Thumbnail selector component renders list of thumbnails and pagination controls 1`] = ` +exports[`Thumbnail selector component > renders list of thumbnails and pagination controls 1`] = `
Image buttons component > renders image buttons group 1`] = `
`; -exports[`Window buttons components Plot buttons component renders plot buttons group 1`] = ` +exports[`Window buttons components > Plot buttons component > renders plot buttons group 1`] = `
`; -exports[`Window buttons components Trace buttons component renders trace buttons group 1`] = ` +exports[`Window buttons components > Trace buttons component > renders trace buttons group 1`] = `
renders child in separate document and initialises event listeners & scripts, and handles unmounting correctly 1`] = `
-
@@ -22,15 +16,9 @@ exports[`Window portal component renders child in separate document and initiali `; -exports[`Window portal component renders with theme inherited from ThemeProvider 1`] = ` +exports[`Window portal component > renders with theme inherited from ThemeProvider 1`] = `
-
diff --git a/src/windows/openWindows.component.test.tsx b/src/windows/openWindows.component.test.tsx index 4ce98d941..7c72e030f 100644 --- a/src/windows/openWindows.component.test.tsx +++ b/src/windows/openWindows.component.test.tsx @@ -8,46 +8,58 @@ import { import OpenWindows from './openWindows.component'; // need to mock to avoid errors -jest.mock('../plotting/plotWindow.component', () => (props) => ( - // eslint-disable-next-line @typescript-eslint/ban-ts-comment - // @ts-ignore - - {Object.entries(props).map( - ([propName, propValue]) => - `${propName}=${JSON.stringify(propValue, null, 2)}\n` - )} - {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */} - {/* @ts-ignore */} - -)); +vi.mock('../plotting/plotWindow.component', () => { + return { + default: (props) => ( + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore + + {Object.entries(props).map( + ([propName, propValue]) => + `${propName}=${JSON.stringify(propValue, null, 2)}\n` + )} + {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */} + {/* @ts-ignore */} + + ), + }; +}); // need to mock to avoid errors -jest.mock('../traces/traceWindow.component', () => (props) => ( - // eslint-disable-next-line @typescript-eslint/ban-ts-comment - // @ts-ignore - - {Object.entries(props).map( - ([propName, propValue]) => - `${propName}=${JSON.stringify(propValue, null, 2)}\n` - )} - {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */} - {/* @ts-ignore */} - -)); +vi.mock('../traces/traceWindow.component', () => { + return { + default: (props) => ( + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore + + {Object.entries(props).map( + ([propName, propValue]) => + `${propName}=${JSON.stringify(propValue, null, 2)}\n` + )} + {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */} + {/* @ts-ignore */} + + ), + }; +}); // need to mock to avoid errors -jest.mock('../images/imageWindow.component', () => (props) => ( - // eslint-disable-next-line @typescript-eslint/ban-ts-comment - // @ts-ignore - - {Object.entries(props).map( - ([propName, propValue]) => - `${propName}=${JSON.stringify(propValue, null, 2)}\n` - )} - {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */} - {/* @ts-ignore */} - -)); +vi.mock('../images/imageWindow.component', () => { + return { + default: (props) => ( + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore + + {Object.entries(props).map( + ([propName, propValue]) => + `${propName}=${JSON.stringify(propValue, null, 2)}\n` + )} + {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */} + {/* @ts-ignore */} + + ), + }; +}); describe('Open Windows component', () => { let state: RootState; diff --git a/src/windows/thumbnailSelector.component.test.tsx b/src/windows/thumbnailSelector.component.test.tsx index 6941a9dc7..0e7981146 100644 --- a/src/windows/thumbnailSelector.component.test.tsx +++ b/src/windows/thumbnailSelector.component.test.tsx @@ -1,6 +1,6 @@ import { screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; -import { http } from 'msw'; +import { http, HttpResponse } from 'msw'; import { server } from '../mocks/server'; import { RootState } from '../state/store'; import { getInitialState, renderComponentWithProviders } from '../testUtils'; @@ -40,7 +40,7 @@ describe('Thumbnail selector component', () => { }); it('renders correctly when loading', () => { - const loadingHandler = (req, res, ctx) => { + const loadingHandler = () => { // taken from https://github.com/mswjs/msw/issues/778 - a way of mocking pending promises without breaking jest return new Promise(() => undefined); }; @@ -104,9 +104,7 @@ describe('Thumbnail selector component', () => { it('displays max shots as the max pagination when record count is more than it', async () => { server.use( - http.get('/records/count', (req, res, ctx) => { - return res(ctx.status(200), ctx.json(100)); - }) + http.get('/records/count', () => HttpResponse.json(100, { status: 200 })) ); createView();