test(central-scan/frontend): replace jest with vitest

apps/central-scan/frontend/package.json

@@ -22,9 +22,9 @@
     "stylelint:run": "stylelint 'src/**/*.{js,jsx,ts,tsx}'",
     "stylelint:run:fix": "stylelint 'src/**/*.{js,jsx,ts,tsx}' --fix",
     "test": "is-ci test:ci test:watch",
-    "test:ci": "TZ=America/Anchorage jest --coverage --reporters=default --reporters=jest-junit --maxWorkers=6",
-    "test:coverage": "TZ=America/Anchorage jest --coverage",
-    "test:watch": "TZ=America/Anchorage jest --watch",
+    "test:ci": "TZ=America/Anchorage vitest run --coverage",
+    "test:coverage": "TZ=America/Anchorage vitest --coverage",
+    "test:watch": "TZ=America/Anchorage vitest",
     "type-check": "tsc --build"
   },
   "browserslist": {
@@ -77,7 +77,6 @@
     "@types/fast-text-encoding": "^1.0.1",
     "@types/fetch-mock": "^7.3.2",
     "@types/history": "4.7.11",
-    "@types/jest": "^29.5.3",
     "@types/kiosk-browser": "workspace:*",
     "@types/node": "20.16.0",
     "@types/pify": "^3.0.2",
@@ -89,6 +88,7 @@
     "@types/styled-components": "^5.1.26",
     "@types/testing-library__jest-dom": "^5.14.9",
     "@vitejs/plugin-react": "^1.3.2",
+    "@vitest/coverage-istanbul": "^2.1.8",
     "@votingworks/backend": "workspace:*",
     "@votingworks/central-scan-backend": "workspace:*",
     "@votingworks/fixtures": "workspace:*",
@@ -102,20 +102,14 @@
     "fetch-mock": "9.11.0",
     "history": "4.10.1",
     "is-ci-cli": "2.2.0",
-    "jest": "^29.6.2",
-    "jest-environment-jsdom": "^29.6.2",
-    "jest-fetch-mock": "^3.0.3",
-    "jest-junit": "^16.0.0",
-    "jest-styled-components": "^7.1.1",
-    "jest-watch-typeahead": "^2.2.2",
     "lint-staged": "11.0.0",
     "node-fetch": "^2.6.0",
     "react-app-polyfill": "3.0.0",
     "react-refresh": "^0.9.0",
     "sort-package-json": "^1.50.0",
-    "ts-jest": "29.1.1",
     "type-fest": "^0.18.0",
-    "vite": "4.5.2"
+    "vite": "4.5.2",
+    "vitest": "^2.1.8"
   },
   "packageManager": "[email protected]",
   "vx": {

apps/central-scan/frontend/src/api/hmpb.test.ts

@@ -1,3 +1,4 @@
+import { expect, test } from 'vitest';
 import fetchMock from 'fetch-mock';
 import { Scan } from '@votingworks/api';
 import { fetchNextBallotSheetToReview } from './hmpb';

apps/central-scan/frontend/src/app.test.tsx

@@ -1,3 +1,4 @@
+import { afterEach, beforeEach, expect, test, vi } from 'vitest';
 import fetchMock from 'fetch-mock';
 import { readElectionGeneralDefinition } from '@votingworks/fixtures';
 import {
@@ -16,7 +17,7 @@ import {
 } from '@votingworks/types';
 import userEvent from '@testing-library/user-event';
 import { mockUsbDriveStatus } from '@votingworks/ui';
-import { render, waitFor, within, screen } from '../test/react_testing_library';
+import { render, within, screen } from '../test/react_testing_library';
 import { App } from './app';
 import { ApiMock, createApiMock } from '../test/api';
 import { mockBatch, mockStatus } from '../test/fixtures';
@@ -27,7 +28,7 @@ const electionKey = constructElectionKey(electionDefinition.election);
 let apiMock: ApiMock;
 
 beforeEach(() => {
-  jest.restoreAllMocks();
+  vi.restoreAllMocks();
 
   apiMock = createApiMock();
   apiMock.setAuthStatus({
@@ -118,7 +119,7 @@ test('renders without crashing', async () => {
   apiMock.expectGetElectionRecord(electionDefinition);
 
   render(<App apiClient={apiMock.apiClient} />);
-  await waitFor(() => fetchMock.called());
+  await vi.waitFor(() => fetchMock.called());
 });
 
 test('clicking Scan Batch will scan a batch', async () => {
@@ -148,7 +149,7 @@ test('clicking "Save CVRs" shows modal and makes a request to export', async ()
 
   // wait for the config to load
   const saveButton = screen.getButton('Save CVRs');
-  await waitFor(() => expect(saveButton).toBeEnabled());
+  await vi.waitFor(() => expect(saveButton).toBeEnabled());
   userEvent.click(saveButton);
   await screen.findByRole('alertdialog');
   apiMock.expectExportCastVoteRecords({ isMinimalExport: true });
@@ -324,7 +325,9 @@ test('system administrator can log in and unconfigure machine', async () => {
   apiMock.expectGetSystemSettings();
   apiMock.expectGetTestMode(true);
   userEvent.click(within(modal).getButton('Delete All Election Data'));
-  await waitFor(() => expect(screen.queryByRole('alertdialog')).toBeNull());
+  await vi.waitFor(() => {
+    expect(screen.queryByRole('alertdialog')).not.toBeInTheDocument();
+  }, 5000);
 });
 
 test('election manager cannot auth onto machine with different election', async () => {

apps/central-scan/frontend/src/components/delete_batch_modal.test.tsx

@@ -1,12 +1,13 @@
+import { afterEach, beforeEach, expect, test, vi } from 'vitest';
 import userEvent from '@testing-library/user-event';
 import { ApiMock, createApiMock, provideApi } from '../../test/api';
-import { render, screen, waitFor } from '../../test/react_testing_library';
+import { render, screen } from '../../test/react_testing_library';
 import { DeleteBatchModal } from './delete_batch_modal';
 
 let apiMock: ApiMock;
 
 beforeEach(() => {
-  jest.restoreAllMocks();
+  vi.restoreAllMocks();
   apiMock = createApiMock();
 });
 
@@ -15,7 +16,7 @@ afterEach(() => {
 });
 
 test('allows canceling', async () => {
-  const onClose = jest.fn();
+  const onClose = vi.fn();
 
   render(
     provideApi(
@@ -32,7 +33,7 @@ test('allows canceling', async () => {
 });
 
 test('closes on success', async () => {
-  const onClose = jest.fn();
+  const onClose = vi.fn();
 
   render(
     provideApi(
@@ -46,7 +47,7 @@ test('closes on success', async () => {
 
   apiMock.expectDeleteBatch({ batchId: 'a' });
   userEvent.click(screen.getByText('Delete Batch'));
-  await waitFor(() => {
+  await vi.waitFor(() => {
     expect(onClose).toHaveBeenCalled();
   });
 });

apps/central-scan/frontend/src/components/export_results_modal.test.tsx

@@ -1,3 +1,4 @@
+import { afterEach, beforeEach, expect, test, vi } from 'vitest';
 import { err } from '@votingworks/basics';
 import type { UsbDriveStatus } from '@votingworks/usb-drive';
 import userEvent from '@testing-library/user-event';
@@ -26,7 +27,7 @@ test('render insert USB screen when there is not a valid, mounted usb drive', as
 
   for (const usbDriveStatus of usbDriveStatuses) {
     apiMock.setUsbDriveStatus(usbDriveStatus);
-    const closeFn = jest.fn();
+    const closeFn = vi.fn();
     const { unmount } = renderInAppContext(
       <ExportResultsModal mode="cvrs" onClose={closeFn} />,
       {
@@ -43,7 +44,7 @@ test('render insert USB screen when there is not a valid, mounted usb drive', as
 });
 
 test('render export modal when a usb drive is mounted as expected and allows export', async () => {
-  const closeFn = jest.fn();
+  const closeFn = vi.fn();
   apiMock.setUsbDriveStatus(mockUsbDriveStatus('mounted'));
   renderInAppContext(<ExportResultsModal mode="cvrs" onClose={closeFn} />, {
     apiMock,
@@ -64,7 +65,7 @@ test('render export modal when a usb drive is mounted as expected and allows exp
 });
 
 test('render export modal with errors when appropriate', async () => {
-  const closeFn = jest.fn();
+  const closeFn = vi.fn();
   apiMock.setUsbDriveStatus(mockUsbDriveStatus('mounted'));
   renderInAppContext(<ExportResultsModal mode="cvrs" onClose={closeFn} />, {
     apiMock,
@@ -83,7 +84,7 @@ test('render export modal with errors when appropriate', async () => {
 });
 
 test('render export modal with errors when appropriate - backup', async () => {
-  const closeFn = jest.fn();
+  const closeFn = vi.fn();
   apiMock.setUsbDriveStatus(mockUsbDriveStatus('mounted'));
   renderInAppContext(<ExportResultsModal mode="backup" onClose={closeFn} />, {
     apiMock,

apps/central-scan/frontend/src/components/scan_button.test.tsx

@@ -1,3 +1,4 @@
+import { afterEach, beforeEach, expect, test, vi } from 'vitest';
 import userEvent from '@testing-library/user-event';
 import { screen } from '../../test/react_testing_library';
 import { ScanButton } from './scan_button';
@@ -7,7 +8,7 @@ import { renderInAppContext } from '../../test/render_in_app_context';
 let apiMock: ApiMock;
 
 beforeEach(() => {
-  jest.restoreAllMocks();
+  vi.restoreAllMocks();
   apiMock = createApiMock();
 });
 

apps/central-scan/frontend/src/components/test_scan_button.test.tsx

@@ -1,20 +1,17 @@
+import { afterEach, beforeEach, expect, test, vi } from 'vitest';
 import userEvent from '@testing-library/user-event';
 import { deferred } from '@votingworks/basics';
 import { ScanDiagnosticOutcome } from '@votingworks/central-scan-backend';
 import { ApiMock, createApiMock } from '../../test/api';
 import { mockStatus } from '../../test/fixtures';
-import {
-  screen,
-  waitFor,
-  waitForElementToBeRemoved,
-} from '../../test/react_testing_library';
+import { screen } from '../../test/react_testing_library';
 import { renderInAppContext } from '../../test/render_in_app_context';
 import { TestScanButton } from './test_scan_button';
 
 let apiMock: ApiMock;
 
 beforeEach(() => {
-  jest.restoreAllMocks();
+  vi.restoreAllMocks();
   apiMock = createApiMock();
 });
 
@@ -29,20 +26,22 @@ test('disabled behavior', async () => {
   expect(button).toBeEnabled();
 
   apiMock.setStatus(mockStatus({ isScannerAttached: false }));
-  await waitFor(() => {
+  await vi.waitFor(() => {
     expect(button).toBeDisabled();
   });
 
   apiMock.setStatus(mockStatus({ isScannerAttached: true }));
-  await waitFor(() => {
+  await vi.waitFor(() => {
     expect(button).toBeEnabled();
   });
 
   userEvent.click(button);
   await screen.findButton('Scan');
 
   apiMock.setStatus(mockStatus({ isScannerAttached: false }));
-  await waitForElementToBeRemoved(() => screen.queryButton('Scan'));
+  await vi.waitFor(() => {
+    expect(screen.queryButton('Scan')).not.toBeInTheDocument();
+  });
   screen.getByText(/No scanner is currently detected/);
 });
 

apps/central-scan/frontend/src/components/toggle_test_mode_button.test.tsx

@@ -1,3 +1,4 @@
+import { afterEach, beforeEach, expect, test, vi } from 'vitest';
 import userEvent from '@testing-library/user-event';
 import { render, screen, within } from '../../test/react_testing_library';
 import { ToggleTestModeButton } from './toggle_test_mode_button';
@@ -7,7 +8,7 @@ import { mockStatus } from '../../test/fixtures';
 let apiMock: ApiMock;
 
 beforeEach(() => {
-  jest.restoreAllMocks();
+  vi.restoreAllMocks();
   apiMock = createApiMock();
 });