DSEGOG-341 Initial migration from jest to vitest (App.test.tsx working)

package.json

@@ -49,9 +49,9 @@
     "preview": "vite preview",
     "preview:build": "yarn build && yarn preview",
     "preview:build:dev": "yarn build --watch & yarn preview",
+    "test": "vitest --coverage",
     "lint:js": "eslint --max-warnings=0 --ext=tsx --ext=ts --ext=js --ext=jsx --fix ./src",
     "serve:build": "yarn build && serve -l 5001 build",
-    "test": "craco test --env=jsdom --coverage --watchAll=false",
     "test:watch": "craco test --env=jsdom --watch",
     "playwright:test:mocked": "docker run -v $PWD:/test -w=/test $(node -e \"if(process.env.CI !== 'true'){if(process.platform === 'win32'){console.log('-it -u pwuser')}else{console.log('-it -u $(id -u):$(id -g)')}}else{console.log('-e CI')}\") --rm --ipc=host -p 9323:9323 --add-host host.docker.internal:host-gateway mcr.microsoft.com/playwright:v$(yarn info @playwright/test --name-only --json | sed -n 's/^.*:\\(.*\\)\"$/\\1/p') yarn playwright test",
     "playwright:test:real": "docker run -v $PWD:/test -w=/test -e \"USE_REAL_API=true\" $(node -e \"if(process.env.CI !== 'true'){if(process.platform === 'win32'){console.log('-it -u pwuser')}else{console.log('-it -u $(id -u):$(id -g)')}}else{console.log('-e CI')}\") --rm --ipc=host -p 9323:9323 --add-host host.docker.internal:host-gateway mcr.microsoft.com/playwright:v$(yarn info @playwright/test --name-only --json | sed -n 's/^.*:\\(.*\\)\"$/\\1/p') yarn playwright test",
@@ -108,6 +108,7 @@
     "@typescript-eslint/eslint-plugin": "7.17.0",
     "@typescript-eslint/parser": "7.17.0",
     "@typescript-eslint/typescript-estree": "7.17.0",
+    "@vitest/coverage-v8": "^2.0.5",
     "chart.js": "4.4.1",
     "chartjs-plugin-zoom": "2.0.0",
     "cross-env": "7.0.3",
@@ -123,12 +124,15 @@
     "husky": "9.1.1",
     "jest-canvas-mock": "2.5.0",
     "jest-fail-on-console": "3.3.0",
+    "jsdom": "^24.1.1",
     "lint-staged": "15.2.0",
     "msw": "2.3.5",
     "prettier": "3.3.3",
     "serve": "14.2.0",
     "serve-static": "1.15.0",
-    "start-server-and-test": "2.0.0"
+    "start-server-and-test": "2.0.0",
+    "vitest": "^2.0.5",
+    "vitest-canvas-mock": "^0.3.3"
   },
   "msw": {
     "workerDirectory": "public"

src/App.test.tsx

@@ -1,10 +1,10 @@
-import React from 'react';
 import { act } from '@testing-library/react';
-import App from './App';
+import React from 'react';
 import { createRoot } from 'react-dom/client';
-import { flushPromises } from './setupTests';
+import App from './App';
+import { flushPromises } from './testUtils';
 
-jest.mock('loglevel');
+vi.mock('loglevel');
 
 describe('App', () => {
   it('renders without crashing', async () => {

src/api/channels.test.tsx

@@ -1,22 +1,22 @@
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
 import { renderHook, waitFor } from '@testing-library/react';
+import { http } from 'msw';
+import { FullChannelMetadata, timeChannelName } from '../app.types';
+import { server } from '../mocks/server';
+import { RootState } from '../state/store';
 import {
-  useChannels,
-  useAvailableColumns,
+  getInitialState,
+  hooksWrapperWithProviders,
+  testChannels,
+} from '../testUtils';
+import {
+  ChannelSummary,
   getScalarChannels,
   staticChannels,
+  useAvailableColumns,
+  useChannels,
   useChannelSummary,
-  ChannelSummary,
 } from './channels';
-import { FullChannelMetadata, timeChannelName } from '../app.types';
-import {
-  hooksWrapperWithProviders,
-  getInitialState,
-  testChannels,
-} from '../setupTests';
-import { RootState } from '../state/store';
-import { server } from '../mocks/server';
-import { http } from 'msw';
 
 describe('channels api functions', () => {
   afterEach(() => {

src/api/experiment.test.tsx

@@ -1,8 +1,8 @@
 import { renderHook, waitFor } from '@testing-library/react';
-import { useExperiment } from './experiment';
 import { ExperimentParams } from '../app.types';
-import { hooksWrapperWithProviders } from '../setupTests';
 import experimentsJson from '../mocks/experiments.json';
+import { hooksWrapperWithProviders } from '../testUtils';
+import { useExperiment } from './experiment';
 
 describe('channels api functions', () => {
   afterEach(() => {

src/api/export.test.tsx

@@ -1,8 +1,8 @@
-import axios from 'axios';
-import { useExportData } from './export';
 import { renderHook, waitFor } from '@testing-library/react';
-import { hooksWrapperWithProviders, getInitialState } from '../setupTests';
+import axios from 'axios';
 import { RootState } from '../state/store';
+import { getInitialState, hooksWrapperWithProviders } from '../testUtils';
+import { useExportData } from './export';
 
 describe('useExportData', () => {
   let state: RootState;

src/api/images.test.tsx

@@ -1,8 +1,7 @@
-import { waitFor } from '@testing-library/react';
-import { renderHook } from '@testing-library/react';
-import { hooksWrapperWithProviders, waitForRequest } from '../setupTests';
-import { useColourBar, useColourMaps, useImage } from './images';
+import { renderHook, waitFor } from '@testing-library/react';
 import colourMapsJson from '../mocks/colourMaps.json';
+import { hooksWrapperWithProviders, waitForRequest } from '../testUtils';
+import { useColourBar, useColourMaps, useImage } from './images';
 
 describe('images api functions', () => {
   afterEach(() => {

src/api/records.test.tsx

@@ -1,4 +1,6 @@
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
+import { renderHook, waitFor } from '@testing-library/react';
+import { parseISO } from 'date-fns';
 import {
   PlotDataset,
   Record,
@@ -7,28 +9,26 @@ import {
   SelectedPlotChannel,
   timeChannelName,
 } from '../app.types';
+import { operators, parseFilter, Token } from '../filtering/filterParser';
+import recordsJson from '../mocks/records.json';
+import { MAX_SHOTS_VALUES } from '../search/components/maxShots.component';
+import { RootState } from '../state/store';
 import {
-  hooksWrapperWithProviders,
-  getInitialState,
   createTestQueryClient,
+  getInitialState,
+  hooksWrapperWithProviders,
   waitForRequest,
-} from '../setupTests';
-import { renderHook, waitFor } from '@testing-library/react';
+} from '../testUtils';
 import {
   getFormattedAxisData,
+  useDateToShotnumConverter,
+  useIncomingRecordCount,
   usePlotRecords,
   useRecordCount,
-  useIncomingRecordCount,
   useRecordsPaginated,
-  useThumbnails,
   useShotnumToDateConverter,
-  useDateToShotnumConverter,
+  useThumbnails,
 } from './records';
-import { RootState } from '../state/store';
-import { parseISO } from 'date-fns';
-import { operators, parseFilter, Token } from '../filtering/filterParser';
-import { MAX_SHOTS_VALUES } from '../search/components/maxShots.component';
-import recordsJson from '../mocks/records.json';
 
 describe('records api functions', () => {
   let state: RootState;

src/api/sessions.test.tsx

@@ -1,14 +1,14 @@
 import { renderHook, waitFor } from '@testing-library/react';
+import { Session, SessionListItem } from '../app.types';
+import sessionsListJSON from '../mocks/sessionsList.json';
+import { hooksWrapperWithProviders } from '../testUtils';
 import {
   useDeleteSession,
   useEditSession,
   useSaveSession,
   useSession,
   useSessionList,
 } from './sessions';
-import { Session, SessionListItem } from '../app.types';
-import { hooksWrapperWithProviders } from '../setupTests';
-import sessionsListJSON from '../mocks/sessionsList.json';
 
 describe('session api functions', () => {
   let mockData: Session;

src/api/userPreferences.test.tsx

@@ -1,9 +1,9 @@
 import { renderHook, waitFor } from '@testing-library/react';
-import { hooksWrapperWithProviders } from '../setupTests';
-import { useUpdateUserPreference, useUserPreference } from './userPreferences';
-import { PREFERRED_COLOUR_MAP_PREFERENCE_NAME } from '../settingsMenuItems.component';
 import axios from 'axios';
 import { setMockedPreferredColourMap } from '../mocks/handlers';
+import { PREFERRED_COLOUR_MAP_PREFERENCE_NAME } from '../settingsMenuItems.component';
+import { hooksWrapperWithProviders } from '../testUtils';
+import { useUpdateUserPreference, useUserPreference } from './userPreferences';
 
 describe('user preferences api functions', () => {
   const axiosPost = jest.spyOn(axios, 'post');

src/api/waveforms.test.tsx

@@ -1,6 +1,5 @@
-import { waitFor } from '@testing-library/react';
-import { renderHook } from '@testing-library/react';
-import { hooksWrapperWithProviders } from '../setupTests';
+import { renderHook, waitFor } from '@testing-library/react';
+import { hooksWrapperWithProviders } from '../testUtils';
 import { useWaveform } from './waveforms';
 
 describe('waveform api functions', () => {

src/channels/channelMetadataPanel.component.test.tsx

@@ -1,12 +1,11 @@
+import { QueryClient } from '@tanstack/react-query';
 import { screen } from '@testing-library/react';
-import React from 'react';
-import ChannelMetadataPanel from './channelMetadataPanel.component';
+import userEvent from '@testing-library/user-event';
+import { staticChannels } from '../api/channels';
 import { FullChannelMetadata } from '../app.types';
-import { QueryClient } from '@tanstack/react-query';
-import { renderComponentWithProviders } from '../setupTests';
 import { RootState } from '../state/store';
-import { staticChannels } from '../api/channels';
-import userEvent from '@testing-library/user-event';
+import { renderComponentWithProviders } from '../testUtils';
+import ChannelMetadataPanel from './channelMetadataPanel.component';
 
 describe('Channel Metadata Panel', () => {
   let displayedChannel: FullChannelMetadata | undefined;

src/channels/channelSearch.component.test.tsx

@@ -1,6 +1,6 @@
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { testChannels } from '../setupTests';
+import { testChannels } from '../testUtils';
 import ChannelSearch from './channelSearch.component';
 
 describe('Channel Search', () => {

src/channels/channelsDialogue.component.test.tsx

@@ -3,12 +3,12 @@ import { act, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import React from 'react';
 import { staticChannels } from '../api/channels';
+import { RootState } from '../state/store';
 import {
   getInitialState,
   renderComponentWithProviders,
   testChannels,
-} from '../setupTests';
-import { RootState } from '../state/store';
+} from '../testUtils';
 import ChannelsDialogue, {
   selectChannelTree,
   TreeNode,

src/export/exportButton.component.test.tsx

@@ -1,8 +1,7 @@
 import { screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { renderComponentWithProviders } from '../setupTests';
+import { renderComponentWithProviders } from '../testUtils';
 import ExportButton from './exportButton.component';
-import React from 'react';
 
 describe('ExportButton', () => {
   let user: ReturnType<typeof userEvent.setup>;

src/export/exportDialogue.component.test.tsx

@@ -1,7 +1,7 @@
 import { screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { useExportData } from '../api/export';
-import { renderComponentWithProviders } from '../setupTests';
+import { renderComponentWithProviders } from '../testUtils';
 import ExportDialogue from './exportDialogue.component';
 
 jest.mock('../api/export', () => ({

src/filtering/filterDialogue.component.test.tsx

@@ -6,8 +6,8 @@ import { http } from 'msw';
 import React from 'react';
 import recordsJson from '../mocks/records.json';
 import { server } from '../mocks/server';
-import { getInitialState, renderComponentWithProviders } from '../setupTests';
 import { RootState } from '../state/store';
+import { getInitialState, renderComponentWithProviders } from '../testUtils';
 import FilterDialogue from './filterDialogue.component';
 import { operators, Token } from './filterParser';
 

src/images/falseColourPanel.component.test.tsx

@@ -1,7 +1,7 @@
 import { fireEvent, screen, waitFor, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import React from 'react';
-import { flushPromises, renderComponentWithProviders } from '../setupTests';
+import { flushPromises, renderComponentWithProviders } from '../testUtils';
 import FalseColourPanel from './falseColourPanel.component';
 
 describe('False colour panel component', () => {

src/images/imageView.component.test.tsx

@@ -1,5 +1,5 @@
 import { fireEvent, render, screen } from '@testing-library/react';
-import { flushPromises } from '../setupTests';
+import { flushPromises } from '../testUtils';
 import ImageView, { ImageViewProps } from './imageView.component';
 
 describe('Image view component', () => {

src/images/imageWindow.component.test.tsx

@@ -3,8 +3,8 @@ import userEvent from '@testing-library/user-event';
 import { http } from 'msw';
 import { DEFAULT_WINDOW_VARS } from '../app.types';
 import { server } from '../mocks/server';
-import { renderComponentWithProviders } from '../setupTests';
 import { TraceOrImageWindow } from '../state/slices/windowSlice';
+import { renderComponentWithProviders } from '../testUtils';
 import ImageWindow from './imageWindow.component';
 
 jest.mock('../windows/windowPortal.component', () => {

src/plotting/plot.component.test.tsx

@@ -1,6 +1,6 @@
 import { render } from '@testing-library/react';
 import React from 'react';
-import { testPlotDatasets } from '../setupTests';
+import { testPlotDatasets } from '../testUtils';
 import Plot, { PlotProps } from './plot.component';
 import { deepCopySelectedPlotChannels } from './util';
 

src/plotting/plotList.component.test.tsx

@@ -1,7 +1,7 @@
 import { screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { getInitialState, renderComponentWithStore } from '../setupTests';
 import { RootState } from '../state/store';
+import { getInitialState, renderComponentWithStore } from '../testUtils';
 import PlotList from './plotList.component';
 
 describe('Plot List component', () => {

src/plotting/plotSettings/moreOptions/moreOptionsBox.component.test.tsx

@@ -2,7 +2,7 @@ import type { RenderResult } from '@testing-library/react';
 import { fireEvent, render, screen, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { SelectedPlotChannel } from '../../../app.types';
-import { testPlotDatasets } from '../../../setupTests';
+import { testPlotDatasets } from '../../../testUtils';
 import { deepCopySelectedPlotChannels } from '../../util';
 import type { MoreOptionsProps } from './moreOptionsBox.component';
 import MoreOptionsBox from './moreOptionsBox.component';

src/plotting/plotSettings/moreOptions/moreOptionsToggle.component.test.tsx

@@ -2,7 +2,7 @@ import type { RenderResult } from '@testing-library/react';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { SelectedPlotChannel } from '../../../app.types';
-import { testPlotDatasets } from '../../../setupTests';
+import { testPlotDatasets } from '../../../testUtils';
 import type { MoreOptionsProps } from './moreOptionsBox.component';
 import MoreOptionsToggle from './moreOptionsToggle.component';
 

src/plotting/plotSettings/plotSettingsController.component.test.tsx

@@ -2,7 +2,7 @@ import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { staticChannels } from '../../api/channels';
 import { FullScalarChannelMetadata } from '../../app.types';
-import { testScalarChannels } from '../../setupTests';
+import { testScalarChannels } from '../../testUtils';
 import type { PlotSettingsControllerProps } from './plotSettingsController.component';
 
 describe('Plot Settings component', () => {

src/plotting/plotSettings/xAxisTab.component.test.tsx

@@ -6,7 +6,7 @@ import {
   applyDatePickerWorkaround,
   cleanupDatePickerWorkaround,
   testScalarChannels,
-} from '../../setupTests';
+} from '../../testUtils';
 import type { XAxisTabProps } from './xAxisTab.component';
 import XAxisTab from './xAxisTab.component';
 

src/plotting/plotSettings/yAxisTab.component.test.tsx

@@ -4,7 +4,7 @@ import userEvent from '@testing-library/user-event';
 import React from 'react';
 import { staticChannels } from '../../api/channels';
 import { FullScalarChannelMetadata } from '../../app.types';
-import { testScalarChannels } from '../../setupTests';
+import { testScalarChannels } from '../../testUtils';
 import { COLOUR_ORDER } from './colourGenerator';
 import type { YAxisTabProps } from './yAxisTab.component';
 import YAxisTab from './yAxisTab.component';

src/plotting/plotWindow.component.test.tsx

@@ -2,13 +2,13 @@ import { screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { http } from 'msw';
 import { server } from '../mocks/server';
+import { PlotConfig } from '../state/slices/plotSlice';
+import { RootState } from '../state/store';
 import {
   getInitialState,
   renderComponentWithProviders,
   testPlotConfigs,
-} from '../setupTests';
-import { PlotConfig } from '../state/slices/plotSlice';
-import { RootState } from '../state/store';
+} from '../testUtils';
 import PlotWindow from './plotWindow.component';
 
 jest.mock('../windows/windowPortal.component', () => {

src/search/components/dateTime.component.test.tsx

@@ -8,7 +8,7 @@ import experimentsJSON from '../../mocks/experiments.json';
 import {
   applyDatePickerWorkaround,
   cleanupDatePickerWorkaround,
-} from '../../setupTests';
+} from '../../testUtils';
 import DateTime, {
   CustomPickersDay,
   datesEqual,