Migrate to vitest

.github/workflows/ci.yml

@@ -7,9 +7,6 @@ on:
       - '[0-9].[0-9]+'  # matches to backport branches, e.g. 3.6
     tags: [ 'v*' ]
   pull_request:
-    branches:
-      - master
-      - '[0-9].[0-9]+'
 
 
 jobs:
@@ -162,6 +159,7 @@ jobs:
         path: |
           ${{ env.yarn_cache }}
           admin-js/node_modules
+          admin-js/yarn.lock
     - name: Yarn install
       run: yarn install
       working-directory: admin-js/

admin-js/package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@vitejs/plugin-react": "4.5.1",
     "react": "18.2.0",
     "react-admin": "4.16.7",
     "react-dom": "18.2.0",
@@ -34,15 +35,18 @@
     "@testing-library/react": "16.3.2",
     "@testing-library/user-event": "14.6.6",
     "@ungap/structured-clone": "1.3.3",
-    "jest": "30.4.2",
-    "jest-environment-jsdom": "30.4.1",
+    "@vitest/coverage-v8": "3.2.2",
+    "extend-expect": "3.0.0",
     "jest-fail-on-console": "3.3.4",
+    "jsdom": "20.0.3",
+    "vitest": "3.2.2",
+    "vitest-location-mock": "1.0.1",
     "whatwg-fetch": "3.6.20"
   },
   "scripts": {
     "dev": "vite",
     "build": "vite build",
-    "test": "jest"
+    "test": "vitest"
   },
   "eslintConfig": {
     "extends": [

admin-js/tests/permissions.test.js → admin-js/tests/permissions.test.jsx

@@ -1,3 +1,4 @@
+import {beforeAll, describe, expect, test} from "vitest";
 import {within} from "@testing-library/dom";
 import {screen, waitFor} from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
@@ -25,7 +26,7 @@
     beforeAll(() => setLogin("filter", ""));
 
     test("view", async () => {
         const table = await screen.findByRole("table");
         const rows = within(table).getAllByRole("row").slice(1);
         expect(rows).toHaveLength(5);
         expect(rows.map(r => within(r).getAllByRole("cell")[1].textContent)).toEqual(["1", "3", "4", "5", "6"]);
@@ -49,7 +50,7 @@
         await userEvent.click(await screen.findByRole("button", {"name": "Set to 7"}));
         expect(await screen.findByText("Update 6 simples")).toBeInTheDocument();
         await userEvent.click(screen.getByRole("button", {"name": "Confirm"}));
         await waitFor(() => screen.getAllByText("7"));
 
         const table = await screen.findByRole("table");
         const rows = within(table).getAllByRole("row");

admin-js/tests/relationships.test.js → admin-js/tests/relationships.test.jsx

@@ -1,3 +1,4 @@
+import {expect, test} from "vitest";
 import {within} from "@testing-library/dom";
 import {screen, waitFor} from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
@@ -32,7 +33,7 @@
 
 test("onetomany child displays", async () => {
     await userEvent.click(await screen.findByRole("button", {"name": "Open menu"}));
     await userEvent.click(await screen.findByText("Onetomany children"));
 
     await waitFor(() => screen.getByRole("heading", {"name": "Onetomany children"}));
     await sleep(1);
@@ -66,7 +67,7 @@
     await userEvent.click(await screen.findByRole("button", {"name": "Open menu"}));
     await userEvent.click(await screen.findByText("Onetoone parents"));
 
     await waitFor(() => screen.getByRole("heading", {"name": "Onetoone parents"}));
     await sleep(1);
 
     const table = screen.getByRole("table");
@@ -84,7 +85,7 @@
 
 test("manytomany left displays", async () => {
     await userEvent.click(await screen.findByRole("button", {"name": "Open menu"}));
     await userEvent.click(await screen.findByText("Manytomany lefts"));
 
     await waitFor(() => screen.getByRole("heading", {"name": "Manytomany lefts"}));
     await sleep(1);
@@ -131,7 +132,7 @@
 
 test("composite foreign key child displays table", async () => {
     await userEvent.click(await screen.findByRole("button", {"name": "Open menu"}));
     await userEvent.click(await screen.findByText("Composite foreign key children"));
 
     await waitFor(() => screen.getByRole("heading", {"name": "Composite foreign key children"}));
     await userEvent.click(screen.getByRole("button", {"name": "Columns"}));
@@ -157,7 +158,7 @@
     await userEvent.click(await screen.findByRole("button", {"name": "Open menu"}));
     await userEvent.click(await screen.findByText("Composite foreign key parents"));
 
     await waitFor(() => screen.getByRole("heading", {"name": "Composite foreign key parents"}));
     await sleep(1);
     const table = screen.getAllByRole("table")[0];
     const rows = within(table).getAllByRole("row").filter((e) => e.parentElement.parentElement === table);
@@ -182,7 +183,7 @@
     await userEvent.click(await screen.findByRole("button", {"name": "Open menu"}));
     await userEvent.click(await screen.findByText("Composite foreign key parents"));
 
     await waitFor(() => screen.getByRole("heading", {"name": "Composite foreign key parents"}));
     const table = screen.getAllByRole("table")[0];
     const rows = within(table).getAllByRole("row").filter((e) => e.parentElement.parentElement === table);
     await userEvent.click(within(rows[1]).getByRole("link", {"name": "Edit"}));

admin-js/tests/setupTests.js → admin-js/tests/setupTests.jsx

@@ -1,29 +1,33 @@
 const http = require("http");
+//import "vitest-location-mock";
 const {spawn} = require("child_process");
-import "whatwg-fetch";  // https://github.com/jsdom/jsdom/issues/1724
-import "@testing-library/jest-dom";
-import failOnConsole from "jest-fail-on-console";
+//import failOnConsole from "jest-fail-on-console";
 import {memoryStore} from "react-admin";
+import {afterAll, beforeAll, beforeEach, expect} from "vitest";
+import "@testing-library/jest-dom/vitest";
 import {configure, render, screen} from "@testing-library/react";
-import * as structuredClone from "@ungap/structured-clone";
+//import * as structuredClone from "@ungap/structured-clone";
 
-const {App} = require("../src/App");
+delete globalThis.fetch;
+await import("whatwg-fetch");
+
+import {App} from "../src/App";
 
 let pythonProcess;
 let STATE;
 
-jest.setTimeout(300000);  // 5 mins
+/*jest.setTimeout(300000);  // 5 mins
 configure({"asyncUtilTimeout": 10000});
 jest.mock("react-admin", () => {
     const originalModule = jest.requireActual("react-admin");
     return {
         ...originalModule,
         downloadCSV: jest.fn(),  // Mock downloadCSV to test export button.
     };
-});
+});*/
 
 // https://github.com/jsdom/jsdom/issues/3363#issuecomment-1387439541
-global.structuredClone = structuredClone.default;
+//global.structuredClone = structuredClone.default;
 
 // To render full-width
 window.matchMedia = (query) => ({
@@ -33,12 +37,12 @@ window.matchMedia = (query) => ({
 });
 
 // Ignore not implemented errors
-window.scrollTo = jest.fn();
+//window.scrollTo = jest.fn();
 
 
 global.sleep = (delay_s) => new Promise((resolve) => setTimeout(resolve, delay_s * 1000));
 
-failOnConsole({
+/*failOnConsole({
     silenceMessage: (msg) => {
         return (
             // Suppress act() warnings, because there's too many async changes happening.
@@ -49,7 +53,7 @@ failOnConsole({
             || msg.includes("The above error occurred in the <EditBase> component")
         );
     }
-});
+});*/
 
 beforeAll(async() => {
     if (!global.pythonProcessPath)
@@ -103,7 +107,7 @@ beforeEach(async () => {
     localStorage.clear();
 
     if (STATE) {
-        const resp = await fetch("http://localhost:8080/admin/token", {"method": "POST", "body": JSON.stringify(login)});
+        const resp = await fetch("/admin/token", {"method": "POST", "body": JSON.stringify(login)});
         localStorage.setItem("identity", resp.headers.get("X-Token"));
         render(<App aiohttpState={STATE} store={memoryStore()} />);
         const profile = await screen.findByText(login["username"], {"exact": false});

admin-js/tests/simple.test.js → admin-js/tests/simple.test.jsx

@@ -1,3 +1,4 @@
+import {expect, test} from "vitest";
 import {within} from "@testing-library/dom";
 import {screen, waitFor} from "@testing-library/react";
 import userEvent from "@testing-library/user-event";

admin-js/vite.config.js

@@ -1,4 +1,5 @@
-import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import {defineConfig} from "vite";
 
 export default defineConfig({
     build: {
@@ -12,4 +13,25 @@ export default defineConfig({
         },
         sourcemap: true,
     },
+    plugins: [react()],
+    test: {
+        clearMocks: true,
+        coverage: {
+            exclude: [],
+        },
+        environment: "jsdom",
+        environmentOptions: {
+            jsdom: {
+                url: "http://localhost:8080",
+                pretendToBeVisual: true
+            }
+        },
+        expect: {
+            requireAssertions: true
+        },
+        fileParallelism: false,
+        mockReset: true,
+        restoreMocks: true,
+        setupFiles: "tests/setupTests.jsx",
+    }
 })