[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,
   },

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

@@ -136,6 +136,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",
@@ -192,6 +194,8 @@
     "terser-webpack-plugin": "^5.3.10",
     "tsx": "^4.19.2",
     "typescript": "^5.6.3",
+    "vitest": "^2.1.2",
+    "vitest-fail-on-console": "^0.7.1",
     "webpack": "^5.96.1",
     "webpack-bundle-analyzer": "^4.10.2",
     "webpack-cli": "^5.1.4",

packages-internal/test-utils/package.json

@@ -21,7 +21,9 @@
     "./setupBabel": "./build/setupBabel.js",
     "./setupBabelPlaywright": "./build/setupBabelPlaywright.js",
     "./setupJSDOM": "./build/setupJSDOM.js",
-    "./setupKarma": "./build/setupKarma.js"
+    "./setupKarma": "./build/setupKarma.js",
+    "./chaiPlugin": "./build/chaiPlugin.js",
+    "./setupVitest": "./build/setupVitest.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;
+    }
+  }
+}