[code-infra] Bring batch of changes from vitest PR

apps/pigment-css-vite-app/src/Slider/ZeroSlider.test.jsx

@@ -1,5 +1,5 @@
 /* globals expect */
-import { render } from '@testing-library/react';
+import { render } from '@testing-library/react/pure';
 import Slider from './ZeroSlider';
 
 describe('Slider', () => {

apps/pigment-css-vite-app/src/pages/fixtures/index.test.js

@@ -101,7 +101,7 @@ async function main() {
       it(`creates screenshots of ${route}`, async function test() {
         // With the playwright inspector we might want to call `page.pause` which would lead to a timeout.
         if (process.env.PWDEBUG) {
-          this.timeout(0);
+          this?.timeout?.(0);
         }
 
         const testcase = await renderFixture(index);

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

package.json

@@ -101,7 +101,8 @@
     "@netlify/functions": "^4.2.1",
     "@slack/bolt": "^4.4.0",
     "babel-plugin-transform-import-meta": "^2.3.3",
-    "execa": "^9.6.0"
+    "execa": "^9.6.0",
+    "karma-spec-reporter": "^0.0.36"
   },
   "devDependencies": {
     "@arethetypeswrong/cli": "^0.18.2",
@@ -128,6 +129,7 @@
     "@types/babel__register": "^7.17.3",
     "@types/fs-extra": "^11.0.4",
     "@types/lodash": "^4.17.20",
+    "@types/lodash.kebabcase": "^4.1.9",
     "@types/mocha": "^10.0.10",
     "@types/node": "^20.19.11",
     "@types/react": "^19.1.10",
@@ -164,6 +166,7 @@
     "karma-webpack": "^5.0.0",
     "lerna": "^8.2.3",
     "lodash": "^4.17.21",
+    "lodash.kebabcase": "^4.1.1",
     "markdownlint-cli2": "^0.18.1",
     "mocha": "^11.7.1",
     "nx": "^20.8.2",
@@ -174,6 +177,7 @@
     "pretty-quick": "^4.2.2",
     "process": "^0.11.10",
     "react": "^19.1.1",
+    "react-dom": "^19.1.1",
     "rimraf": "^6.0.1",
     "serve": "^14.2.4",
     "stylelint": "^16.23.1",

packages-internal/scripts/typescript-to-proptypes/test/injector/all-props-ignored/options.ts → packages-internal/scripts/typescript-to-proptypes/test/injector-all-props-ignored/options.ts

@@ -1,4 +1,4 @@
-import { TestOptions } from '../../types';
+import { TestOptions } from '../types';
 
 const options: TestOptions = {
   injector: {

packages-internal/scripts/typescript-to-proptypes/test/injector/should-include-component-based/options.ts → packages-internal/scripts/typescript-to-proptypes/test/injector-should-include-component-based/options.ts

@@ -1,4 +1,4 @@
-import { TestOptions } from '../../types';
+import { TestOptions } from '../types';
 
 const options: TestOptions = {
   injector: {

packages-internal/scripts/typescript-to-proptypes/test/injector/should-include-filename-based/options.ts → packages-internal/scripts/typescript-to-proptypes/test/injector-should-include-filename-based/options.ts

@@ -1,5 +1,5 @@
 import * as path from 'path';
-import { TestOptions } from '../../types';
+import { TestOptions } from '../types';
 
 const options: TestOptions = {
   injector: {

packages-internal/scripts/typescript-to-proptypes/test/injector/whitelisted-props/options.ts → packages-internal/scripts/typescript-to-proptypes/test/injector-whitelisted-props/options.ts

@@ -1,4 +1,4 @@
-import { TestOptions } from '../../types';
+import { TestOptions } from '../types';
 
 const options: TestOptions = {
   injector: {

packages-internal/scripts/typescript-to-proptypes/test/typescript-to-proptypes.test.ts

@@ -1,3 +1,4 @@
+/// <reference types="vite/client" />
 import path from 'path';
 import fs from 'fs';
 import * as ts from 'typescript';
@@ -11,7 +12,7 @@ import { getPropTypesFromFile } from '../src/getPropTypesFromFile';
 import { TestOptions } from './types';
 
 const testCases = glob
-  .sync('**/input.{d.ts,ts,tsx}', { absolute: true, cwd: __dirname })
+  .sync('*/input.{d.ts,ts,tsx}', { absolute: true, cwd: __dirname })
   .map((testPath) => {
     const dirname = path.dirname(testPath);
     const name = path.dirname(path.relative(__dirname, testPath));
@@ -32,9 +33,10 @@ describe('typescript-to-proptypes', () => {
     return cachedProject;
   }
 
+  // @ts-expect-error Second argument is vitest
   before(function beforeHook() {
     // Creating a TS program might take a while.
-    this.timeout(20000);
+    this?.timeout?.(20000);
 
     const buildProject = createTypeScriptProjectBuilder({
       test: {
@@ -52,7 +54,7 @@ describe('typescript-to-proptypes', () => {
     //   testCases.map((testCase) => testCase.inputPath),
     //   ttp.loadConfig(path.resolve(__dirname, '../tsconfig.json')),
     // );
-  });
+  }, 20000);
 
   testCases.forEach((testCase) => {
     const { name: testName, inputPath, inputJS, outputPath } = testCase;
@@ -61,7 +63,7 @@ describe('typescript-to-proptypes', () => {
       const project = getProject();
       let options: TestOptions = {};
       try {
-        const optionsModule = await import(`./${testName}/options`);
+        const optionsModule: any = await import(`./${testName}/options.ts`);
         options = optionsModule.default;
       } catch (error) {
         // Assume "Cannot find module" which means "no options".

packages-internal/test-utils/src/chai-augmentation.d.ts

@@ -0,0 +1,8 @@
+/* eslint-disable import/prefer-default-export */
+import 'chai';
+import type { AssertionError as RealAssertionError } from 'assertion-error';
+
+declare module 'chai' {
+  // Looks like they forgot to export the AssertionError type in @types/chai
+  export const AssertionError: typeof RealAssertionError;
+}

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

@@ -1,16 +1,16 @@
 import { isInaccessible } from '@testing-library/dom';
 import { prettyDOM } from '@testing-library/react/pure';
-import type chaiType from 'chai';
-import { AssertionError } from 'chai';
+import * as chai from 'chai';
 import { computeAccessibleDescription, computeAccessibleName } from 'dom-accessibility-api';
 import formatUtil from 'format-util';
-import _ from 'lodash';
+// avoid loading whole lodash, it takes ~50ms to initialize
+import kebabCase from 'lodash.kebabcase';
 import './chai.types';
 
 const isKarma = Boolean(process.env.KARMA);
 
 function isInJSDOM() {
-  return /jsdom/.test(window.navigator.userAgent);
+  return window.navigator.userAgent.includes('jsdom');
 }
 
 // chai#utils.elToString that looks like stringified elements in testing-library
@@ -21,7 +21,7 @@ function elementToString(element: Element | null | undefined) {
   return String(element);
 }
 
-const chaiPlugin: Parameters<(typeof chaiType)['use']>[0] = (chaiAPI, utils) => {
+const chaiPlugin: Parameters<typeof chai.use>[0] = (chaiAPI, utils) => {
   const blockElements = new Set([
     'html',
     'address',
@@ -202,7 +202,7 @@ const chaiPlugin: Parameters<(typeof chaiType)['use']>[0] = (chaiAPI, utils) =>
     // This is closer to actual CSS and required for getPropertyValue anyway.
     const expectedStyle: Record<string, string> = {};
     Object.keys(expectedStyleUnnormalized).forEach((cssProperty) => {
-      const hyphenCasedPropertyName = _.kebabCase(cssProperty);
+      const hyphenCasedPropertyName = kebabCase(cssProperty);
       const isVendorPrefixed = /^(moz|ms|o|webkit)-/.test(hyphenCasedPropertyName);
       const propertyName = isVendorPrefixed
         ? `-${hyphenCasedPropertyName}`
@@ -279,7 +279,7 @@ const chaiPlugin: Parameters<(typeof chaiType)['use']>[0] = (chaiAPI, utils) =>
 
     const jsdomHint =
       'Styles in JSDOM e.g. from `test:unit` are often misleading since JSDOM does not implement the Cascade nor actual CSS property value computation. ' +
-      'If results differ between real browsers and JSDOM, skip the test in JSDOM e.g. `if (/jsdom/.test(window.navigator.userAgent)) this.skip();`';
+      'If results differ between real browsers and JSDOM, skip the test in JSDOM e.g. `if (window.navigator.userAgent.includes("jsdom")) this.skip();`';
     const shorthandHint =
       'Browsers can compute shorthand properties differently. Prefer longhand properties e.g. `borderTopColor`, `borderRightColor` etc. instead of `border` or `border-color`.';
     const messageHint = `${jsdomHint}\n${shorthandHint}`;
@@ -316,7 +316,7 @@ const chaiPlugin: Parameters<(typeof chaiType)['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 AssertionError(`Expected an Element but got ${String(element)}`);
+        throw new chai.AssertionError(`Expected an Element but got ${String(element)}`);
       }
 
       assertMatchingStyles.call(this, element.style, expectedStyleUnnormalized, {
@@ -331,7 +331,7 @@ const chaiPlugin: Parameters<(typeof chaiType)['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 AssertionError(`Expected an Element but got ${String(element)}`);
+        throw new chai.AssertionError(`Expected an Element but got ${String(element)}`);
       }
       const computedStyle = element.ownerDocument.defaultView!.getComputedStyle(element);
 

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

@@ -806,6 +806,6 @@ function act<T>(callback: () => void | T | Promise<T>) {
 
 const bodyBoundQueries = within(document.body, { ...queries, ...customQueries });
 
-export * from '@testing-library/react/pure';
 export { act, fireEvent };
 export const screen: Screen & typeof bodyBoundQueries = { ...rtlScreen, ...bodyBoundQueries };
+export { within, waitFor, renderHook } from '@testing-library/react/pure';

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

@@ -774,7 +774,7 @@ function testThemeStyleOverrides(
 ) {
   describe('theme style overrides:', () => {
     it("respect theme's styleOverrides custom state", async function test(t = {}) {
-      if (/jsdom/.test(window.navigator.userAgent)) {
+      if (window.navigator.userAgent.includes('jsdom')) {
         // @ts-ignore
         // eslint-disable-next-line @typescript-eslint/no-unused-expressions
         this?.skip?.() ?? t?.skip();
@@ -831,7 +831,7 @@ function testThemeStyleOverrides(
     });
 
     it("respect theme's styleOverrides slots", async function test(t = {}) {
-      if (/jsdom/.test(window.navigator.userAgent)) {
+      if (window.navigator.userAgent.includes('jsdom')) {
         // @ts-ignore
         // eslint-disable-next-line @typescript-eslint/no-unused-expressions
         this?.skip?.() ?? t?.skip();
@@ -944,7 +944,7 @@ function testThemeStyleOverrides(
     });
 
     it('overrideStyles does not replace each other in slots', async function test(t = {}) {
-      if (/jsdom/.test(window.navigator.userAgent)) {
+      if (window.navigator.userAgent.includes('jsdom')) {
         // @ts-ignore
         // eslint-disable-next-line @typescript-eslint/no-unused-expressions
         this?.skip?.() ?? t?.skip();
@@ -1027,7 +1027,7 @@ function testThemeVariants(
 ) {
   describe('theme variants:', () => {
     it("respect theme's variants", async function test(t = {}) {
-      if (/jsdom/.test(window.navigator.userAgent)) {
+      if (window.navigator.userAgent.includes('jsdom')) {
         // @ts-ignore
         // eslint-disable-next-line @typescript-eslint/no-unused-expressions
         this?.skip?.() ?? t?.skip();
@@ -1084,7 +1084,7 @@ function testThemeVariants(
     });
 
     it('supports custom variant', async function test(t = {}) {
-      if (/jsdom/.test(window.navigator.userAgent)) {
+      if (window.navigator.userAgent.includes('jsdom')) {
         // @ts-ignore
         // eslint-disable-next-line @typescript-eslint/no-unused-expressions
         this?.skip?.() ?? t?.skip();
@@ -1140,7 +1140,12 @@ function testThemeCustomPalette(
   describe('theme extended palette:', () => {
     it('should render without errors', function test(t = {}) {
       const { render, ThemeProvider, createTheme } = getOptions();
-      if (!/jsdom/.test(window.navigator.userAgent) || !render || !ThemeProvider || !createTheme) {
+      if (
+        !window.navigator.userAgent.includes('jsdom') ||
+        !render ||
+        !ThemeProvider ||
+        !createTheme
+      ) {
         // @ts-ignore
         // eslint-disable-next-line @typescript-eslint/no-unused-expressions
         this?.skip?.() ?? t?.skip();

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

@@ -1,4 +1,4 @@
-import { configure, fireEvent, getConfig } from '@testing-library/react';
+import { configure, fireEvent, getConfig } from '@testing-library/react/pure';
 import reactMajor from './reactMajor';
 
 const noWrapper = (callback: () => void) => callback();

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

@@ -3,7 +3,9 @@ import { act, fireEvent } from './createRenderer';
 export default function focusVisible(element: HTMLElement) {
   act(() => {
     element.blur();
-    fireEvent.keyDown(document.body, { key: 'Tab' });
+  });
+  fireEvent.keyDown(document.body, { key: 'Tab' });
+  act(() => {
     element.focus();
   });
 }

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

@@ -1,4 +1,4 @@
-import chai from 'chai';
+import * as chai from 'chai';
 import chaiDom from 'chai-dom';
 import './chai.types';
 import chaiPlugin from './chaiPlugin';

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

@@ -1,4 +1,4 @@
-import chai, { AssertionError } from 'chai';
+import * as chai from 'chai';
 import * as DomTestingLibrary from '@testing-library/dom';
 import type { ElementHandle } from '@playwright/test';
 
@@ -32,7 +32,9 @@ 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 AssertionError(`Expected an element handle but got ${String($elementOrHandle)}.`);
+      throw new chai.AssertionError(
+        `Expected an element handle but got ${String($elementOrHandle)}.`,
+      );
     }
     const $element =
       typeof ($elementOrHandle as Promise<any>).then === 'function'
@@ -65,7 +67,9 @@ 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 AssertionError(`Expected an element handle but got ${String($elementOrHandle)}.`);
+        throw new chai.AssertionError(
+          `Expected an element handle but got ${String($elementOrHandle)}.`,
+        );
       }
       const $element =
         typeof ($elementOrHandle as Promise<any>).then === 'function'

packages/mui-codemod/package.json

@@ -40,6 +40,8 @@
     "yargs": "^17.7.2"
   },
   "devDependencies": {
+    "@material-ui/core": "^4.12.4",
+    "@mui/material-v5": "npm:@mui/[email protected]",
     "@types/chai": "^4.3.20",
     "@types/jscodeshift": "0.12.0",
     "chai": "^4.5.0"

packages/mui-codemod/src/v4.0.0/optimal-imports.js

@@ -2,13 +2,6 @@ import { dirname } from 'path';
 import addImports from 'jscodeshift-add-imports';
 import getJSExports from '../util/getJSExports';
 
-// istanbul ignore next
-if (process.env.NODE_ENV === 'test') {
-  const resolve = require.resolve;
-  require.resolve = (source) =>
-    resolve(source.replace(/^@material-ui\/core\/es/, '../../../mui-material/src'));
-}
-
 export default function transformer(fileInfo, api, options) {
   const j = api.jscodeshift;
   const importModule = options.importModule || '@material-ui/core';

packages/mui-codemod/src/v4.0.0/top-level-imports.js

@@ -5,11 +5,7 @@ export default function transformer(fileInfo, api, options) {
   const importModule = options.importModule || '@material-ui/core';
   const targetModule = options.targetModule || '@material-ui/core';
 
-  let requirePath = importModule;
-
-  if (process.env.NODE_ENV === 'test') {
-    requirePath = requirePath.replace(/^@material-ui\/core/, '../../../mui-material/src');
-  }
+  const requirePath = importModule;
 
   // eslint-disable-next-line global-require, import/no-dynamic-require
   const whitelist = require(requirePath);

packages/mui-codemod/src/v5.0.0/optimal-imports.js

@@ -2,17 +2,6 @@ import { dirname } from 'path';
 import addImports from 'jscodeshift-add-imports';
 import getJSExports from '../util/getJSExports';
 
-// istanbul ignore next
-if (process.env.NODE_ENV === 'test') {
-  const resolve = require.resolve;
-  require.resolve = (source) =>
-    resolve(
-      source
-        .replace(/^@material-ui\/core\/es/, '../../../mui-material/src')
-        .replace(/^@material-ui\/core\/modern/, '../../../mui-material/src'),
-    );
-}
-
 export default function transformer(fileInfo, api, options) {
   const j = api.jscodeshift;
   const importModule = options.importModule || '@material-ui/core';