[code-infra] Replace mocha with vitest for browser & jsdom tests (#14508)

Signed-off-by: Jose C Quintas Jr <[email protected]>
Co-authored-by: Jan Potoms <[email protected]>

Author: JCQuintas

.circleci/config.yml

@@ -26,16 +26,19 @@ parameters:
     type: string
     default: ''
 
+default-parameters: &default-parameters
+  react-version:
+    description: The version of react to be used
+    type: string
+    default: << pipeline.parameters.react-version >>
+  e2e-base-url:
+    description: The base url for running end-to-end test
+    type: string
+    default: << pipeline.parameters.e2e-base-url >>
+
 default-job: &default-job
   parameters:
-    react-version:
-      description: The version of react to be used
-      type: string
-      default: << pipeline.parameters.react-version >>
-    e2e-base-url:
-      description: The base url for running end-to-end test
-      type: string
-      default: << pipeline.parameters.e2e-base-url >>
+    <<: *default-parameters
   environment:
     # expose it globally otherwise we have to thread it from each job to the install command
     BROWSERSTACK_FORCE: << pipeline.parameters.browserstack-force >>
@@ -150,21 +153,46 @@ jobs:
       - install_js:
           react-version: << parameters.react-version >>
       - run:
-          name: Tests fake browser
-          command: pnpm test:coverage
-      - run:
-          name: Check coverage generated
-          command: |
-            if ! [[ -s coverage/lcov.info ]]
-            then
-              exit 1
-            fi
-      - run:
-          name: Coverage
-          command: |
-            curl -Os https://uploader.codecov.io/latest/linux/codecov
-            chmod +x codecov
-            ./codecov -t ${CODECOV_TOKEN} -Z -F "$REACT_VERSION-jsdom"
+          name: Test JSDOM
+          command: pnpm test:unit:jsdom
+
+  test_browser:
+    <<: *default-job
+    resource_class: medium+
+    steps:
+      - checkout
+      - install_js:
+          playwright: true
+          react-version: << parameters.react-version >>
+      - when:
+          condition:
+            not:
+              equal: ['stable', << parameters.react-version >>]
+          steps:
+            - run:
+                name: Test Browser
+                command: pnpm test:unit:browser
+      - when:
+          condition:
+            equal: ['stable', << parameters.react-version >>]
+          steps:
+            - run:
+                name: Test Browser + Coverage
+                command: pnpm test:unit:browser --coverage
+            - run:
+                name: Check coverage generated
+                command: |
+                  if ! [[ -s coverage/lcov.info ]]
+                  then
+                    exit 1
+                  fi
+            - run:
+                name: Coverage
+                command: |
+                  curl -Os https://uploader.codecov.io/latest/linux/codecov
+                  chmod +x codecov
+                  ./codecov -t ${CODECOV_TOKEN} -Z -F "$REACT_VERSION-browser"
+
   test_lint:
     <<: *default-job
     steps:
@@ -242,21 +270,6 @@ jobs:
             else
                 exit 0
             fi
-
-  test_browser:
-    <<: *default-job
-    steps:
-      - checkout
-      - install_js:
-          playwright: true
-          react-version: << parameters.react-version >>
-      - run:
-          name: Tests real browsers
-          command: pnpm test:karma
-      - store_artifacts:
-          # hardcoded in karma-webpack
-          path: /tmp/_karma_webpack_
-          destination: artifact-file
   test_types:
     <<: *default-job
     steps:
@@ -353,9 +366,7 @@ workflows:
     jobs:
       - checkout:
           <<: *default-context
-      - test_e2e_website:
-          requires:
-            - checkout
+      - test_e2e_website
 
   additional-tests:
     when:

babel.config.js

@@ -105,30 +105,6 @@ module.exports = function getBabelConfig(api) {
     ],
   ];
 
-  if (process.env.NODE_ENV === 'test') {
-    plugins.push(['@babel/plugin-transform-export-namespace-from']);
-    // We replace `date-fns` imports with an aliased `date-fns@v2` version installed as `date-fns-v2` for tests.
-    plugins.push([
-      'babel-plugin-replace-imports',
-      {
-        test: /date-fns/i,
-        replacer: 'date-fns-v2',
-        // This option is provided by the `patches/[email protected]` patch
-        filenameIncludes: 'src/AdapterDateFnsV2/',
-      },
-    ]);
-    plugins.push([
-      'babel-plugin-replace-imports',
-      {
-        test: /date-fns-jalali/i,
-        replacer: 'date-fns-jalali-v2',
-        // This option is provided by the `patches/[email protected]` patch
-        filenameIncludes: 'src/AdapterDateFnsJalaliV2/',
-      },
-      'replace-date-fns-jalali-imports',
-    ]);
-  }
-
   if (process.env.NODE_ENV === 'production') {
     if (!process.env.TEST_BUILD) {
       plugins.push(['babel-plugin-react-remove-properties', { properties: ['data-testid'] }]);

docs/tsconfig.json

@@ -9,7 +9,8 @@
     "resolveJsonModule": true,
     "skipLibCheck": true,
     "esModuleInterop": true,
-    "incremental": true
+    "incremental": true,
+    "types": ["@mui/internal-test-utils/initMatchers", "chai-dom", "mocha"]
   },
   "include": ["next-env.d.ts", "next.config.mjs", "docs-env.d.ts", "src", "pages/**/*.ts*", "data"],
   "exclude": ["docs/.next", "docs/export", "pages/playground"]

docs/vitest.config.jsdom.mts

@@ -0,0 +1,13 @@
+import { mergeConfig, defineProject } from 'vitest/config';
+import sharedConfig from '../vitest.shared.mts';
+import { getTestName } from '../scripts/getTestName.mts';
+
+export default mergeConfig(
+  sharedConfig,
+  defineProject({
+    test: {
+      name: getTestName(import.meta.url),
+      environment: 'jsdom',
+    },
+  }),
+);

mui-env.d.ts

@@ -1,11 +1,15 @@
 export {}; // Ensure this file is treated as a module to avoid global scope TS error
 
 declare global {
+  interface MUIEnv {
+    NODE_ENV?: string;
+  }
+
+  interface Process {
+    env: MUIEnv;
+  }
+
   // support process.env.NODE_ENV === '...'
   // @ts-ignore
-  const process: {
-    env: {
-      NODE_ENV?: string;
-    };
-  };
+  const process: Process;
 }

package.json

@@ -32,14 +32,12 @@
     "proptypes": "tsx ./docs/scripts/generateProptypes.ts",
     "size:snapshot": "node --max-old-space-size=2048 ./scripts/sizeSnapshot/create",
     "size:why": "pnpm size:snapshot --analyze --accurateBundles",
-    "tc": "node test/cli.js",
-    "test": "node scripts/test.mjs",
-    "test:coverage": "cross-env NODE_OPTIONS=--max-old-space-size=4096 NODE_ENV=test TZ=UTC BABEL_ENV=coverage nyc mocha 'packages/**/*.test.{js,ts,tsx}' 'docs/**/*.test.{js,ts,tsx}' && nyc report -r lcovonly",
-    "test:coverage:html": "cross-env NODE_ENV=test TZ=UTC BABEL_ENV=coverage nyc mocha 'packages/**/*.test.{js,ts,tsx}' 'docs/**/*.test.{js,ts,tsx}' && nyc report --reporter=html",
-    "test:coverage:inspect": "cross-env NODE_ENV=test TZ=UTC BABEL_ENV=coverage mocha --inspect-brk",
-    "test:karma": "cross-env NODE_ENV=test TZ=UTC karma start test/karma.conf.js",
-    "test:karma:parallel": "cross-env NODE_ENV=test TZ=UTC PARALLEL=true karma start test/karma.conf.js",
-    "test:unit": "cross-env NODE_ENV=test TZ=UTC mocha -n expose_gc 'packages/**/*.test.{js,ts,tsx}' 'docs/**/*.test.{js,ts,tsx}'",
+    "test": "pnpm test:unit:jsdom",
+    "test:jsdom": "pnpm test:unit:jsdom",
+    "test:unit": "pnpm test:unit:jsdom",
+    "test:unit:jsdom": "cross-env NODE_ENV=test TZ=UTC vitest",
+    "test:browser": "pnpm test:unit:browser",
+    "test:unit:browser": "cross-env NODE_ENV=test TZ=UTC BROWSER=true vitest",
     "test:e2e": "pnpm run release:build && cd test/e2e && pnpm run start",
     "test:e2e-website": "npx playwright test test/e2e-website --config test/e2e-website/playwright.config.ts",
     "test:e2e-website:dev": "PLAYWRIGHT_TEST_BASE_URL=http://localhost:3001 npx playwright test test/e2e-website --config test/e2e-website/playwright.config.ts",
@@ -99,7 +97,6 @@
     "@playwright/test": "^1.52.0",
     "@types/babel__core": "^7.20.5",
     "@types/babel__traverse": "^7.20.7",
-    "@types/chai": "^4.3.20",
     "@types/chai-dom": "^1.11.3",
     "@types/fs-extra": "^11.0.4",
     "@types/karma": "^6.3.9",
@@ -113,6 +110,9 @@
     "@types/yargs": "^17.0.33",
     "@typescript-eslint/eslint-plugin": "^8.31.1",
     "@typescript-eslint/parser": "^8.31.1",
+    "@vitejs/plugin-react": "^4.3.2",
+    "@vitest/browser": "^3.1.2",
+    "@vitest/coverage-v8": "^3.1.2",
     "@vvago/vale": "^3.11.2",
     "autoprefixer": "^10.4.21",
     "axe-core": "4.10.3",
@@ -121,7 +121,6 @@
     "babel-plugin-module-resolver": "^5.0.2",
     "babel-plugin-optimize-clsx": "^2.6.2",
     "babel-plugin-react-remove-properties": "^0.3.0",
-    "babel-plugin-replace-imports": "^1.0.2",
     "babel-plugin-search-and-replace": "^1.1.1",
     "babel-plugin-transform-inline-environment-variables": "^0.4.4",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
@@ -135,6 +134,7 @@
     "danger": "^13.0.4",
     "date-fns-jalali-v2": "npm:[email protected]",
     "date-fns-v2": "npm:[email protected]",
+    "esbuild": "^0.25.3",
     "eslint": "^8.57.1",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-airbnb-base": "^15.0.0",
@@ -169,6 +169,7 @@
     "karma-webpack": "^5.0.1",
     "lerna": "^8.2.2",
     "lodash": "^4.17.21",
+    "magic-string": "^0.30.17",
     "markdownlint-cli2": "^0.17.2",
     "mocha": "^11.2.2",
     "moment": "^2.30.1",
@@ -192,6 +193,8 @@
     "unist-util-visit": "^5.0.0",
     "util": "^0.12.5",
     "vite": "^6.3.4",
+    "vitest": "3.1.2",
+    "vitest-fail-on-console": "^0.7.1",
     "webpack": "^5.99.7",
     "webpack-bundle-analyzer": "^4.10.2",
     "webpack-cli": "^6.0.1",
@@ -204,8 +207,7 @@
   },
   "pnpm": {
     "patchedDependencies": {
-      "[email protected]": "patches/[email protected]",
-      "[email protected]": "patches/[email protected]"
+      "[email protected]": "patches/[email protected]"
     },
     "onlyBuiltDependencies": [
       "@swc/core",

packages/x-charts-pro/src/BarChartPro/BarChartPro.zoom.test.tsx

@@ -64,8 +64,7 @@ describeSkipIf(isJSDOM)('<BarChartPro /> - Zoom', () => {
     }
   });
 
-  it('should zoom on wheel', async function test() {
-    this.timeout(10000);
+  it('should zoom on wheel', async () => {
     const onZoomChange = sinon.spy();
     const { user } = render(
       <BarChartPro {...barChartProps} onZoomChange={onZoomChange} />,

packages/x-charts-pro/src/LineChartPro/LineChartPro.zoom.test.tsx

@@ -65,8 +65,7 @@ describeSkipIf(isJSDOM)('<LineChartPro /> - Zoom', () => {
     }
   });
 
-  it('should zoom on wheel', async function test() {
-    this.timeout(10000);
+  it('should zoom on wheel', async () => {
     const onZoomChange = sinon.spy();
     const { user } = render(
       <LineChartPro {...lineChartProps} onZoomChange={onZoomChange} />,

packages/x-charts-pro/src/ScatterChartPro/ScatterChartPro.zoom.test.tsx

@@ -91,8 +91,7 @@ describeSkipIf(isJSDOM)('<ScatterChartPro /> - Zoom', () => {
     }
   });
 
-  it('should zoom on wheel', async function test() {
-    this.timeout(10000);
+  it('should zoom on wheel', async () => {
     const onZoomChange = sinon.spy();
     const { user } = render(
       <ScatterChartPro {...scatterChartProps} onZoomChange={onZoomChange} />,

packages/x-charts-pro/vitest.config.browser.mts

@@ -0,0 +1,19 @@
+/// <reference types="@vitest/browser/providers/playwright" />
+import { mergeConfig } from 'vitest/config';
+import sharedConfig from '../../vitest.shared.mts';
+import { getTestName } from '../../scripts/getTestName.mts';
+
+export default mergeConfig(sharedConfig, {
+  test: {
+    name: getTestName(import.meta.url),
+    environment: 'browser',
+    browser: {
+      enabled: true,
+      instances: [
+        {
+          browser: 'chromium',
+        },
+      ],
+    },
+  },
+});

packages/x-charts-pro/vitest.config.jsdom.mts

@@ -0,0 +1,10 @@
+import { mergeConfig } from 'vitest/config';
+import sharedConfig from '../../vitest.shared.mts';
+import { getTestName } from '../../scripts/getTestName.mts';
+
+export default mergeConfig(sharedConfig, {
+  test: {
+    name: getTestName(import.meta.url),
+    environment: 'jsdom',
+  },
+});

packages/x-charts-vendor/vitest.config.browser.mts

@@ -0,0 +1,19 @@
+/// <reference types="@vitest/browser/providers/playwright" />
+import { mergeConfig } from 'vitest/config';
+import sharedConfig from '../../vitest.shared.mts';
+import { getTestName } from '../../scripts/getTestName.mts';
+
+export default mergeConfig(sharedConfig, {
+  test: {
+    name: getTestName(import.meta.url),
+    environment: 'browser',
+    browser: {
+      enabled: true,
+      instances: [
+        {
+          browser: 'chromium',
+        },
+      ],
+    },
+  },
+});

packages/x-charts-vendor/vitest.config.jsdom.mts

@@ -0,0 +1,10 @@
+import { mergeConfig } from 'vitest/config';
+import sharedConfig from '../../vitest.shared.mts';
+import { getTestName } from '../../scripts/getTestName.mts';
+
+export default mergeConfig(sharedConfig, {
+  test: {
+    name: getTestName(import.meta.url),
+    environment: 'jsdom',
+  },
+});

packages/x-charts/vitest.config.browser.mts

@@ -0,0 +1,19 @@
+/// <reference types="@vitest/browser/providers/playwright" />
+import { mergeConfig } from 'vitest/config';
+import sharedConfig from '../../vitest.shared.mts';
+import { getTestName } from '../../scripts/getTestName.mts';
+
+export default mergeConfig(sharedConfig, {
+  test: {
+    name: getTestName(import.meta.url),
+    environment: 'browser',
+    browser: {
+      enabled: true,
+      instances: [
+        {
+          browser: 'chromium',
+        },
+      ],
+    },
+  },
+});