Use Vitest browser to test react-admin

.github/workflows/test.yml

@@ -87,6 +87,8 @@ jobs:
           cache: 'yarn'
       - name: Install dependencies
         run: yarn
+      - name: Install Playwright Browsers
+        run: npx playwright install --with-deps
       - name: Unit Tests
         run: make test-unit
         env:

.gitignore

@@ -23,3 +23,4 @@ cypress/screenshots
 !.yarn/releases
 !.yarn/sdks
 !.yarn/versions
+__screenshots__

package.json

@@ -4,9 +4,9 @@
     "scripts": {
         "build": "lerna run build",
         "watch": "lerna run --parallel watch",
-        "test-unit": "cross-env NODE_ENV=test cross-env BABEL_ENV=cjs NODE_ICU_DATA=./node_modules/full-icu jest",
-        "test-unit-ci": "cross-env NODE_ENV=test cross-env BABEL_ENV=cjs NODE_ICU_DATA=./node_modules/full-icu jest --runInBand",
-        "test-e2e": "yarn run -s build && cross-env NODE_ENV=test && cd cypress && yarn test",
+        "test-unit": "cross-env NODE_ENV=test cross-env BABEL_ENV=cjs NODE_ICU_DATA=./node_modules/full-icu vitest run --no-file-parallelism --browser.headless",
+        "test-unit-ci": "cross-env NODE_ENV=test cross-env BABEL_ENV=cjs NODE_ICU_DATA=./node_modules/full-icu vitest run --no-file-parallelism",
+        "test-e2e": "yarn run -s build && cross-env NODE_ENV=test && cd cypress && yarn test",  
         "test-e2e-local": "cd cypress && yarn start",
         "test": "yarn test-unit && yarn test-e2e",
         "doc": "cd docs && jekyll server . --watch --host 0.0.0.0",
@@ -32,10 +32,11 @@
         "@storybook/react": "^8.4.4",
         "@storybook/react-webpack5": "^8.4.4",
         "@storybook/source-loader": "patch:@storybook/source-loader@npm%3A8.4.4#~/.yarn/patches/@storybook-source-loader-npm-8.4.4-55dafc88e2.patch",
-        "@types/jest": "^29.5.2",
         "@types/react": "^18.3.3",
         "@typescript-eslint/eslint-plugin": "^5.60.0",
         "@typescript-eslint/parser": "^5.60.0",
+        "@vitejs/plugin-react": "^4.3.4",
+        "@vitest/browser": "^3.0.4",
         "cross-env": "^5.2.0",
         "eslint": "^8.19.0",
         "eslint-config-prettier": "^9.1.0",
@@ -44,23 +45,19 @@
         "eslint-plugin-prettier": "^5.1.3",
         "eslint-plugin-testing-library": "^5.11.0",
         "full-icu": "^1.3.1",
-        "global-jsdom": "^9.0.1",
         "husky": "^2.3.0",
-        "jest": "^29.5.0",
-        "jest-circus": "29.5.0",
-        "jest-environment-jsdom": "^29.5.0",
-        "jest-resolve": "29.5.0",
-        "jest-watch-typeahead": "2.2.2",
         "lerna": "~7.1.3",
         "lint-staged": "^13.0.3",
         "lolex": "~2.3.2",
+        "playwright": "^1.50.0",
         "prettier": "~3.2.5",
         "raf": "~3.4.1",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
         "storybook": "^8.4.4",
-        "ts-jest": "^29.1.0",
         "typescript": "^5.1.3",
+        "vitest": "^3.0.4",
+        "vitest-browser-react": "^0.0.4",
         "whatwg-fetch": "^3.0.0"
     },
     "workspaces": [

packages/ra-core/codemods/__testfixtures__/replace-Admin-history-Authenticated.input.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import expect from 'expect';
+import { expect } from 'vitest';
 import { render, screen, waitFor } from '@testing-library/react';
 import { createMemoryHistory } from 'history';
 import { Routes, Route, useLocation } from 'react-router-dom';
@@ -20,12 +20,12 @@ describe('<Authenticated>', () => {
         const authProvider = {
             login: () => Promise.reject('bad method'),
             logout: () => Promise.reject('bad method'),
-            checkAuth: jest.fn().mockResolvedValueOnce(''),
+            checkAuth: vi.fn().mockResolvedValueOnce(''),
             checkError: () => Promise.reject('bad method'),
             getPermissions: () => Promise.reject('bad method'),
         };
         const store = memoryStore();
-        const reset = jest.spyOn(store, 'reset');
+        const reset = vi.spyOn(store, 'reset');
 
         render(
             <CoreAdminContext authProvider={authProvider} store={store}>
@@ -40,14 +40,14 @@ describe('<Authenticated>', () => {
 
     it('should logout, redirect to login and show a notification after a tick if the auth fails', async () => {
         const authProvider = {
-            login: jest.fn().mockResolvedValue(''),
-            logout: jest.fn().mockResolvedValue(''),
-            checkAuth: jest.fn().mockRejectedValue(undefined),
-            checkError: jest.fn().mockResolvedValue(''),
-            getPermissions: jest.fn().mockResolvedValue(''),
+            login: vi.fn().mockResolvedValue(''),
+            logout: vi.fn().mockResolvedValue(''),
+            checkAuth: vi.fn().mockRejectedValue(undefined),
+            checkError: vi.fn().mockResolvedValue(''),
+            getPermissions: vi.fn().mockResolvedValue(''),
         };
         const store = memoryStore();
-        const reset = jest.spyOn(store, 'reset');
+        const reset = vi.spyOn(store, 'reset');
         const history = createMemoryHistory();
 
         const Login = () => {

packages/ra-core/codemods/__testfixtures__/replace-Admin-history-Authenticated.output.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import expect from 'expect';
+import { expect } from 'vitest';
 import { render, screen, waitFor } from '@testing-library/react';
 import { TestMemoryRouter } from 'react-admin';
 import { Routes, Route, useLocation } from 'react-router-dom';
@@ -20,12 +20,12 @@ describe('<Authenticated>', () => {
         const authProvider = {
             login: () => Promise.reject('bad method'),
             logout: () => Promise.reject('bad method'),
-            checkAuth: jest.fn().mockResolvedValueOnce(''),
+            checkAuth: vi.fn().mockResolvedValueOnce(''),
             checkError: () => Promise.reject('bad method'),
             getPermissions: () => Promise.reject('bad method'),
         };
         const store = memoryStore();
-        const reset = jest.spyOn(store, 'reset');
+        const reset = vi.spyOn(store, 'reset');
 
         render(
             <CoreAdminContext authProvider={authProvider} store={store}>
@@ -40,14 +40,14 @@ describe('<Authenticated>', () => {
 
     it('should logout, redirect to login and show a notification after a tick if the auth fails', async () => {
         const authProvider = {
-            login: jest.fn().mockResolvedValue(''),
-            logout: jest.fn().mockResolvedValue(''),
-            checkAuth: jest.fn().mockRejectedValue(undefined),
-            checkError: jest.fn().mockResolvedValue(''),
-            getPermissions: jest.fn().mockResolvedValue(''),
+            login: vi.fn().mockResolvedValue(''),
+            logout: vi.fn().mockResolvedValue(''),
+            checkAuth: vi.fn().mockRejectedValue(undefined),
+            checkError: vi.fn().mockResolvedValue(''),
+            getPermissions: vi.fn().mockResolvedValue(''),
         };
         const store = memoryStore();
-        const reset = jest.spyOn(store, 'reset');
+        const reset = vi.spyOn(store, 'reset');
 
         const Login = () => {
             const location = useLocation();