[code-infra] Changes for test util to work in vitest

.eslintrc.js

@@ -48,7 +48,7 @@ const NO_RESTRICTED_IMPORTS_PATTERNS_DEEPLY_NESTED = [
 module.exports = /** @type {Config} */ ({
   root: true, // So parent files don't get applied
   env: {
-    es6: true,
+    es2020: true,
     browser: true,
     node: true,
   },

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

@@ -104,7 +104,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);

babel.config.js

@@ -43,6 +43,7 @@ module.exports = function getBabelConfig(api) {
     '@mui/utils': resolveAliasPath('./packages/mui-utils/src'),
     '@mui/joy': resolveAliasPath('./packages/mui-joy/src'),
     '@mui/internal-docs-utils': resolveAliasPath('./packages-internal/docs-utils/src'),
+    '@mui/internal-test-utils': resolveAliasPath('./packages-internal/test-utils/src'),
     docs: resolveAliasPath('./docs'),
     test: resolveAliasPath('./test'),
   };

package.json

@@ -137,6 +137,8 @@
     "@types/yargs": "^17.0.33",
     "@typescript-eslint/eslint-plugin": "^7.18.0",
     "@typescript-eslint/parser": "^7.18.0",
+    "@vitest/browser": "^2.1.2",
+    "@vitest/coverage-v8": "^2.1.2",
     "babel-loader": "^9.2.1",
     "babel-plugin-istanbul": "^7.0.0",
     "babel-plugin-module-resolver": "^5.0.2",
@@ -193,6 +195,8 @@
     "terser-webpack-plugin": "^5.3.10",
     "tsx": "^4.19.1",
     "typescript": "^5.6.2",
+    "vitest": "^2.1.2",
+    "vitest-fail-on-console": "^0.7.1",
     "webpack": "^5.95.0",
     "webpack-bundle-analyzer": "^4.10.2",
     "webpack-cli": "^5.1.4",

packages-internal/babel-plugin-minify-errors/vitest.config.ts

@@ -0,0 +1,4 @@
+import { mergeConfig, defineProject } from 'vitest/config';
+import sharedConfig from '../../vitest.shared';
+
+export default mergeConfig(sharedConfig, defineProject({}));

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

@@ -34,7 +34,7 @@ describe('typescript-to-proptypes', () => {
 
   before(function beforeHook() {
     // Creating a TS program might take a while.
-    this.timeout(20000);
+    this?.timeout?.(20000);
 
     const buildProject = createTypeScriptProjectBuilder({
       test: {

packages-internal/scripts/vitest.config.ts

@@ -0,0 +1,4 @@
+import { mergeConfig, defineProject } from 'vitest/config';
+import sharedConfig from '../../vitest.shared';
+
+export default mergeConfig(sharedConfig, defineProject({}));

packages-internal/test-utils/package.json

@@ -21,7 +21,8 @@
     "./setupBabel": "./build/setupBabel.js",
     "./setupBabelPlaywright": "./build/setupBabelPlaywright.js",
     "./setupJSDOM": "./build/setupJSDOM.js",
-    "./setupKarma": "./build/setupKarma.js"
+    "./setupKarma": "./build/setupKarma.js",
+    "./chaiPlugin": "./build/chaiPlugin.js"
   },
   "scripts": {
     "prebuild": "rimraf ./build",

packages-internal/test-utils/src/chai.types.ts

@@ -0,0 +1,106 @@
+export {};
+
+// https://stackoverflow.com/a/46755166/3406963
+declare global {
+  namespace Chai {
+    interface Assertion {
+      /**
+       * Checks `expectedStyle` is a subset of the elements inline style i.e. `element.style`.
+       * @example expect(element).toHaveInlineStyle({ width: '200px' })
+       */
+      toHaveInlineStyle(
+        expectedStyle: Partial<
+          Record<
+            Exclude<
+              keyof CSSStyleDeclaration,
+              | 'getPropertyPriority'
+              | 'getPropertyValue'
+              | 'item'
+              | 'removeProperty'
+              | 'setProperty'
+              | number
+            >,
+            string
+          >
+        >,
+      ): void;
+      /**
+       * Checks `expectedStyle` is a subset of the elements computed style i.e. `window.getComputedStyle(element)`.
+       * @example expect(element).toHaveComputedStyle({ width: '200px' })
+       */
+      toHaveComputedStyle(
+        expectedStyle: Partial<
+          Record<
+            Exclude<
+              keyof CSSStyleDeclaration,
+              | 'getPropertyPriority'
+              | 'getPropertyValue'
+              | 'item'
+              | 'removeProperty'
+              | 'setProperty'
+              | number
+            >,
+            string
+          >
+        >,
+      ): void;
+      /**
+       * Check if an element's [`visibility`](https://developer.mozilla.org/en-US/docs/Web/CSS/visibility) is not `hidden` or `collapsed`.
+       */
+      toBeVisible(): void;
+      /**
+       * Check if an element's [`visibility`](https://developer.mozilla.org/en-US/docs/Web/CSS/visibility) is `hidden` or `collapsed`.
+       */
+      toBeHidden(): void;
+      /**
+       * Checks if the element is inaccessible.
+       *
+       * Elements are considered inaccessible if they either:
+       * - have [`visibility`](https://developer.mozilla.org/en-US/docs/Web/CSS/visibility) `hidden`
+       * - have [`display`](https://developer.mozilla.org/en-US/docs/Web/CSS/display) `none`
+       * - have `aria-hidden` `true` or any of their parents
+       *
+       * @see [Excluding Elements from the Accessibility Tree](https://www.w3.org/TR/wai-aria-1.2/#tree_exclusion)
+       */
+      toBeInaccessible(): void;
+      toHaveAccessibleDescription(description: string): void;
+      /**
+       * Checks if the accessible name computation (according to `accname` spec)
+       * matches the expectation.
+       *
+       * @see https://www.w3.org/TR/accname-1.2/
+       * @param name
+       */
+      toHaveAccessibleName(name: string): void;
+      /**
+       * Checks if the element is actually focused i.e. `document.activeElement` is equal to the actual element.
+       */
+      toHaveFocus(): void;
+      /**
+       * Checks if the element is the active-descendant of the active element.
+       */
+      toHaveVirtualFocus(): void;
+      /**
+       * Matches calls to `console.warn` in the asserted callback.
+       *
+       * @example expect(() => render()).not.toWarnDev()
+       * @example expect(() => render()).toWarnDev('single message')
+       * @example expect(() => render()).toWarnDev(['first warning', 'then the second'])
+       */
+      toWarnDev(messages?: string | readonly (string | boolean)[]): void;
+      /**
+       * Matches calls to `console.error` in the asserted callback.
+       *
+       * @example expect(() => render()).not.toErrorDev()
+       * @example expect(() => render()).toErrorDev('single message')
+       * @example expect(() => render()).toErrorDev(['first warning', 'then the second'])
+       */
+      toErrorDev(messages?: string | readonly (string | boolean)[]): void;
+      /**
+       * Asserts that the given callback throws an error matching the given message in development (process.env.NODE_ENV !== 'production').
+       * In production it expects a minified error.
+       */
+      toThrowMinified(message: string): void;
+    }
+  }
+}