Move JS tests from Jest to Vitest (#5362)

* chore: migrated all tests to Vitest

* fix: mock imports properly

* fix: improve vitest performance

* fix: enable coverage report

* fix: use experimental AST remapping for coverage stats

* fix: tests linting

* chore: remove jest and jest linting rules

* fix: errors in some tests

* fix: use jsdom for vitest environment

* fix: linting

* fix: increase test timeout (just to be safe)

Author: edisile

eslint.config.mjs

@@ -1,4 +1,4 @@
-import jest from "eslint-plugin-jest";
+import vitest from '@vitest/eslint-plugin'
 import react from "eslint-plugin-react";
 import prettier from "eslint-plugin-prettier";
 import jsxA11Y from "eslint-plugin-jsx-a11y";
@@ -38,7 +38,7 @@ export default [
   ),
   {
     plugins: {
-      jest,
+      vitest,
       react,
       prettier,
       "jsx-a11y": jsxA11Y,
@@ -48,7 +48,7 @@ export default [
         Object.entries({
           ...globals.browser,
           ...globals.node,
-          ...jest.environments.globals.globals,
+          ...vitest.environments.env.globals
         }).map(([key, value]) => [key.trim(), value]),
       ),
       parser: babelParser,

jest.config.js

@@ -6,7 +6,7 @@
     "lint-python": "flake8 webapp tests && black --diff --check --line-length 79 webapp tests",
     "test": "yarn run test-python && yarn run test-js-all && yarn run lint-scss",
     "test-e2e": "cypress run --quiet",
-    "test-js": "jest",
+    "test-js": "vitest run",
     "test-js-all": "yarn run lint-js && yarn run test-js",
     "test-python": "yarn run lint-python && FLASK_DEBUG=0 python3 -m unittest discover tests",
     "test-python-job": "SECRET_KEY=insecure_secret_key coverage run  --source=. -m unittest discover tests",
@@ -39,13 +39,13 @@
     "@testing-library/jest-dom": "6.6.3",
     "@testing-library/react": "16.2.0",
     "@testing-library/user-event": "14.5.2",
-    "@types/jest": "29.5.14",
     "@types/randomstring": "1.3.0",
     "@types/react": "19.1.8",
     "@types/react-dom": "19.1.6",
     "@types/react-redux": "7.1.34",
     "@types/topojson-client": "3.1.5",
     "@vitejs/plugin-react-swc": "4.0.0",
+    "@vitest/eslint-plugin": "^1.3.9",
     "autoprefixer": "10.4.20",
     "d3": "7.9.0",
     "d3-array": "3.2.4",
@@ -95,35 +95,29 @@
     "@percy/cli": "1.30.6",
     "@types/cypress": "1.1.6",
     "@types/d3": "7.4.3",
-    "@types/markdown-it": "14.1.2",
     "@types/uuid": "10.0.0",
     "@typescript-eslint/eslint-plugin": "^8.19.1",
     "@typescript-eslint/parser": "^8.19.1",
-    "babel-jest": "29.7.0",
+    "@vitest/coverage-v8": "3.2.4",
+    "@vitest/ui": "3.2.4",
     "concurrently": "9.1.2",
     "cypress": "14.5.4",
     "eslint": "9.17.0",
     "eslint-config-prettier": "9.1.0",
-    "eslint-plugin-jest": "28.10.0",
     "eslint-plugin-jsx-a11y": "^6.9.0",
     "eslint-plugin-prettier": "5.2.1",
     "eslint-plugin-react": "7.37.3",
-    "identity-obj-proxy": "3.0.0",
-    "jest": "29.7.0",
-    "jest-environment-jsdom": "29.7.0",
-    "jest-fixed-jsdom": "0.0.9",
     "msw": "2.7.0",
-    "sass-loader": "16.0.4",
     "stylelint": "16.12.0",
     "stylelint-config-standard-scss": "14.0.0",
     "stylelint-order": "6.0.4",
-    "ts-jest": "29.2.5"
+    "vitest": "^3.2.4"
   },
   "resolutions": {
     "lodash": "4.17.21",
     "eslint/**/minimatch": "3.1.2",
     "eslint-*/minimatch": "3.1.2",
     "@typescript-eslint/**/minimatch": "9.0.5",
-    "ts-jest/ejs/jake/filelist/minimatch": "5.1.6"
+    "@vitest/coverage-v8/**/minimatch": "9.0.5"
   }
 }

jest.setup.js

@@ -1,7 +1,8 @@
 import debounce from "../debounce";
+import type { Mock } from "vitest";
 
-jest.useFakeTimers();
-const fn: jest.Mock = jest.fn();
+vi.useFakeTimers();
+const fn: Mock = vi.fn();
 
 describe("debounce", () => {
   test("function is only called once", () => {
@@ -11,7 +12,7 @@ describe("debounce", () => {
       debouncedFn();
     }
 
-    jest.runAllTimers();
+    vi.runAllTimers();
 
     expect(fn).toHaveBeenCalledTimes(1);
   });
@@ -23,7 +24,7 @@ describe("debounce", () => {
       debouncedFn();
     }
 
-    jest.runAllTimers();
+    vi.runAllTimers();
 
     expect(fn).toHaveBeenCalledTimes(2);
   });

package.json

@@ -8,14 +8,14 @@ button.classList.add("test-button");
 
 describe("Events", () => {
   test("adds an event listener", () => {
-    const testEvent = jest.fn();
+    const testEvent = vi.fn();
     events.addEvent("click", button, testEvent);
     button.click();
     expect(testEvent).toHaveBeenCalled();
   });
 
   test("adds events by type", () => {
-    const testEvent = jest.fn();
+    const testEvent = vi.fn();
     events.addEvents({
       click: {
         "[class=test-button]": (event: { preventDefault: () => void }) => {

static/js/libs/__tests__/debounce.test.ts

@@ -1,5 +1,6 @@
 import "@testing-library/jest-dom";
 import iframeSize from "../iframeSize";
+import type { Mock } from "vitest";
 
 describe("iframeSize", () => {
   test("sizes iframe to container width and maintain ratio", () => {
@@ -14,7 +15,7 @@ describe("iframeSize", () => {
 
     document.body.appendChild(frameWrapper);
 
-    frameWrapper.getBoundingClientRect = jest.fn(
+    frameWrapper.getBoundingClientRect = vi.fn(
       (): DOMRect => ({
         x: 0,
         y: 0,
@@ -26,7 +27,7 @@ describe("iframeSize", () => {
         height: 500,
         toJSON: () => ({}),
       }),
-    ) as jest.Mock;
+    ) as Mock;
 
     iframeSize(".frame-wrapper");
 

static/js/libs/__tests__/events.test.ts

@@ -3,13 +3,13 @@ import mouse from "../mouse";
 
 describe("mouse", () => {
   test("calls the updatePosition method on mousemove", () => {
-    const spy = jest.spyOn(mouse, "updatePosition");
-
-    window.dispatchEvent(new Event("mousemove"));
+    window.dispatchEvent(
+      new MouseEvent("mousemove", { clientX: 1, clientY: 1 }),
+    );
 
     // Take out of the event loop so runs after event is triggered
     setTimeout(() => {
-      expect(spy).toHaveBeenCalled();
+      expect(mouse.position).toMatchObject({ x: 1, y: 1 });
     }, 0);
   });
 });

static/js/libs/__tests__/iframeSize.test.ts

@@ -2,14 +2,14 @@ import throttle from "../throttle";
 
 describe("throttle", () => {
   test("calls function", () => {
-    const fn = jest.fn();
+    const fn = vi.fn();
     const throttledFunction: () => void = throttle(fn, -1);
     throttledFunction();
     expect(fn).toHaveBeenCalled();
   });
 
   test("doesn't call function", () => {
-    const fn = jest.fn();
+    const fn = vi.fn();
     const throttledFunction: () => void = throttle(fn, 1);
     throttledFunction();
     expect(fn).not.toHaveBeenCalled();

static/js/libs/__tests__/mouse.test.ts

@@ -59,7 +59,7 @@ describe("initChooseName", () => {
 
   it("should set cookie on submit", () => {
     delete window.location;
-    window.location = { reload: jest.fn() };
+    window.location = { reload: vi.fn() };
 
     nameInput.click();
     nameInput.value = "valid-name";