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

Closes #5831
Part of #5706

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,15 @@
     "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",
+    "vitest-styled-components": "^1.0.0"
   },
   "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 {
@@ -27,7 +28,7 @@ const electionKey = constructElectionKey(electionDefinition.election);
 let apiMock: ApiMock;
 
 beforeEach(() => {
-  jest.restoreAllMocks();
+  vi.restoreAllMocks();
 
   apiMock = createApiMock();
   apiMock.setAuthStatus({

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

@@ -1,3 +1,4 @@
+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';
@@ -6,7 +7,7 @@ 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(

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,3 +1,4 @@
+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';
@@ -14,7 +15,7 @@ import { TestScanButton } from './test_scan_button';
 let apiMock: ApiMock;
 
 beforeEach(() => {
-  jest.restoreAllMocks();
+  vi.restoreAllMocks();
   apiMock = createApiMock();
 });
 

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();
 });
 

apps/central-scan/frontend/src/screens/ballot_eject_screen.test.tsx

@@ -1,3 +1,4 @@
+import { afterEach, beforeEach, expect, test, vi } from 'vitest';
 import { mockBaseLogger, LogEventId } from '@votingworks/logging';
 import {
   AdjudicationReason,
@@ -48,7 +49,7 @@ test('says the sheet is unreadable if it is', async () => {
     })
   );
 
-  const logger = mockBaseLogger({ fn: jest.fn });
+  const logger = mockBaseLogger({ fn: vi.fn });
 
   renderInAppContext(<BallotEjectScreen isTestMode />, { apiMock, logger });
 
@@ -63,7 +64,6 @@ test('says the sheet is unreadable if it is', async () => {
     'Confirm Ballot Removed'
   );
 
-  expect(logger.log).toHaveBeenCalledTimes(1);
   expect(logger.log).toHaveBeenCalledWith(
     LogEventId.ScanAdjudicationInfo,
     'election_manager',
@@ -159,7 +159,7 @@ test('says the ballot sheet is overvoted if it is', async () => {
     })
   );
 
-  const logger = mockBaseLogger({ fn: jest.fn });
+  const logger = mockBaseLogger({ fn: vi.fn });
 
   renderInAppContext(<BallotEjectScreen isTestMode />, { apiMock, logger });
 
@@ -271,7 +271,7 @@ test('says the ballot sheet is undervoted if it is', async () => {
     })
   );
 
-  const logger = mockBaseLogger({ fn: jest.fn });
+  const logger = mockBaseLogger({ fn: vi.fn });
 
   renderInAppContext(<BallotEjectScreen isTestMode />, { apiMock, logger });
 
@@ -390,7 +390,7 @@ test('says the ballot sheet is blank if it is', async () => {
     })
   );
 
-  const logger = mockBaseLogger({ fn: jest.fn });
+  const logger = mockBaseLogger({ fn: vi.fn });
 
   renderInAppContext(<BallotEjectScreen isTestMode />, { apiMock, logger });
 
@@ -458,7 +458,7 @@ test('calls out official ballot sheets in test mode', async () => {
     })
   );
 
-  const logger = mockBaseLogger({ fn: jest.fn });
+  const logger = mockBaseLogger({ fn: vi.fn });
 
   renderInAppContext(<BallotEjectScreen isTestMode />, { apiMock, logger });
 
@@ -524,7 +524,7 @@ test('calls out test ballot sheets in live mode', async () => {
     })
   );
 
-  const logger = mockBaseLogger({ fn: jest.fn });
+  const logger = mockBaseLogger({ fn: vi.fn });
 
   renderInAppContext(<BallotEjectScreen isTestMode={false} />, {
     apiMock,
@@ -577,7 +577,7 @@ test('shows invalid election screen when appropriate', async () => {
     })
   );
 
-  const logger = mockBaseLogger({ fn: jest.fn });
+  const logger = mockBaseLogger({ fn: vi.fn });
 
   renderInAppContext(<BallotEjectScreen isTestMode={false} />, {
     apiMock,
@@ -695,7 +695,7 @@ test('does not allow tabulating the overvote if disallowCastingOvervotes is set'
     })
   );
 
-  const logger = mockBaseLogger({ fn: jest.fn });
+  const logger = mockBaseLogger({ fn: vi.fn });
 
   renderInAppContext(<BallotEjectScreen isTestMode />, { apiMock, logger });
 
@@ -736,7 +736,7 @@ test('says the scanner needs cleaning if a streak is detected', async () => {
     })
   );
 
-  const logger = mockBaseLogger({ fn: jest.fn });
+  const logger = mockBaseLogger({ fn: vi.fn });
 
   renderInAppContext(<BallotEjectScreen isTestMode />, { apiMock, logger });
 

apps/central-scan/frontend/src/screens/diagnostics_screen.test.tsx

@@ -1,3 +1,4 @@
+import { afterEach, beforeEach, test } from 'vitest';
 import { mockUsbDriveStatus } from '@votingworks/ui';
 import { readElectionTwoPartyPrimaryDefinition } from '@votingworks/fixtures';
 import { screen } from '../../test/react_testing_library';

apps/central-scan/frontend/src/screens/scan_ballots_screen.test.tsx

@@ -1,3 +1,4 @@
+import { afterEach, beforeEach, describe, expect, test } from 'vitest';
 import { hasTextAcrossElements } from '@votingworks/test-utils';
 import userEvent from '@testing-library/user-event';
 import type { ScanStatus } from '@votingworks/central-scan-backend';

apps/central-scan/frontend/src/screens/settings_screen.test.tsx

@@ -1,12 +1,8 @@
+import { afterEach, beforeEach, expect, test, vi } from 'vitest';
 import userEvent from '@testing-library/user-event';
 import { createMemoryHistory } from 'history';
 import { mockUsbDriveStatus } from '@votingworks/ui';
-import {
-  screen,
-  waitFor,
-  waitForElementToBeRemoved,
-  within,
-} from '../../test/react_testing_library';
+import { screen, waitFor, within } from '../../test/react_testing_library';
 import { renderInAppContext } from '../../test/render_in_app_context';
 import { SettingsScreenProps, SettingsScreen } from './settings_screen';
 import { ApiMock, createApiMock } from '../../test/api';
@@ -87,7 +83,7 @@ test('clicking "Unconfigure Machine" calls backend', async () => {
 });
 
 test('clicking "Update Date and Time" shows modal to set clock', async () => {
-  jest.useFakeTimers().setSystemTime(new Date('2020-10-31T00:00:00.000'));
+  vi.useFakeTimers().setSystemTime(new Date('2020-10-31T00:00:00.000'));
 
   renderScreen();
 
@@ -114,7 +110,9 @@ test('clicking "Update Date and Time" shows modal to set clock', async () => {
     .resolves();
   apiMock.expectLogOut();
   userEvent.click(within(modal).getByRole('button', { name: 'Save' }));
-  await waitForElementToBeRemoved(screen.queryByRole('alertdialog'));
+  await vi.waitFor(() => {
+    expect(screen.queryByRole('alertdialog')).not.toBeInTheDocument();
+  });
 
-  jest.useRealTimers();
+  vi.useRealTimers();
 });

apps/central-scan/frontend/src/screens/system_administrator_settings_screen.test.tsx

@@ -1,3 +1,4 @@
+import { afterEach, beforeEach, expect, test } from 'vitest';
 import userEvent from '@testing-library/user-event';
 import { ok } from '@votingworks/basics';
 import { mockUsbDriveStatus } from '@votingworks/ui';