[code-infra] Package test utils (#41177)

Author: michaldudak

.codesandbox/ci.json

@@ -22,14 +22,16 @@
     "packages/mui-types",
     "packages/mui-utils",
     "packages-internal/docs-utils",
-    "packages-internal/scripts"
+    "packages-internal/scripts",
+    "packages-internal/test-utils"
   ],
   "publishDirectory": {
     "@mui/base": "packages/mui-base/build",
     "@mui/codemod": "packages/mui-codemod/build",
     "@mui/core-downloads-tracker": "packages/mui-core-downloads-tracker/build",
     "@mui/docs": "packages/mui-docs/build",
     "@mui/icons-material": "packages/mui-icons-material/build",
+    "@mui/internal-test-utils": "packages-internal/test-utils",
     "@mui/internal-babel-macros": "packages/mui-babel-macros",
     "@mui/internal-docs-utils": "packages-internal/docs-utils",
     "@mui/internal-markdown": "packages/markdown",

.mocharc.js

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

docs/package.json

@@ -115,7 +115,7 @@
     "@babel/preset-typescript": "^7.24.6",
     "@mui/internal-docs-utils": "workspace:^",
     "@mui/internal-scripts": "workspace:^",
-    "@mui-internal/test-utils": "workspace:^",
+    "@mui/internal-test-utils": "workspace:^",
     "@types/autosuggest-highlight": "^3.2.3",
     "@types/chai": "^4.3.16",
     "@types/css-mediaquery": "^0.1.4",

docs/src/modules/components/HighlightedCode.test.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer } from '@mui-internal/test-utils';
+import { createRenderer } from '@mui/internal-test-utils';
 import { ThemeProvider, createTheme } from '@mui/material/styles';
 import { getDesignTokens } from '@mui/docs/branding';
 import { HighlightedCode } from '@mui/docs/HighlightedCode';

package.json

@@ -54,35 +54,44 @@
     "test": "node scripts/test.mjs",
     "tc": "node test/cli.js",
     "test:extended": "pnpm eslint && pnpm typescript && pnpm test:coverage",
-    "test:coverage": "cross-env NODE_ENV=test BABEL_ENV=coverage nyc --reporter=text mocha 'packages/**/*.test.{js,ts,tsx}' 'docs/**/*.test.{js,ts,tsx}'",
-    "test:coverage:ci": "cross-env NODE_ENV=test BABEL_ENV=coverage nyc --reporter=lcov mocha 'packages/**/*.test.{js,ts,tsx}' 'docs/**/*.test.{js,ts,tsx}'",
-    "test:coverage:html": "cross-env NODE_ENV=test BABEL_ENV=coverage nyc --reporter=html mocha 'packages/**/*.test.{js,ts,tsx}' 'docs/**/*.test.{js,ts,tsx}'",
+    "test:coverage": "nx run nx_test_coverage",
+    "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\"",
-    "test:e2e:build": "webpack --config test/e2e/webpack.config.js",
+    "test:e2e:build": "nx run nx_test_e2e_build",
     "test:e2e:dev": "concurrently \"pnpm test:e2e:build --watch\" \"pnpm test:e2e:server\"",
-    "test:e2e:run": "mocha --config test/e2e/.mocharc.js 'test/e2e/**/*.test.{js,ts,tsx}'",
+    "test:e2e:run": "nx run nx_test_e2e_run",
     "test:e2e:server": "serve test/e2e -p 5001",
     "test:e2e-website": "playwright test test/e2e-website --config test/e2e-website/playwright.config.ts",
     "test:e2e-website:dev": "cross-env PLAYWRIGHT_TEST_BASE_URL=http://localhost:3000 playwright test test/e2e-website --config test/e2e-website/playwright.config.ts",
-    "test:karma": "cross-env NODE_ENV=test karma start test/karma.conf.js",
-    "test:karma:profile": "cross-env NODE_ENV=test karma start test/karma.conf.profile.js",
+    "test:karma": "nx run nx_test_karma",
+    "test:karma:profile": "nx run nx_test_karma_profile",
     "test:regressions": "cross-env NODE_ENV=production pnpm test:regressions:build && concurrently --success first --kill-others \"pnpm test:regressions:run\" \"pnpm test:regressions:server\"",
     "test:regressions:build": "webpack --config test/regressions/webpack.config.js",
     "test:regressions:dev": "concurrently \"pnpm test:regressions:build --watch\" \"pnpm test:regressions:server\"",
-    "test:regressions:run": "mocha --config test/regressions/.mocharc.js --delay 'test/regressions/**/*.test.js'",
+    "test:regressions:run": "nx run nx_test_regressions_run",
     "test:regressions:server": "serve test/regressions -p 5001",
-    "test:unit": "cross-env NODE_ENV=test mocha 'packages/**/*.test.{js,ts,tsx}' 'docs/**/*.test.{js,ts,tsx}'",
+    "test:unit": "nx run nx_test_unit",
     "test:argos": "node ./scripts/pushArgos.mjs",
     "typescript": "lerna run --no-bail --parallel typescript",
     "typescript:ci": "lerna run --concurrency 3 --no-bail --no-sort typescript",
     "validate-declarations": "tsx scripts/validateTypescriptDeclarations.mts",
     "generate-codeowners": "node scripts/generateCodeowners.mjs",
-    "canary:release": "tsx ./scripts/canaryRelease.mts"
+    "canary:release": "tsx ./scripts/canaryRelease.mts",
+    "nx_test_coverage_ci": "cross-env NODE_ENV=test BABEL_ENV=coverage nyc --reporter=lcov mocha 'packages/**/*.test.{js,ts,tsx}' 'docs/**/*.test.{js,ts,tsx}'",
+    "nx_test_coverage_html": "cross-env NODE_ENV=test BABEL_ENV=coverage nyc --reporter=html mocha 'packages/**/*.test.{js,ts,tsx}' 'docs/**/*.test.{js,ts,tsx}'",
+    "nx_test_coverage": "cross-env NODE_ENV=test BABEL_ENV=coverage nyc --reporter=text mocha 'packages/**/*.test.{js,ts,tsx}' 'docs/**/*.test.{js,ts,tsx}'",
+    "nx_test_e2e_build": "webpack --config test/e2e/webpack.config.js",
+    "nx_test_e2e_run": "mocha --config test/e2e/.mocharc.js 'test/e2e/**/*.test.{js,ts,tsx}'",
+    "nx_test_karma_profile": "cross-env NODE_ENV=test karma start test/karma.conf.profile.js",
+    "nx_test_karma": "cross-env NODE_ENV=test karma start test/karma.conf.js",
+    "nx_test_regressions_run": "mocha --config test/regressions/.mocharc.js --delay 'test/regressions/**/*.test.js'",
+    "nx_test_unit": "cross-env NODE_ENV=test mocha 'packages/**/*.test.{js,ts,tsx}' 'docs/**/*.test.{js,ts,tsx}'"
   },
   "dependencies": {
     "@googleapis/sheets": "^7.0.0",
-    "@slack/bolt": "^3.18.0",
     "@netlify/functions": "^2.7.0",
+    "@slack/bolt": "^3.18.0",
     "execa": "^8.0.1",
     "google-auth-library": "^9.10.0"
   },
@@ -98,11 +107,11 @@
     "@babel/preset-typescript": "^7.24.6",
     "@babel/register": "^7.24.6",
     "@mnajdova/enzyme-adapter-react-18": "^0.2.0",
-    "@mui/internal-docs-utils": "workspace:^",
-    "@mui/internal-scripts": "workspace:^",
     "@mui-internal/api-docs-builder": "workspace:^",
     "@mui-internal/api-docs-builder-core": "workspace:^",
-    "@mui-internal/test-utils": "workspace:^",
+    "@mui/internal-docs-utils": "workspace:^",
+    "@mui/internal-scripts": "workspace:^",
+    "@mui/internal-test-utils": "workspace:^",
     "@mui/joy": "workspace:*",
     "@mui/material": "workspace:^",
     "@mui/utils": "workspace:^",
@@ -213,5 +222,54 @@
     ],
     "sourceMap": false,
     "instrument": false
+  },
+  "nx": {
+    "targets": {
+      "nx_test_unit": {
+        "dependsOn": [
+          "@mui/internal-test-utils:build"
+        ]
+      },
+      "nx_test_karma": {
+        "dependsOn": [
+          "@mui/internal-test-utils:build"
+        ]
+      },
+      "nx_test_karma_profile": {
+        "dependsOn": [
+          "@mui/internal-test-utils:build"
+        ]
+      },
+      "nx_test_coverage": {
+        "dependsOn": [
+          "@mui/internal-test-utils:build"
+        ]
+      },
+      "nx_test_coverage_ci": {
+        "dependsOn": [
+          "@mui/internal-test-utils:build"
+        ]
+      },
+      "nx_test_coverage_html": {
+        "dependsOn": [
+          "@mui/internal-test-utils:build"
+        ]
+      },
+      "nx_test_regressions_run": {
+        "dependsOn": [
+          "@mui/internal-test-utils:build"
+        ]
+      },
+      "nx_test_e2e_build": {
+        "dependsOn": [
+          "@mui/internal-test-utils:build"
+        ]
+      },
+      "nx_test_e2e_run": {
+        "dependsOn": [
+          "@mui/internal-test-utils:build"
+        ]
+      }
+    }
   }
 }

packages-internal/test-utils/CHANGELOG.md

@@ -1,21 +1,34 @@
 {
-  "name": "@mui-internal/test-utils",
+  "name": "@mui/internal-test-utils",
   "version": "1.0.0",
-  "private": true,
-  "scripts": {
-    "typescript": "tsc -p tsconfig.json"
-  },
-  "main": "src/index.ts",
+  "author": "MUI Team",
+  "description": "Utilities for MUI tests. This is an internal package not meant for general use.",
+  "main": "./build/index.js",
   "exports": {
-    ".": "./src/index.ts",
-    "./init": "./src/init.js",
-    "./initMatchers": "./src/initMatchers.ts",
-    "./initPlaywrightMatchers": "./src/initPlaywrightMatchers.ts",
-    "./KarmaReporterReactProfiler": "./src/KarmaReporterReactProfiler.js",
-    "./setupBabel": "./src/setupBabel.js",
-    "./setupBabelPlaywright": "./src/setupBabelPlaywright.js",
-    "./setupJSDOM": "./src/setupJSDOM.js",
-    "./setupKarma": "./src/setupKarma.js"
+    ".": "./build/index.js",
+    "./createDescribe": "./build/createDescribe.js",
+    "./createRenderer": "./build/createRenderer.js",
+    "./init": "./build/init.js",
+    "./initMatchers": {
+      "types": "./build/initMatchers.d.ts",
+      "default": "./build/initMatchers.js"
+    },
+    "./initPlaywrightMatchers": {
+      "types": "./build/initPlaywrightMatchers.d.ts",
+      "default": "./build/initPlaywrightMatchers.js"
+    },
+    "./KarmaReporterReactProfiler": "./build/KarmaReporterReactProfiler.js",
+    "./setupBabel": "./build/setupBabel.js",
+    "./setupBabelPlaywright": "./build/setupBabelPlaywright.js",
+    "./setupJSDOM": "./build/setupJSDOM.js",
+    "./setupKarma": "./build/setupKarma.js"
+  },
+  "scripts": {
+    "prebuild": "rimraf ./build",
+    "build": "tsc -b tsconfig.build.json",
+    "typescript": "tsc -b tsconfig.json",
+    "release:publish": "pnpm publish --tag latest",
+    "release:publish:dry-run": "pnpm publish --tag latest --registry=\"http://localhost:4873/\""
   },
   "dependencies": {
     "@babel/plugin-transform-modules-commonjs": "^7.24.6",
@@ -39,7 +52,7 @@
     "playwright": "^1.44.0",
     "prop-types": "^15.8.1",
     "react-test-renderer": "^18.2.0",
-    "sinon": "^15.2.0"
+    "sinon": "^16.1.3"
   },
   "devDependencies": {
     "@types/chai": "^4.3.16",
@@ -56,5 +69,8 @@
   "peerDependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
+  },
+  "publishConfig": {
+    "access": "public"
   }
 }

packages-internal/test-utils/README.md

@@ -0,0 +1,17 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "rootDir": "./src",
+    "outDir": "./build",
+    "declaration": true,
+    "declarationMap": true,
+    "sourceMap": true,
+    "noEmit": false,
+    "composite": true,
+    "tsBuildInfoFile": "./build/.tsbuildinfo",
+    "target": "ES2020",
+    "module": "commonjs",
+    "types": ["node"],
+    "allowJs": true
+  }
+}

packages/test-utils/package.json packages-internal/test-utils/package.json

@@ -0,0 +1,12 @@
+{
+  "compilerOptions": {
+    "noEmit": true,
+    "moduleResolution": "node",
+    "types": ["node"],
+    "strict": true,
+    "esModuleInterop": true,
+    "isolatedModules": true,
+    "jsx": "react"
+  },
+  "include": ["./src/**/*"]
+}

packages/test-utils/src/KarmaReporterReactProfiler.js packages-internal/test-utils/src/KarmaReporterReactProfiler.js

@@ -20,7 +20,7 @@
     "@types/node": "^18.19.33",
     "@types/sinon": "^17.0.3",
     "chai": "^4.4.1",
-    "sinon": "^15.2.0",
+    "sinon": "^16.1.3",
     "typescript": "^5.4.5"
   }
 }

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

@@ -36,6 +36,6 @@
     "@types/react-docgen": "workspace:*",
     "@types/sinon": "^17.0.3",
     "chai": "^4.4.1",
-    "sinon": "^15.2.0"
+    "sinon": "^16.1.3"
   }
 }

packages/test-utils/src/createDOM.d.ts packages-internal/test-utils/src/createDOM.d.ts

@@ -7,13 +7,13 @@ const ruleTester = new eslint.RuleTester({
 });
 ruleTester.run('disallow-active-element-as-key-event-target', rule, {
   valid: [
-    "import { fireEvent } from '@mui-internal/test-utils';\nfireEvent.keyDown(getByRole('button'), { key: ' ' })",
-    "import { fireEvent } from '@mui-internal/test-utils';\nfireEvent.keyDown(document.body, { key: 'Esc' })",
-    "import { fireEvent } from '@mui-internal/test-utils';\nfireEvent.keyUp(document.body, { key: 'Tab' })",
+    "import { fireEvent } from '@mui/internal-test-utils';\nfireEvent.keyDown(getByRole('button'), { key: ' ' })",
+    "import { fireEvent } from '@mui/internal-test-utils';\nfireEvent.keyDown(document.body, { key: 'Esc' })",
+    "import { fireEvent } from '@mui/internal-test-utils';\nfireEvent.keyUp(document.body, { key: 'Tab' })",
   ],
   invalid: [
     {
-      code: "import { fireEvent } from '@mui-internal/test-utils';\nfireEvent.keyUp(document.activeElement, { key: 'LeftArrow' })",
+      code: "import { fireEvent } from '@mui/internal-test-utils';\nfireEvent.keyUp(document.activeElement, { key: 'LeftArrow' })",
       errors: [
         {
           message:
@@ -23,7 +23,7 @@ ruleTester.run('disallow-active-element-as-key-event-target', rule, {
       ],
     },
     {
-      code: "import { fireEvent } from '@mui-internal/test-utils';\nfireEvent.keyDown(document.activeElement, { key: 'DownArrow' })",
+      code: "import { fireEvent } from '@mui/internal-test-utils';\nfireEvent.keyDown(document.activeElement, { key: 'DownArrow' })",
       errors: [
         {
           message:
@@ -54,7 +54,7 @@ ruleTester.run('disallow-active-element-as-key-event-target', rule, {
     },
     {
       // test non-null assertion operator
-      code: "import { fireEvent } from '@mui-internal/test-utils';\nfireEvent.keyUp(document.activeElement!, { key: 'LeftArrow' })",
+      code: "import { fireEvent } from '@mui/internal-test-utils';\nfireEvent.keyUp(document.activeElement!, { key: 'LeftArrow' })",
       errors: [
         {
           message:

packages/test-utils/src/createDOM.js packages-internal/test-utils/src/createDOM.js

@@ -49,8 +49,8 @@
     "prop-types": "^15.8.1"
   },
   "devDependencies": {
-    "@mui-internal/test-utils": "workspace:^",
     "@mui/internal-babel-macros": "workspace:^",
+    "@mui/internal-test-utils": "workspace:^",
     "@mui/types": "workspace:^",
     "@testing-library/react": "^15.0.7",
     "@testing-library/user-event": "^14.5.2",
@@ -64,7 +64,7 @@
     "lodash": "^4.17.21",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "sinon": "^15.2.0"
+    "sinon": "^16.1.3"
   },
   "peerDependencies": {
     "@types/react": "^17.0.0 || ^18.0.0",

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { createRenderer, createMount } from '@mui-internal/test-utils';
+import { createRenderer, createMount } from '@mui/internal-test-utils';
 import { Badge, badgeClasses as classes } from '@mui/base/Badge';
 import { describeConformanceUnstyled } from '../../test/describeConformanceUnstyled';
 

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { act, createMount, createRenderer, fireEvent } from '@mui-internal/test-utils';
+import { act, createMount, createRenderer, fireEvent } from '@mui/internal-test-utils';
 import { expect } from 'chai';
 import { spy } from 'sinon';
 import { Button, buttonClasses } from '@mui/base/Button';

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

@@ -8,7 +8,7 @@ import {
   fireEvent,
   fireDiscreteEvent,
   screen,
-} from '@mui-internal/test-utils';
+} from '@mui/internal-test-utils';
 import { Portal } from '@mui/base/Portal';
 import { ClickAwayListener } from '@mui/base/ClickAwayListener';
 

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

@@ -6,7 +6,7 @@ import {
   flushMicrotasks,
   MuiRenderResult,
   RenderOptions,
-} from '@mui-internal/test-utils';
+} from '@mui/internal-test-utils';
 import { Dropdown } from '@mui/base/Dropdown';
 import { DropdownContext } from '@mui/base/useDropdown';
 import { MenuButton } from '@mui/base/MenuButton';

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import { expect } from 'chai';
-import { act, createRenderer, screen } from '@mui-internal/test-utils';
+import { act, createRenderer, screen } from '@mui/internal-test-utils';
 import { FocusTrap } from '@mui/base/FocusTrap';
 import { Portal } from '@mui/base/Portal';