[code-infra] Update tests from vitest PR

.gitignore

@@ -45,6 +45,8 @@ docs/public/static/blog/feed/*
 .nx/workspace-data
 screenshots
 packed
+test-results
+.env
 
 # typescript
 *.tsbuildinfo

.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/package.json

@@ -113,7 +113,7 @@
     "@mui/internal-test-utils": "workspace:^",
     "@playwright/test": "^1.56.1",
     "@types/autosuggest-highlight": "^3.2.3",
-    "@types/chai": "^4.3.20",
+    "@types/chai": "^5.2.2",
     "@types/chance": "^1.1.7",
     "@types/css-mediaquery": "^0.1.4",
     "@types/fg-loadcss": "^3.1.3",

package.json

@@ -103,8 +103,8 @@
     "@babel/plugin-transform-react-constant-elements": "^7.27.1",
     "@mui-internal/api-docs-builder": "workspace:^",
     "@mui-internal/api-docs-builder-core": "workspace:^",
-    "@mui/internal-bundle-size-checker": "^1.0.9-canary.55",
     "@mui/internal-babel-plugin-minify-errors": "^2.0.8-canary.11",
+    "@mui/internal-bundle-size-checker": "^1.0.9-canary.55",
     "@mui/internal-code-infra": "^0.0.3-canary.51",
     "@mui/internal-docs-utils": "workspace:^",
     "@mui/internal-netlify-cache": "^0.0.2-canary.1",
@@ -116,8 +116,8 @@
     "@next/eslint-plugin-next": "^15.5.6",
     "@octokit/rest": "^22.0.1",
     "@pigment-css/react": "0.0.30",
-    "@pnpm/find-workspace-dir": "^1000.1.3",
     "@playwright/test": "1.56.1",
+    "@pnpm/find-workspace-dir": "^1000.1.3",
     "@types/babel__core": "^7.20.5",
     "@types/babel__register": "^7.17.3",
     "@types/mocha": "^10.0.10",

packages-internal/scripts/package.json

@@ -41,7 +41,7 @@
   "devDependencies": {
     "@babel/register": "^7.28.3",
     "@types/babel__core": "^7.20.5",
-    "@types/chai": "^4.3.20",
+    "@types/chai": "^5.2.2",
     "@types/doctrine": "^0.0.9",
     "@types/node": "^20.19.25",
     "@types/react": "^19.2.4",

packages-internal/test-utils/package.json

@@ -48,6 +48,7 @@
     "@testing-library/dom": "^10.4.1",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
+    "assertion-error": "^2.0.1",
     "chai-dom": "^1.12.1",
     "dom-accessibility-api": "^0.7.0",
     "es-toolkit": "^1.41.0",
@@ -59,9 +60,10 @@
   },
   "devDependencies": {
     "@playwright/test": "^1.56.1",
-    "@types/chai": "^4.3.20",
+    "@types/chai": "^5.2.2",
     "@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.2.4",
     "@types/react-dom": "^19.2.3",

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

@@ -4,6 +4,7 @@ import * as chai from 'chai';
 import { computeAccessibleDescription, computeAccessibleName } from 'dom-accessibility-api';
 import formatUtil from 'format-util';
 import { kebabCase } from 'es-toolkit/string';
+import { AssertionError } from 'assertion-error';
 import './chai.types';
 
 const isKarma = Boolean(process.env.KARMA);
@@ -315,7 +316,7 @@ const chaiPlugin: Parameters<typeof chai.use>[0] = (chaiAPI, utils) => {
       const element = utils.flag(this, 'object') as HTMLElement;
       if (element?.nodeType !== 1) {
         // Same pre-condition for negated and unnegated assertion
-        throw new chai.AssertionError(`Expected an Element but got ${String(element)}`);
+        throw new AssertionError(`Expected an Element but got ${String(element)}`);
       }
 
       assertMatchingStyles.call(this, element.style, expectedStyleUnnormalized, {
@@ -330,7 +331,7 @@ const chaiPlugin: Parameters<typeof chai.use>[0] = (chaiAPI, utils) => {
       const element = utils.flag(this, 'object') as HTMLElement;
       if (element?.nodeType !== 1) {
         // Same pre-condition for negated and unnegated  assertion
-        throw new chai.AssertionError(`Expected an Element but got ${String(element)}`);
+        throw new AssertionError(`Expected an Element but got ${String(element)}`);
       }
       const computedStyle = element.ownerDocument.defaultView!.getComputedStyle(element);
 

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

@@ -20,6 +20,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';
 
 function queryAllDescriptionsOf(baseElement: HTMLElement, element: Element): HTMLElement[] {
@@ -200,36 +201,76 @@ 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 we 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();
-    });
   } else {
     beforeEach(() => {
       if (config) {
         vi.setSystemTime(config);
       }
     });
-    afterEach(() => {
-      vi.useRealTimers();
-    });
   }
 
+  afterEach(async () => {
+    if (vi.isFakeTimers()) {
+      await rtlAct(async () => {
+        vi.runOnlyPendingTimers();
+      });
+      vi.useRealTimers();
+    }
+  });
+
   return {
     withFakeTimers: () => {
+      if (vi.isFakeTimers()) {
+        return;
+      }
       beforeEach(() => {
-        vi.useFakeTimers(options);
-      });
-      afterEach(() => {
-        vi.useRealTimers();
+        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 we 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);
+        }
       });
     },
     runToLast: () => {
@@ -351,7 +392,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 {
@@ -360,7 +401,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
@@ -615,6 +656,30 @@ 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 };
+
+export async function flushEffects(): Promise<void> {
+  await act(async () => {});
+}
+
+/**
+ * returns true when touch is suported and can be mocked
+ */
+export function supportsTouch() {
+  // only run in supported browsers
+  if (typeof Touch === 'undefined') {
+    return false;
+  }
+
+  try {
+    // eslint-disable-next-line no-new
+    new Touch({ identifier: 0, target: window, pageX: 0, pageY: 0 });
+  } catch {
+    // Touch constructor not supported
+    return false;
+  }
+
+  return true;
+}

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

@@ -1,6 +1,7 @@
 import * as chai from 'chai';
 import * as DomTestingLibrary from '@testing-library/dom';
 import type { ElementHandle } from '@playwright/test';
+import { AssertionError } from 'assertion-error';
 
 // https://stackoverflow.com/a/46755166/3406963
 declare global {
@@ -33,9 +34,7 @@ chai.use((chaiAPI, utils) => {
   chai.Assertion.addMethod('toHaveFocus', async function elementHandleIsFocused() {
     const $elementOrHandle: ElementHandle | Promise<ElementHandle> = utils.flag(this, 'object');
     if ($elementOrHandle == null) {
-      throw new chai.AssertionError(
-        `Expected an element handle but got ${String($elementOrHandle)}.`,
-      );
+      throw new AssertionError(`Expected an element handle but got ${String($elementOrHandle)}.`);
     }
     const $element =
       typeof ($elementOrHandle as Promise<any>).then === 'function'
@@ -68,9 +67,7 @@ chai.use((chaiAPI, utils) => {
     async function elementHandleHasAttribute(attributeName: string, attributeValue?: string) {
       const $elementOrHandle: ElementHandle | Promise<ElementHandle> = utils.flag(this, 'object');
       if ($elementOrHandle == null) {
-        throw new chai.AssertionError(
-          `Expected an element handle but got ${String($elementOrHandle)}.`,
-        );
+        throw new AssertionError(`Expected an element handle but got ${String($elementOrHandle)}.`);
       }
       const $element =
         typeof ($elementOrHandle as Promise<any>).then === 'function'

packages-internal/test-utils/tsconfig.json

@@ -9,8 +9,7 @@
     "esModuleInterop": true,
     "isolatedModules": true,
     "jsx": "react",
-    // https://github.com/vitest-dev/vitest/issues/4688
-    // TODO: Remove after fully migrated chai to vitest
+    // Remove when https://github.com/thomasbrodusch/vitest-fail-on-console/issues/160 is resolved
     "skipLibCheck": true
   },
   "include": ["./src/**/*"]

packages/api-docs-builder-core/package.json

@@ -20,7 +20,7 @@
     "es-toolkit": "^1.41.0"
   },
   "devDependencies": {
-    "@types/chai": "^4.3.20",
+    "@types/chai": "^5.2.2",
     "@types/mocha": "^10.0.10",
     "@types/node": "^20.19.25",
     "@types/sinon": "^17.0.4",

packages/api-docs-builder/package.json

@@ -32,7 +32,7 @@
   "devDependencies": {
     "@types/babel__core": "^7.20.5",
     "@types/babel__traverse": "^7.28.0",
-    "@types/chai": "^4.3.20",
+    "@types/chai": "^5.2.2",
     "@types/doctrine": "^0.0.9",
     "@types/mdast": "4.0.4",
     "@types/mocha": "^10.0.10",

packages/markdown/package.json

@@ -31,7 +31,7 @@
     "prismjs": "^1.30.0"
   },
   "devDependencies": {
-    "@types/chai": "^4.3.20",
+    "@types/chai": "^5.2.2",
     "chai": "^6.0.1"
   },
   "publishConfig": {

packages/mui-codemod/package.json

@@ -40,7 +40,7 @@
   "devDependencies": {
     "@material-ui/core": "^4.12.4",
     "@mui/material-v5": "npm:@mui/[email protected]",
-    "@types/chai": "^4.3.20",
+    "@types/chai": "^5.2.2",
     "@types/jscodeshift": "0.12.0",
     "chai": "^6.0.1"
   },

packages/mui-docs/package.json

@@ -37,6 +37,7 @@
   "devDependencies": {
     "@mui/icons-material": "workspace:*",
     "@mui/material": "workspace:*",
+    "@types/chai": "^5.2.2",
     "@types/gtag.js": "^0.0.20",
     "@types/node": "^20.19.25",
     "@types/prop-types": "^15.7.15",

packages/mui-envinfo/package.json

@@ -22,7 +22,7 @@
     "envinfo": "^7.20.0"
   },
   "devDependencies": {
-    "@types/chai": "^4.3.20",
+    "@types/chai": "^5.2.2",
     "chai": "^6.0.1"
   },
   "publishConfig": {

packages/mui-icons-material/package.json

@@ -47,7 +47,7 @@
     "@mui/icons-material": "workspace:*",
     "@mui/internal-waterfall": "workspace:^",
     "@mui/material": "workspace:^",
-    "@types/chai": "^4.3.20",
+    "@types/chai": "^5.2.2",
     "@types/react": "^19.2.4",
     "chai": "^6.0.1",
     "chalk": "^5.6.0",

packages/mui-joy/package.json

@@ -42,7 +42,7 @@
   "devDependencies": {
     "@mui/internal-test-utils": "workspace:^",
     "@mui/material": "workspace:^",
-    "@types/chai": "^4.3.20",
+    "@types/chai": "^5.2.2",
     "@types/prop-types": "^15.7.15",
     "@types/react": "^19.2.4",
     "@types/react-dom": "^19.2.3",

packages/mui-joy/src/MenuItem/MenuItem.test.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { spy } from 'sinon';
-import { act, createRenderer, fireEvent, screen } from '@mui/internal-test-utils';
+import { act, createRenderer, fireEvent, screen, supportsTouch } from '@mui/internal-test-utils';
 import { MenuProvider, MenuProviderValue } from '@mui/base/useMenu';
 import { ThemeProvider } from '@mui/joy/styles';
 import MenuItem, { menuItemClasses as classes } from '@mui/joy/MenuItem';
@@ -142,7 +142,7 @@ describe('Joy <MenuItem />', () => {
 
     it('should fire onTouchStart', function touchStartTest() {
       // only run in supported browsers
-      if (typeof Touch === 'undefined') {
+      if (!supportsTouch()) {
         this.skip();
       }
 

packages/mui-lab/package.json

@@ -43,7 +43,7 @@
   "devDependencies": {
     "@mui/internal-test-utils": "workspace:^",
     "@mui/material": "workspace:^",
-    "@types/chai": "^4.3.20",
+    "@types/chai": "^5.2.2",
     "@types/prop-types": "^15.7.15",
     "@types/react": "^19.2.4",
     "@types/react-dom": "^19.2.3",