Merge pull request galaxyproject#21348 from dannon/vitest-migration

Migrate client tests from Jest to Vitest

Author: jmchilton

.github/workflows/jest.yaml .github/workflows/client-unit.yaml.github/workflows/jest.yaml renamed to .github/workflows/client-unit.yaml

@@ -3,11 +3,11 @@ on:
   push:
     paths:
       - 'client/**'
-      - '.github/workflows/jest.yaml'
+      - '.github/workflows/client-unit.yaml'
   pull_request:
     paths:
       - 'client/**'
-      - '.github/workflows/jest.yaml'
+      - '.github/workflows/client-unit.yaml'
 concurrency:
   group: ${{ github.workflow }}-${{ github.ref }}
   cancel-in-progress: true
@@ -32,6 +32,6 @@ jobs:
       - name: Stage client libs (Gulp)
         run: yarn run gulp client
         working-directory: client
-      - name: Run Unit Tests
-        run: yarn jest
+      - name: Run Vitest Unit Tests
+        run: yarn test
         working-directory: client

client/.eslintrc.js

@@ -113,9 +113,17 @@ module.exports = {
     plugins: basePlugins,
     overrides: [
         {
-            files: ["**/*.test.js", "**/*.test.ts", "**/tests/jest/**"],
-            env: {
-                jest: true,
+            files: ["**/*.test.js", "**/*.test.ts", "**/tests/vitest/**"],
+            globals: {
+                vi: "readonly",
+                describe: "readonly",
+                it: "readonly",
+                expect: "readonly",
+                beforeEach: "readonly",
+                afterEach: "readonly",
+                beforeAll: "readonly",
+                afterAll: "readonly",
+                test: "readonly",
             },
         },
         {

client/README.md

@@ -114,13 +114,13 @@ developer-facing API of your new code.
 
 ### Testing Technologies
 
-[Galaxy uses Jest](https://jestjs.io/) for its client-side unit testing
+[Galaxy uses Vitest](https://vitest.dev/) for its client-side unit testing
 framework.
 
 For testing Vue components, we use the [Vue testing
 utils](https://vue-test-utils.vuejs.org/) to mount individual components in a
-test bed and check them for rendered features. Please use jest-based mocking
-for isolating test functionality.
+test bed and check them for rendered features. Please use Vitest's mocking
+capabilities for isolating test functionality.
 
 ### Linting
 
@@ -152,17 +152,17 @@ executing all the client tests:
 
      yarn test
 
-##### Watch and rerun jest unit tests every time a source file changes
+##### Watch and rerun unit tests every time a source file changes
 
 This is incredibly handy, and there are a host of options in the interactive
-terminal this starts for executing Jest tests.
+terminal this starts for executing Vitest tests.
 
-     yarn run jest-watch
+     yarn test:watch
 
 ##### Run only specified test files when a source file changes
 
-    yarn run jest-watch MyModule
+    yarn test:watch MyModule
 
-    yarn run jest-watch Dialog
+    yarn test:watch Dialog
 
-    yarn run jest-watch workflow/run
+    yarn test:watch workflow/run

client/docs/composables.md

@@ -75,9 +75,10 @@ const store = new Vuex.Store({
 The second option is to mock the composable:
 
 ```js
+import { vi } from "vitest";
 import { useCurrentUser } from "@/composables/user";
 
-jest.mock("composables/user");
+vi.mock("composables/user");
 useCurrentUser.mockReturnValue({
     currentUser: {},
 });

client/docs/providers-and-renderers.md

@@ -125,7 +125,7 @@ mandatory markup, just one big empty slot.
 // Testing a renderless component
 
 import { shallowMount } from "@vue/test-utils";
-import { getLocalVue, waitForLifecyleEvent } from "tests/jest/helpers";
+import { getLocalVue, waitForLifecyleEvent } from "@tests/vitest/helpers";
 import DoodadProvider from "./DoodadProvider";
 
 describe("A renderless component", () => {

client/docs/unit-testing/debugging-unit-tests.md

@@ -7,18 +7,18 @@ parameters actually does.
 I've gone ahead and annotated all the options, hopefully this will save some time, at least until VS
 code updates its test extensions again.
 
-#### To debug a single Jest test:
+#### To debug a single Vitest test:
 
-1. Open a jest test (a file that ends with \*.test.js)
+1. Open a vitest test (a file that ends with \*.test.js or \*.test.ts)
 
 1. Make sure the test file is selected, especially if you have multiple files open. This process
    will fail confusingly and without obvious error if you have not launched the debugger with the
-   actual Jest test file selected, and it's easy to accidentally click into another file if you've
+   actual Vitest test file selected, and it's easy to accidentally click into another file if you've
    got a dozen open.
 
 1. Place a breakpoint in the margin of the file. You can place breakpoints anywhere in your source,
-   but you must launch the debugger while the jest file is selected because that is where jest and
-   webpack will start compiling. Alternatively, you can manually override the selected file in the
+   but you must launch the debugger while the vitest file is selected because that is where vitest
+   will start compiling. Alternatively, you can manually override the selected file in the
    configuration definition, like if you're testing the same file over and over again and don't want
    to worry about selecting it.
 
@@ -30,7 +30,7 @@ code updates its test extensions again.
 1. Click on the "Run and Debug" tab from the vscode icons on the left and choose the sample launch
    configuration (defined below) from the dropdown "run and debug". Or just hit F5.
 
-1. Wait a bit, for webpack to compile everything, eventually you should be able to hover over
+1. Wait a bit, for vitest to compile everything, eventually you should be able to hover over
    variables near your breakpoint and see their values in the "Variables" section of the Run and
    Debug pane.
 
@@ -41,28 +41,25 @@ code updates its test extensions again.
     "configurations": [
         {
             "type": "node",
-            "name": "debug selected jest test",
+            "name": "debug selected vitest test",
             "request": "launch",
 
-            // launches version of jest from inside the node_modules
+            // launches version of vitest from inside the node_modules
             // this means you need to have run yarn first
-            "program": "${workspaceFolder}/client/node_modules/jest/bin/jest",
+            "program": "${workspaceFolder}/client/node_modules/vitest/vitest.mjs",
             "args": [
-                // Alias -i.
-                // Normally jest opens up a bunch of workers to run all your tests faster
-                // but we don't want that right now.
-                "--runInBand",
+                // Run tests in a single thread for debugging
+                "--no-threads",
 
-                // finds jest config
-                "--config",
-                "${workspaceFolder}/client/tests/jest/jest.config.js",
+                // Run in watch mode so tests can be re-run
+                "--watch",
 
                 // This is how vscode references the currently selected file
                 "${file}"
             ],
             "cwd": "${workspaceFolder}/client",
 
-            // opens jest output in integrated terminal
+            // opens vitest output in integrated terminal
             "console": "integratedTerminal",
 
             // allows you to place breakpoints right in vscode's gutter

client/docs/unit-testing/readme.md

@@ -1,10 +1,10 @@
-[Galaxy uses Jest](https://jestjs.io/) for its client-side unit testing
+[Galaxy uses Vitest](https://vitest.dev/) for its client-side unit testing
 framework.
 
 For testing Vue components, we use the [Vue testing
 utils](https://vue-test-utils.vuejs.org/) to mount individual components in a
-test bed and check them for rendered features. Please use jest-based mocking
-for isolating test functionality.
+test bed and check them for rendered features. Please use Vitest's mocking
+capabilities for isolating test functionality.
 
 ### Specific test scenarios & examples
 

client/docs/unit-testing/strategies.md

@@ -37,11 +37,12 @@ export function theThingYouReallyCareAbout() {
 
 ```js static
 // myModule.test.js
+import { vi } from "vitest";
 import { theThingYouReallyCareAbout, redirectTo } from "./myModule";
 
-// calling jest.mock on the appropriate import path wraps the exports and gives
+// calling vi.mock on the appropriate import path wraps the exports and gives
 // access to new testing methods like mockImplementation
-jest.mock("./myModule");
+vi.mock("./myModule");
 redirectTo.mockImplementation((url) => {
     console.log(`I would have gone to: ${url}`);
 });

client/docs/unit-testing/writing-tests.md

@@ -23,20 +23,20 @@ The other side of the same coin is to test _only_ the unit in question. If your
 component has a model that uses a service that touches Vuex, which then uses
 Axios to fetch some data -- don't test all that at once. Break things apart and
 mock functionality to isolate testing to units. End to end testing is a
-separate thing that shouldn't be attempted using spec tests in Jest.
+separate thing that shouldn't be attempted using spec tests in Vitest.
 
 Assume nobody cares _how_ your code works, we just need to know that the public
 API you designed _does_ work. If performance problems or new tech necessitate a
 re-write, these tests become a guide for the next implementation.
 
 ### Writing a test file
 
-Jest will try to test any file ending in "\*.test.js". Please place your test
+Vitest will try to test any file ending in "\*.test.js" or "\*.test.ts". Please place your test
 files inside client/src folders right next to whatever files that they are
 testing.
 
-Jest has extensive documentation on the expect API, mocking, and more on the
-[official docs page](https://jestjs.io/docs/en/getting-started.html), which will
+Vitest has extensive documentation on the expect API, mocking, and more on the
+[official docs page](https://vitest.dev/guide/), which will
 be your best resource here.
 
 ```js static
@@ -63,10 +63,10 @@ describe("some module you wrote", () => {
 });
 ```
 
-### Check out the Jest helper functions
+### Check out the Vitest helper functions
 
 We have created some [common helpers for common testing
-scenarios](https://github.com/galaxyproject/galaxy/blob/dev/client/tests/jest/helpers.js).
+scenarios](https://github.com/galaxyproject/galaxy/blob/dev/client/tests/vitest/helpers.js).
 
 ### Mocking API calls
 

client/package.json

@@ -44,7 +44,6 @@
     "@popperjs/core": "^2.11.8",
     "@sentry/browser": "^7.74.1",
     "@sentry/vue": "^7.114.0",
-    "@types/jest": "^29.5.12",
     "@vueuse/core": "^10.5.0",
     "@vueuse/math": "^10.9.0",
     "ace-builds": "^1.39.0",
@@ -147,11 +146,12 @@
     "format": "prettier --write . --cache",
     "format-check": "prettier --check .",
     "prettier": "yarn run format",
-    "test": "yarn run jest",
-    "jest": "jest --config tests/jest/jest.config.js",
-    "jest-watch": "jest --config tests/jest/jest.config.js --watch",
-    "eslint-precommit": "eslint -c .eslintrc.js --quiet --ext .js,.vue,.ts src tests/jest/standalone",
-    "eslint": "eslint -c .eslintrc.js --ext .js,.vue,.ts src tests/jest/standalone",
+    "test": "vitest run",
+    "test:ui": "vitest --ui",
+    "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage",
+    "eslint-precommit": "eslint -c .eslintrc.js --quiet --ext .js,.vue,.ts src",
+    "eslint": "eslint -c .eslintrc.js --ext .js,.vue,.ts src",
     "type-check": "vue-tsc --noEmit"
   },
   "devDependencies": {
@@ -171,13 +171,14 @@
     "@types/underscore": "^1.11.12",
     "@typescript-eslint/eslint-plugin": "^6.8.0",
     "@typescript-eslint/parser": "^6.8.0",
+    "@vitejs/plugin-vue2": "^2.3.4",
+    "@vitest/coverage-v8": "^4.0.13",
+    "@vitest/ui": "^4.0.13",
     "@vue/test-utils": "^1.3.6",
     "@vue/tsconfig": "^0.4.0",
-    "@vue/vue2-jest": "^29.2.6",
     "amdi18n-loader": "^0.9.4",
     "autoprefixer": "10.4.16",
     "axios-mock-adapter": "^1.22.0",
-    "babel-jest": "^29.7.0",
     "babel-plugin-transform-import-meta": "^2.2.1",
     "buffer": "^6.0.3",
     "circular-dependency-plugin": "^5.2.2",
@@ -197,11 +198,7 @@
     "gulp": "^5.0.0",
     "ignore-loader": "^0.1.2",
     "imports-loader": "^5.0.0",
-    "jest": "^29.7.0",
-    "jest-environment-jsdom": "^29.7.0",
-    "jest-fail-on-console": "^3.3.1",
-    "jest-fixed-jsdom": "^0.0.2",
-    "jest-location-mock": "^2.0.0",
+    "jsdom": "^27.2.0",
     "jsdom-worker": "^0.3.0",
     "json-loader": "^0.5.7",
     "mini-css-extract-plugin": "^2.9.2",
@@ -212,14 +209,17 @@
     "prettier": "^3.6.2",
     "process": "^0.11.10",
     "raw-loader": "^4.0.2",
-    "sass": "^1.69.4",
+    "sass": "^1.94.2",
     "sass-loader": "^16.0.5",
     "store": "^2.0.12",
     "thread-loader": "^4.0.4",
-    "ts-jest": "^29.2.3",
     "ts-loader": "^9.5.2",
     "tsconfig-paths-webpack-plugin": "^4.1.0",
     "typescript": "^5.7.3",
+    "vite": "^7.2.4",
+    "vitest": "^4.0.13",
+    "vitest-fail-on-console": "^0.10.1",
+    "vitest-location-mock": "^1.0.4",
     "vue-loader": "^15.11.1",
     "vue-template-compiler": "^2.7.16",
     "vue-tsc": "2.2.12",
@@ -229,7 +229,6 @@
     "webpack-merge": "^6.0.1",
     "xml-js": "^1.6.11",
     "xml2js": "^0.6.2",
-    "yaml-jest": "^1.2.0",
     "yaml-loader": "^0.8.1"
   },
   "peerDependencies": {