test(dev-dock/frontend): move from jest to vitest (#5734)

libs/dev-dock/frontend/.eslintignore

@@ -1,3 +1,3 @@
 build
 coverage
-jest.config.js
+vitest.config.ts

libs/dev-dock/frontend/package.json

@@ -15,9 +15,9 @@
     "lint:fix": "pnpm type-check && eslint . --fix",
     "pre-commit": "lint-staged",
     "test": "is-ci test:ci test:watch",
-    "test:ci": "pnpm build && pnpm test:coverage --reporters=default --reporters=jest-junit --maxWorkers=6",
-    "test:coverage": "jest --coverage",
-    "test:watch": "jest --watch",
+    "test:ci": "pnpm build && pnpm vitest run --coverage",
+    "test:coverage": "vitest --coverage",
+    "test:watch": "vitest",
     "type-check": "tsc --build"
   },
   "dependencies": {
@@ -41,22 +41,20 @@
     "@types/react": "18.3.3",
     "@types/styled-components": "^5.1.26",
     "@types/testing-library__jest-dom": "^5.14.9",
+    "@vitest/coverage-istanbul": "^2.1.8",
     "@votingworks/auth": "workspace:*",
     "@votingworks/fujitsu-thermal-printer": "workspace:*",
     "@votingworks/grout-test-utils": "workspace:*",
     "@votingworks/test-utils": "workspace:*",
     "eslint-plugin-vx": "workspace:*",
     "fast-check": "2.23.2",
     "is-ci-cli": "2.2.0",
-    "jest": "^29.6.2",
-    "jest-environment-jsdom": "^29.6.2",
-    "jest-junit": "^16.0.0",
-    "jest-watch-typeahead": "^2.2.2",
+    "jsdom": "20.0.1",
     "lint-staged": "11.0.0",
     "react": "18.3.1",
     "sort-package-json": "^1.50.0",
     "styled-components": "^5.3.11",
-    "ts-jest": "29.1.1"
+    "vitest": "^2.1.8"
   },
   "peerDependencies": {
     "@tanstack/react-query": "4.32.1",

libs/dev-dock/frontend/src/dev_dock.test.tsx

@@ -1,3 +1,12 @@
+import {
+  afterEach,
+  beforeEach,
+  describe,
+  expect,
+  Mocked,
+  test,
+  vi,
+} from 'vitest';
 import { render, screen, waitFor, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { createMockClient, MockClient } from '@votingworks/grout-test-utils';
@@ -49,14 +58,14 @@ const mockPrinterConfig: PrinterConfig = {
 };
 
 const featureFlagMock = getFeatureFlagMock();
-jest.mock('@votingworks/utils', () => ({
-  ...jest.requireActual('@votingworks/utils'),
+vi.mock('@votingworks/utils', async () => ({
+  ...(await vi.importActual('@votingworks/utils')),
   isFeatureFlagEnabled: (flag: BooleanEnvironmentVariableName) =>
     featureFlagMock.isEnabled(flag),
 }));
 
 let mockApiClient: MockClient<Api>;
-let kiosk!: jest.Mocked<KioskBrowser.Kiosk>;
+let kiosk: Mocked<KioskBrowser.Kiosk>;
 
 beforeEach(() => {
   mockApiClient = createMockClient<Api>();
@@ -90,7 +99,7 @@ beforeEach(() => {
   featureFlagMock.enableFeatureFlag(
     BooleanEnvironmentVariableName.USE_MOCK_USB_DRIVE
   );
-  kiosk = mockKiosk();
+  kiosk = mockKiosk(vi.fn);
   window.kiosk = kiosk;
 });
 
@@ -301,7 +310,7 @@ test('screenshot button', async () => {
     name: 'Capture Screenshot',
   });
 
-  jest.spyOn(window, 'alert').mockImplementation(() => {});
+  vi.spyOn(window, 'alert').mockImplementation(() => {});
   document.title = 'VotingWorks VxAdmin';
   mockApiClient.saveScreenshotForApp
     .expectCallWith({ appName: 'VxAdmin', screenshot: Uint8Array.of() })

libs/dev-dock/frontend/src/setupTests.ts

@@ -1,7 +1,7 @@
-import '@testing-library/jest-dom/extend-expect';
+import { afterEach, expect } from 'vitest';
+import matchers from '@testing-library/jest-dom/matchers';
+import { cleanup } from '@testing-library/react';
 
-// styled-components version 5.3.1 and above requires this remapping for jest
-// environments, reference: https://github.com/styled-components/styled-components/issues/3570
-jest.mock('styled-components', () =>
-  jest.requireActual('styled-components/dist/styled-components.browser.cjs.js')
-);
+expect.extend(matchers);
+
+afterEach(cleanup);

libs/dev-dock/frontend/vitest.config.ts

@@ -0,0 +1,8 @@
+import { defineConfig } from '../../../vitest.config.shared.mjs';
+
+export default defineConfig({
+  test: {
+    environment: 'jsdom',
+    setupFiles: ['src/setupTests.ts'],
+  },
+});