feat(vitest): replace jest with vitest and removes babel

app/frontend/.eslintrc.js

@@ -3,13 +3,11 @@ module.exports = {
     browser: true,
     es6: true,
     amd: true,
-    "jest/globals": true,
     node: true,
   },
-  plugins: ["vue", "jest"],
+  plugins: ["vue"],
   extends: ["eslint:recommended", "plugin:vue/recommended", "prettier"],
   parserOptions: {
-    parser: "babel-eslint",
     sourceType: "module",
     ecmaVersion: 2018,
   },

app/frontend/plate-picks/components/HelpToggle.test.js

@@ -1,5 +1,4 @@
 import { shallowMount } from "@vue/test-utils";
-import "@testing-library/jest-dom";
 import HelpToggle from "./HelpToggle.vue";
 
 describe("HelpToggle.vue", () => {

app/frontend/plate-picks/components/PicksSection.test.js

@@ -1,5 +1,4 @@
 import { shallowMount } from "@vue/test-utils";
-import "@testing-library/jest-dom";
 import PicksSection from "./PicksSection.vue";
 import PicksSectionBatch from "./PicksSectionBatch.vue";
 import defaultState from "../store/state";

app/frontend/plate-picks/components/PicksSectionBatch.test.js

@@ -1,5 +1,4 @@
 import { shallowMount } from "@vue/test-utils";
-import "@testing-library/jest-dom";
 import PicksSectionBatch from "./PicksSectionBatch.vue";
 import PicksSectionBatchPick from "./PicksSectionBatchPick.vue";
 

app/frontend/plate-picks/components/PicksSectionBatchPick.test.js

@@ -1,5 +1,4 @@
 import { shallowMount } from "@vue/test-utils";
-import "@testing-library/jest-dom";
 import PicksSectionBatchPick from "./PicksSectionBatchPick.vue";
 import defaultState from "../store/state";
 import { storePlateWithPicks } from "../_test_examples_";
@@ -81,7 +80,7 @@ describe("PicksSectionBatchPick.vue", () => {
   });
 
   it("includes an editable short name", async () => {
-    const commit = jest.fn();
+    const commit = vi.fn();
     const wrapper = shallowMount(PicksSectionBatchPick, {
       propsData: {
         name,

app/frontend/plate-picks/components/PlatesSection.test.js

@@ -1,5 +1,4 @@
 import { shallowMount } from "@vue/test-utils";
-import "@testing-library/jest-dom";
 import PlatesSection from "./PlatesSection.vue";
 import PlatesSectionPlate from "./PlatesSectionPlate.vue";
 import defaultState from "../store/state";
@@ -33,7 +32,7 @@ describe("PlatesSection.vue", () => {
   it("triggers plate lookup", async () => {
     const mockStore = {
       state: defaultState(),
-      dispatch: jest.fn(),
+      dispatch: vi.fn(),
       getters: { sortedScannedPlates: [] },
     };
     const wrapper = shallowMount(PlatesSection, {
@@ -52,7 +51,7 @@ describe("PlatesSection.vue", () => {
   it("ignores empty input", async () => {
     const mockStore = {
       state: defaultState(),
-      dispatch: jest.fn(),
+      dispatch: vi.fn(),
       getters: { sortedScannedPlates: [] },
     };
     const wrapper = shallowMount(PlatesSection, {

app/frontend/plate-picks/components/PlatesSectionPlate.test.js

@@ -1,5 +1,4 @@
 import { shallowMount } from "@vue/test-utils";
-import "@testing-library/jest-dom";
 import PlatesSectionPlate from "./PlatesSectionPlate.vue";
 import defaultState from "../store/state";
 

app/frontend/plate-picks/store/actions.test.js

@@ -20,8 +20,8 @@ describe("actions.js", () => {
       // mock commit
       const plates = { 1: plateWithPicks() };
       const state = { ...defaultState(), plates };
-      const dispatch = jest.fn();
-      const commit = jest.fn((_) => (state.scanStore[`_${exampleBarcode}`] = { barcode: exampleBarcode, id: 1 }));
+      const dispatch = vi.fn();
+      const commit = vi.fn((_) => (state.scanStore[`_${exampleBarcode}`] = { barcode: exampleBarcode, id: 1 }));
       // apply action
       await plateBarcodeScan({ commit, state, dispatch }, exampleBarcode);
       // assert result
@@ -36,8 +36,8 @@ describe("actions.js", () => {
       mirageServer.create("plate", plateWithoutPicks({ id: "1" }));
       // mock commit
       const state = defaultState();
-      const commit = jest.fn((_) => (state.scanStore[`_${exampleBarcode}`] = { barcode: exampleBarcode }));
-      const dispatch = jest.fn();
+      const commit = vi.fn((_) => (state.scanStore[`_${exampleBarcode}`] = { barcode: exampleBarcode }));
+      const dispatch = vi.fn();
       // apply action
       await plateBarcodeScan({ commit, state, dispatch }, exampleBarcode);
       // assert result
@@ -53,8 +53,8 @@ describe("actions.js", () => {
       mirageServer.create("plate", plateWithoutPicks({ id: "1", control: true }));
       // mock commit
       const state = defaultState();
-      const commit = jest.fn((_) => (state.scanStore[`_${exampleBarcode}`] = { barcode: exampleBarcode }));
-      const dispatch = jest.fn();
+      const commit = vi.fn((_) => (state.scanStore[`_${exampleBarcode}`] = { barcode: exampleBarcode }));
+      const dispatch = vi.fn();
       // apply action
       await plateBarcodeScan({ commit, state, dispatch }, exampleBarcode);
       // assert result
@@ -73,10 +73,10 @@ describe("actions.js", () => {
       // mock the console
       // We don't *need* to do this, but it clutters the output and confuses
       // actual failing tests
-      console.error = jest.fn();
+      console.error = vi.fn();
       // mock commit
       const state = defaultState();
-      const commit = jest.fn((_) => (state.scanStore["_BadPlate"] = { barcode: "BadPlate" }));
+      const commit = vi.fn((_) => (state.scanStore["_BadPlate"] = { barcode: "BadPlate" }));
       // mock dependencies
       // apply action
       await plateBarcodeScan({ commit, state }, "BadPlate");
@@ -93,8 +93,8 @@ describe("actions.js", () => {
   describe("fetchBatches", () => {
     it("fetches each batch`", () => {
       // mock commit
-      const commit = jest.fn();
-      const dispatch = jest.fn();
+      const commit = vi.fn();
+      const dispatch = vi.fn();
       const state = defaultState();
       // apply action
       fetchBatches({ commit, dispatch, state }, { ids: [1, 2] });
@@ -132,8 +132,8 @@ describe("actions.js", () => {
 
       // mock commit
       const state = defaultState();
-      const commit = jest.fn().mockImplementationOnce((_) => (state.batches["b1"] = { id: "1" }));
-      const dispatch = jest.fn((_) => (state.pickCount += 1));
+      const commit = vi.fn().mockImplementationOnce((_) => (state.batches["b1"] = { id: "1" }));
+      const dispatch = vi.fn((_) => (state.pickCount += 1));
 
       // apply action
       await fetchBatch({ commit, dispatch, state }, { id: "1" });
@@ -170,7 +170,7 @@ describe("actions.js", () => {
       // Set up initial state
       const state = defaultState();
       // apply action
-      const commit = jest.fn((_) => (state.pickCount += 1));
+      const commit = vi.fn((_) => (state.pickCount += 1));
       const returned = nextPickId({ commit, state });
       expect(commit).toHaveBeenCalledWith("incrementPick");
       expect(returned).toBe(1);

app/frontend/plate-picks/store/mutations.test.js

@@ -38,7 +38,7 @@ describe("mutations.js", () => {
     it("updates plates when they exist already", () => {
       // Provided by the browser. We mock it. Currently just mock a string as we're not doing anything fancy
       global.SpeechSynthesisUtterance = class extends String {};
-      global.speechSynthesis = { speak: jest.fn() };
+      global.speechSynthesis = { speak: vi.fn() };
       // mock state
       const state = defaultState();
       state.plates = { 1: plateWithoutPicks({ id: 1 }) };
@@ -64,7 +64,7 @@ describe("mutations.js", () => {
     it("updates picks when they exist already", () => {
       // Provided by the browser. We mock it. Currently just mock a string as we're not doing anything fancy
       global.SpeechSynthesisUtterance = class extends String {};
-      global.speechSynthesis = { speak: jest.fn() };
+      global.speechSynthesis = { speak: vi.fn() };
       // mock state
       const state = {
         ...defaultState(),

app/frontend/shared/components/BaseRadio.test.js

@@ -1,5 +1,4 @@
 import { shallowMount } from "@vue/test-utils";
-import "@testing-library/jest-dom";
 import BaseRadio from "./BaseRadio.vue";
 
 describe("BaseRadio.vue", () => {

package.json

@@ -31,26 +31,20 @@
     "whatwg-fetch": "^3.6.20"
   },
   "devDependencies": {
-    "@babel/core": "^7.24.7",
-    "@babel/preset-env": "^7.24.7",
     "@prettier/plugin-ruby": "^4.0.0",
-    "@testing-library/jest-dom": "^5.17.0",
     "@vitejs/plugin-legacy": "^1.8.2",
     "@vue/test-utils": "^1.3.6",
-    "babel-core": "^7.0.0-bridge.0",
-    "babel-eslint": "^10.1.0",
-    "babel-jest": "^26.6.3",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.10.0",
-    "eslint-plugin-jest": "^23.20.0",
+    "eslint-plugin-vitest": "^0.5.4",
     "eslint-plugin-vue": "^6.2.2",
-    "jest": "^26.6.3",
+    "jsdom": "^26.0.0",
     "miragejs": "^0.1.48",
     "prettier": "^3.3.2",
     "vite": "^5.4.14",
     "vite-plugin-ruby": "^5.0.0",
     "vite-plugin-vue2": "^1.9.3",
-    "vue-jest": "^3.0.7"
+    "vitest": "^3.0.5"
   },
   "_comment": "Required to address https://github.com/npm/cli/issues/4828",
   "optionalDependencies": {
@@ -59,22 +53,8 @@
     "@rollup/rollup-win32-x64-msvc": "*"
   },
   "scripts": {
-    "test": "jest",
+    "test": "vitest run",
     "lint": "eslint --ext .js --ext .vue app/frontend",
     "lintOnly": "eslint --ext .js --ext .vue"
-  },
-  "jest": {
-    "roots": [
-      "app/frontend"
-    ],
-    "moduleFileExtensions": [
-      "js",
-      "json",
-      "vue"
-    ],
-    "transform": {
-      "^.+\\.(vue)$": "vue-jest",
-      "^.+\\.js$": "babel-jest"
-    }
   }
 }

vite.config.ts → vite.config.js

@@ -20,4 +20,16 @@ export default defineConfig({
       "@formtastic": process.env.FORMTASTIC_STYLESHEET_PATH,
     },
   },
+  test: {
+    globals: true,
+    environment: 'jsdom',
+    coverage: {
+      provider: 'v8',
+      reporter: ['lcov', 'text'],
+    },
+    // This hides the "Download the Vue Devtools extension" message from the console
+    onConsoleLog(log) {
+      if (log.includes('Download the Vue Devtools extension')) return false
+    },
+  },
 });