Migrate from Jest to Vitest

This migrates our tests from using the Jest testing framework to Vitest.

jest.setup.js

@@ -1,11 +0,0 @@
-import 'whatwg-fetch';
-import { server } from './src/test/mocks/server';
-
-jest.mock('@unleash/proxy-client-react', () => ({
-  useUnleashContext: () => jest.fn(),
-  useFlag: jest.fn(() => true),
-}));
-
-beforeAll(() => server.listen());
-afterEach(() => server.resetHandlers());
-afterAll(() => server.close());

package.json

@@ -26,32 +26,6 @@
     "redux": "5.0.1",
     "redux-promise-middleware": "6.2.0"
   },
-  "jest": {
-    "coverageDirectory": "./coverage/",
-    "collectCoverage": true,
-    "collectCoverageFrom": [
-      "src/**/*.js",
-      "!src/**/stories/*",
-      "!src/entry-dev.js"
-    ],
-    "testEnvironment": "jsdom",
-    "roots": [
-      "<rootDir>/src/"
-    ],
-    "moduleNameMapper": {
-      "\\.(css|scss)$": "identity-obj-proxy"
-    },
-    "transformIgnorePatterns": [
-      "node_modules/(?!(@scalprum|@openshift|@redhat-cloud-services|lodash-es|uuid)/)"
-    ],
-    "setupFiles": [
-      "jest-canvas-mock"
-    ],
-    "setupFilesAfterEnv": [
-      "./src/test/jest.setup.js"
-    ],
-    "testTimeout": 20000
-  },
   "devDependencies": {
     "@babel/core": "7.24.7",
     "@babel/eslint-parser": "7.24.7",
@@ -68,13 +42,14 @@
     "@testing-library/jest-dom": "6.4.6",
     "@testing-library/react": "16.0.0",
     "@testing-library/user-event": "14.5.2",
-    "@types/jest": "29.5.12",
+    "@types/node-fetch": "2.6.11",
     "@types/react": "18.3.3",
     "@types/react-dom": "18.3.0",
     "@types/react-redux": "7.1.33",
     "@types/uuid": "10.0.0",
     "@typescript-eslint/eslint-plugin": "7.16.1",
     "@typescript-eslint/parser": "7.16.0",
+    "@vitejs/plugin-react": "4.3.1",
     "babel-jest": "29.7.0",
     "babel-plugin-dual-import": "1.2.1",
     "babel-plugin-transform-imports": "2.0.0",
@@ -94,7 +69,6 @@
     "git-revision-webpack-plugin": "5.0.0",
     "history": "5.3.0",
     "identity-obj-proxy": "3.0.0",
-    "jest": "29.7.0",
     "jest-canvas-mock": "2.5.2",
     "jest-environment-jsdom": "29.7.0",
     "jest-fail-on-console": "3.3.0",
@@ -111,6 +85,7 @@
     "ts-node": "10.9.2",
     "typescript": "5.1.6",
     "uuid": "10.0.0",
+    "vitest": "1.6.0",
     "webpack-bundle-analyzer": "4.10.2",
     "whatwg-fetch": "3.6.20"
   },
@@ -125,8 +100,9 @@
     "stage-stable": "STAGE=true npm run prod-stable",
     "stage-beta": "STAGE=true npm run prod-beta",
     "stage-beta:msw": "MSW=TRUE npm run stage-beta",
-    "test": "TZ=UTC jest --verbose --no-cache",
-    "test:single": "jest --verbose -w 1",
+    "test": "TZ=UTC vitest run",
+    "test:watch": "TZ=UTC vitest",
+    "test:coverage": "TZ=UTC vitest run --coverage",
     "build": "webpack --config config/prod.webpack.config.js",
     "api": "npm-run-all api:pull api:generate",
     "api:generate": "bash api/codegen.sh",

src/test/.eslintrc

@@ -1,6 +1,5 @@
 {
   "env": {
-    "jest": true,
     "es6": true
   },
   "plugins": [

src/test/jest.setup.js

@@ -1,72 +0,0 @@
-import 'whatwg-fetch';
-//Needed for correct jest extends types
-import '@testing-library/jest-dom';
-import failOnConsole from 'jest-fail-on-console';
-
-import { server } from './mocks/server';
-
-// ResizeObserver is needed for responsive Chart.js charts.
-// As it's not defined in jsdom it needs to be mocked or polyfilled
-// Following is the minimal mock implementation needed for
-// the tests to run correctly
-global.ResizeObserver = jest.fn().mockImplementation(() => ({
-  observe: jest.fn(),
-  unobserve: jest.fn(),
-  disconnect: jest.fn(),
-}));
-
-// or with options:
-failOnConsole({
-  shouldFailOnWarn: false,
-  silenceMessage: (errorMessage) => {
-    if (
-      // Upgrading @patternfly/react-core caused propTypes error in Pf4FormTemplate
-      // https://github.com/data-driven-forms/react-forms/issues/1352
-      errorMessage.includes(
-        'Failed prop type: Invalid prop `FormWrapper` supplied to `FormTemplate`, expected one of type [function].'
-      )
-    ) {
-      // eslint-disable-next-line no-console
-      console.log(
-        'Suppressed error',
-        'Failed prop type: Invalid prop `FormWrapper` supplied to `FormTemplate`, expected one of type [function]',
-        'see [https://github.com/data-driven-forms/react-forms/issues/1352]'
-      );
-      return true;
-    }
-    // TODO [2023-08] CreateImageWizard warnings to be fixed later.
-    if (
-      errorMessage.includes('CreateImageWizard') &&
-      (errorMessage.includes(
-        'Cannot update a component (`ReactFinalForm`) while rendering a different component (`TargetEnvironment`)'
-      ) ||
-        errorMessage.includes(
-          'Cannot update a component (`TextField`) while rendering a different component (`TextField`). To locate the bad setState() call inside `TextField`'
-        ) ||
-        errorMessage.includes(
-          'Cannot update a component (`TextField`) while rendering a different component (`FormSpy`)'
-        ) ||
-        errorMessage.includes(
-          "Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application."
-        ) ||
-        // [2023-09] Suppresses an error that occurs on the GCP step of the Wizard.
-        errorMessage.includes(
-          'Warning: Cannot update a component (`ForwardRef(Field)`) while rendering a different component (`Radio`). To locate the bad setState() call inside `Radio`, follow the stack trace as described in https://reactjs.org/link/setstate-in-render'
-        ))
-    ) {
-      // eslint-disable-next-line no-console
-      console.warn(errorMessage);
-      return true;
-    }
-    return false;
-  },
-});
-
-jest.mock('@unleash/proxy-client-react', () => ({
-  useUnleashContext: () => jest.fn(),
-  useFlag: jest.fn(() => true),
-}));
-
-beforeAll(() => server.listen());
-afterEach(() => server.resetHandlers());
-afterAll(() => server.close());

src/test/setup.ts

@@ -0,0 +1,5 @@
+import { server } from './mocks/server';
+
+beforeAll(() => server.listen({ onUnhandledRequest: 'error' }));
+afterAll(() => server.close());
+afterEach(() => server.resetHandlers());

tsconfig.json

@@ -8,6 +8,7 @@
     "jsx": "react-jsx",
     "allowJs": true,
     "moduleResolution": "node",
+    "types": ["vitest/globals", "@testing-library/jest-dom"],
     "strictNullChecks": true,
     "allowSyntheticDefaultImports": true
   }

vitest.config.ts

@@ -0,0 +1,31 @@
+import react from '@vitejs/plugin-react';
+
+const config = {
+  plugins: [react()],
+  test: {
+    globals: true,
+    environment: 'jsdom',
+    setupFiles: ['./src/test/setup.ts'],
+    coverage: {
+      provider: 'v8',
+      reporter: 'text',
+    },
+    server: {
+      deps: {
+        inline: ['@patternfly', 'clsx'],
+      },
+    },
+    fileParallelism: false,
+    testTimeout: 10000,
+  },
+  resolve: {
+    mainFields: ['module'],
+  },
+  esbuild: {
+    loader: 'tsx',
+    include: /src\/.*\.[tj]sx?$/,
+    exclude: [],
+  },
+};
+
+export default config;