[code-infra] Vitest test migration

.circleci/config.yml

@@ -122,7 +122,7 @@ jobs:
       - install_js
       - run:
           name: Tests fake browser
-          command: pnpm test:coverage:ci
+          command: pnpm test:node --no-isolate --no-file-parallelism --coverage
       - run:
           name: Check coverage generated
           command: |
@@ -151,6 +151,8 @@ jobs:
             curl -Os https://uploader.codecov.io/latest/linux/codecov
             chmod +x codecov
             ./codecov -t ${CODECOV_TOKEN} -Z -F "$REACT_VERSION-jsdom"
+      - store_test_results:
+          path: test-results
   test_lint:
     <<: *default-job
     steps:
@@ -277,7 +279,7 @@ jobs:
           browsers: true
       - run:
           name: Tests real browsers
-          command: pnpm test:karma
+          command: pnpm test:browser --coverage --no-file-parallelism
       - run:
           name: Check coverage generated
           command: |
@@ -295,6 +297,8 @@ jobs:
           # hardcoded in karma-webpack
           path: /tmp/_karma_webpack_
           destination: artifact-file
+      - store_test_results:
+          path: test-results
   test_e2e:
     <<: *default-job
     docker:

.gitignore

@@ -46,3 +46,4 @@ docs/public/static/blog/feed/*
 .nx/workspace-data
 screenshots
 packed
+test-results

.mocharc.js

@@ -9,7 +9,7 @@ module.exports = {
   ],
   recursive: true,
   timeout: (process.env.CIRCLECI === 'true' ? 5 : 2) * 1000, // Circle CI has low-performance CPUs.
-  reporter: 'dot',
+  reporter: 'spec',
   require: ['@mui/internal-test-utils/setupBabel', '@mui/internal-test-utils/setupJSDOM'],
   'watch-ignore': [
     // default

docs/src/theming.test.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer, screen, fireEvent } from '@mui/internal-test-utils';
+import { createRenderer, fireEvent } from '@mui/internal-test-utils';
 import { ThemeProvider, createTheme, useColorScheme } from '@mui/material/styles';
 import Box from '@mui/material/Box';
 import { THEME_ID as JOY_THEME_ID, extendTheme } from '@mui/joy/styles';
@@ -29,7 +29,7 @@ describe('docs demo theming', () => {
   const { render } = createRenderer();
 
   it('should inherit the theme.palette.mode from upper theme', () => {
-    render(
+    const screen = render(
       <UpperProvider>
         <DemoInstanceThemeProvider runtimeTheme={undefined}>
           <Box

docs/vitest.config.browser.mts

@@ -0,0 +1,4 @@
+// eslint-disable-next-line import/no-relative-packages
+import sharedConfig from '../vitest.shared.mts';
+
+export default sharedConfig(import.meta.url);

docs/vitest.config.mts

@@ -0,0 +1,4 @@
+// eslint-disable-next-line import/no-relative-packages
+import sharedConfig from '../vitest.shared.mts';
+
+export default sharedConfig(import.meta.url, { jsdom: true });

package.json

@@ -50,11 +50,11 @@
     "size:snapshot": "pnpm -F ./test/bundle-size check",
     "size:why": "pnpm size:snapshot --analyze",
     "start": "pnpm install && pnpm docs:dev",
-    "test": "node scripts/test.mjs",
     "tc": "nx run nx_test_tc",
     "test:attw": "pnpm run --parallel -r attw",
     "test:extended": "pnpm eslint && pnpm typescript && pnpm test:coverage",
     "test:coverage": "nx run nx_test_coverage",
+    "vitest": "vitest",
     "test:coverage:ci": "nx run nx_test_coverage_ci",
     "test:coverage:html": "nx run nx_test_coverage_html",
     "test:e2e": "cross-env NODE_ENV=production pnpm test:e2e:build && concurrently --success first --kill-others \"pnpm test:e2e:run\" \"pnpm test:e2e:server\"",
@@ -76,7 +76,10 @@
     "test:regressions-pigment-css:dev": "concurrently \"pnpm test:regressions-pigment-css:build --watch\" \"pnpm test:regressions-pigment-css:server\"",
     "test:regressions-pigment-css:run": "nx run nx_test_regressions_pigment_css_run",
     "test:regressions-pigment-css:server": "pnpm --filter @app/pigment-css-vite-app run preview --port 5001",
-    "test:unit": "nx run nx_test_unit",
+    "test": "pnpm test:node",
+    "test:unit": "cross-env TZ=UTC vitest",
+    "test:node": "cross-env TEST_SCOPE=node pnpm test:unit",
+    "test:browser": "cross-env TEST_SCOPE=browser pnpm test:unit",
     "test:argos": "code-infra argos-push --folder test/regressions/screenshots/chrome",
     "typescript": "lerna run --no-bail typescript",
     "typescript:ci": "lerna run --concurrency 1 --no-bail typescript",

packages-internal/scripts/package.json

@@ -24,7 +24,7 @@
     "build": "tsc -b tsconfig.json",
     "release:publish": "pnpm build && pnpm publish --tag latest",
     "release:publish:dry-run": "pnpm build && pnpm publish --tag latest --registry=\"http://localhost:4873/\"",
-    "test": "cd ../../ && cross-env NODE_ENV=test mocha --config packages-internal/scripts/typescript-to-proptypes/test/.mocharc.js 'packages-internal/scripts/typescript-to-proptypes/**/*.test.?(c|m)[jt]s?(x)' 'packages-internal/scripts/generate-llms-txt/**/*.test.?(c|m)[jt]s?(x)'",
+    "test": "pnpm --workspace-root test:unit --project \"*:@mui/internal-scripts\"",
     "typescript": "tsc -b tsconfig.typecheck.json"
   },
   "dependencies": {

packages-internal/scripts/tsconfig.typecheck.json

@@ -6,6 +6,6 @@
     "noEmit": true
   },
   "include": ["./**/*.ts"],
-  "exclude": ["./build", "./node_modules"],
+  "exclude": ["./build", "./node_modules", "vitest.config.ts"],
   "references": [{ "path": "../../packages-internal/docs-utils/tsconfig.build.json" }]
 }

packages-internal/scripts/vitest.config.mts

@@ -0,0 +1,4 @@
+// eslint-disable-next-line import/no-relative-packages
+import sharedConfig from '../../vitest.shared.mts';
+
+export default sharedConfig(import.meta.url);

packages-internal/test-utils/package.json

@@ -57,6 +57,7 @@
     "@types/chai": "^4.3.20",
     "@types/chai-dom": "^1.11.3",
     "@types/format-util": "^1.0.4",
+    "@types/jsdom": "^21.1.7",
     "@types/prop-types": "^15.7.15",
     "@types/react": "^19.1.11",
     "@types/react-dom": "^19.1.7",

packages-internal/test-utils/src/createRenderer.tsx

@@ -19,6 +19,7 @@ import { userEvent } from '@testing-library/user-event';
 import * as React from 'react';
 import * as ReactDOMServer from 'react-dom/server';
 import { useFakeTimers } from 'sinon';
+import { VitestUtils } from 'vitest';
 import reactMajor from './reactMajor';
 
 interface Interaction {
@@ -348,11 +349,28 @@ function createVitestClock(
   defaultMode: 'fake' | 'real',
   config: ClockConfig,
   options: Exclude<Parameters<typeof useFakeTimers>[0], number | Date>,
-  vi: any,
+  vi: import('vitest').VitestUtils,
 ): Clock {
   if (defaultMode === 'fake') {
     beforeEach(() => {
-      vi.useFakeTimers(options);
+      vi.useFakeTimers({
+        now: config,
+        // useIsFocusVisible schedules a global timer that needs to persist regardless of whether components are mounted or not.
+        // Technically we'd want to reset all modules between tests but we don't have that technology.
+        // In the meantime just continue to clear native timers like with did for the past years when using `sinon` < 8.
+        shouldClearNativeTimers: true,
+        toFake: [
+          'setTimeout',
+          'setInterval',
+          'clearTimeout',
+          'clearInterval',
+          'requestAnimationFrame',
+          'cancelAnimationFrame',
+          'performance',
+          'Date',
+        ],
+        ...options,
+      });
       if (config) {
         vi.setSystemTime(config);
       }
@@ -374,7 +392,27 @@ function createVitestClock(
   return {
     withFakeTimers: () => {
       beforeEach(() => {
-        vi.useFakeTimers(options);
+        vi.useFakeTimers({
+          now: config,
+          // useIsFocusVisible schedules a global timer that needs to persist regardless of whether components are mounted or not.
+          // Technically we'd want to reset all modules between tests but we don't have that technology.
+          // In the meantime just continue to clear native timers like with did for the past years when using `sinon` < 8.
+          shouldClearNativeTimers: true,
+          toFake: [
+            'setTimeout',
+            'setInterval',
+            'clearTimeout',
+            'clearInterval',
+            'requestAnimationFrame',
+            'cancelAnimationFrame',
+            'performance',
+            'Date',
+          ],
+          ...options,
+        });
+        if (config) {
+          vi.setSystemTime(config);
+        }
       });
       afterEach(() => {
         vi.useRealTimers();
@@ -511,7 +549,7 @@ export interface CreateRendererOptions extends Pick<RenderOptions, 'strict' | 's
    * Vitest needs to be injected because this file is transpiled to commonjs and vitest is an esm module.
    * @default {}
    */
-  vi?: any;
+  vi?: VitestUtils;
 }
 
 export function createRenderer(globalOptions: CreateRendererOptions = {}): Renderer {
@@ -520,7 +558,7 @@ export function createRenderer(globalOptions: CreateRendererOptions = {}): Rende
     clockConfig,
     strict: globalStrict = true,
     strictEffects: globalStrictEffects = globalStrict,
-    vi = (globalThis as any).vi || {},
+    vi = (globalThis as any).vi as typeof import('vitest').vi | undefined,
     clockOptions,
   } = globalOptions;
   // save stack to re-use in test-hooks
@@ -804,6 +842,6 @@ function act<T>(callback: () => void | T | Promise<T>) {
 
 const bodyBoundQueries = within(document.body, { ...queries, ...customQueries });
 
-export * from '@testing-library/react/pure';
+export { renderHook, waitFor, within } from '@testing-library/react/pure';
 export { act, fireEvent };
 export const screen: Screen & typeof bodyBoundQueries = { ...rtlScreen, ...bodyBoundQueries };

packages-internal/test-utils/src/setupVitest.ts

@@ -1,26 +1,10 @@
 import { beforeAll, afterAll, it } from 'vitest';
-import * as testingLibrary from '@testing-library/dom';
 import failOnConsole from 'vitest-fail-on-console';
-import './initMatchers';
+import * as chai from 'chai';
+import './chai.types';
+import chaiPlugin from './chaiPlugin';
 
-// checking if an element is hidden is quite expensive
-// this is only done in CI as a fail safe. It can still explicitly be checked
-// in the test files which helps documenting what is part of the DOM but hidden
-// from assistive technology
-const defaultHidden = !process.env.CI;
-
-// adds verbosity for something that might be confusing
-console.warn(`${defaultHidden ? 'including' : 'excluding'} inaccessible elements by default`);
-
-testingLibrary.configure({
-  // JSDOM logs errors otherwise on `getComputedStyle(element, pseudoElement)` calls.
-  computedStyleSupportsPseudoElements: false,
-  defaultHidden,
-});
-
-// Enable missing act warnings: https://github.com/reactwg/react-18/discussions/102
-(globalThis as any).jest = null;
-(globalThis as any).IS_REACT_ACT_ENVIRONMENT = true;
+chai.use(chaiPlugin);
 
 failOnConsole({
   silenceMessage: (message) => {
@@ -80,38 +64,3 @@ if (!globalThis.after) {
 if (!globalThis.specify) {
   (globalThis as any).specify = wrappedIt;
 }
-
-const isJsdom = typeof window !== 'undefined' && window.navigator.userAgent.includes('jsdom');
-
-// Only necessary when not in browser mode.
-if (isJsdom) {
-  class Touch {
-    instance: any;
-
-    constructor(instance: any) {
-      this.instance = instance;
-    }
-
-    get identifier() {
-      return this.instance.identifier;
-    }
-
-    get pageX() {
-      return this.instance.pageX;
-    }
-
-    get pageY() {
-      return this.instance.pageY;
-    }
-
-    get clientX() {
-      return this.instance.clientX;
-    }
-
-    get clientY() {
-      return this.instance.clientY;
-    }
-  }
-  // @ts-expect-error
-  globalThis.window.Touch = Touch;
-}

packages-internal/test-utils/src/setupVitestBrowser.ts

@@ -0,0 +1,8 @@
+import * as chai from 'chai';
+import chaiDom from 'chai-dom';
+
+chai.use(chaiDom);
+
+// Enable missing act warnings: https://github.com/reactwg/react-18/discussions/102
+(globalThis as any).jest = null;
+(globalThis as any).IS_REACT_ACT_ENVIRONMENT = true;

packages-internal/test-utils/src/setupVitestJsdom.ts

@@ -0,0 +1,81 @@
+import { configure } from '@testing-library/dom';
+import { JSDOM } from 'jsdom';
+
+// We can use jsdom-global at some point if maintaining these lists is a burden.
+const whitelist = [
+  // used by React's experimental cache API
+  // Always including it to reduce churn when switching between React builds
+  'AbortController',
+  // required for fake getComputedStyle
+  'CSSStyleDeclaration',
+  'Element',
+  'Event',
+  'TouchEvent',
+  'Image',
+  'HTMLElement',
+  'HTMLInputElement',
+  'Node',
+  'Performance',
+  'document',
+  'DocumentFragment',
+];
+const blacklist = new Set(['sessionStorage', 'localStorage']);
+
+function initDom() {
+  if (globalThis.window) {
+    return;
+  }
+
+  const dom = new JSDOM('', {
+    pretendToBeVisual: true,
+    url: 'http://localhost',
+  });
+
+  (globalThis as any).window = dom.window;
+
+  // Not yet supported: https://github.com/jsdom/jsdom/issues/2152
+  class Touch {
+    instance: any;
+
+    constructor(instance: any) {
+      this.instance = instance;
+    }
+
+    get identifier() {
+      return this.instance.identifier;
+    }
+
+    get pageX() {
+      return this.instance.pageX;
+    }
+
+    get pageY() {
+      return this.instance.pageY;
+    }
+
+    get clientX() {
+      return this.instance.clientX;
+    }
+
+    get clientY() {
+      return this.instance.clientY;
+    }
+  }
+  (globalThis as any).window.Touch = Touch;
+
+  Object.keys(dom.window)
+    .filter((key) => !blacklist.has(key))
+    .concat(whitelist)
+    .forEach((key) => {
+      if (typeof (globalThis as any)[key] === 'undefined') {
+        (globalThis as any)[key] = dom.window[key];
+      }
+    });
+}
+
+initDom();
+
+configure({
+  // JSDOM logs errors otherwise on `getComputedStyle(element, pseudoElement)` calls.
+  computedStyleSupportsPseudoElements: false,
+});

packages-internal/test-utils/vitest.config.mts

@@ -0,0 +1,4 @@
+// eslint-disable-next-line import/no-relative-packages
+import sharedConfig from '../../vitest.shared.mts';
+
+export default sharedConfig(import.meta.url, { jsdom: true });