[test] Remove deprecated mocha and karma test scripts and update read…

…me (#1289)

.circleci/config.yml

@@ -151,7 +151,7 @@ jobs:
           react-version: << parameters.react-version >>
       - run:
           name: Run tests on JSDOM
-          command: pnpm test:jsdom --coverage --project @base-ui-components/react --project docs
+          command: pnpm test:jsdom:coverage
       - run:
           name: Check if coverage report is generated
           command: |
@@ -290,7 +290,7 @@ jobs:
           browsers: true
       - run:
           name: Run tests on headless Chromium
-          command: pnpm test:chromium --coverage --project @base-ui-components/react --project docs
+          command: pnpm test:chromium:coverage
       - run:
           name: Check if coverage report is generated
           command: |
@@ -304,36 +304,6 @@ jobs:
             curl -Os https://uploader.codecov.io/latest/linux/codecov
             chmod +x codecov
             ./codecov -t ${CODECOV_TOKEN} -Z -F "$REACT_VERSION-browser"
-      - store_artifacts:
-          # hardcoded in karma-webpack
-          path: /tmp/_karma_webpack_
-          destination: artifact-file
-  test_profile:
-    <<: *default-job
-    docker:
-      - image: mcr.microsoft.com/playwright:v1.49.1-noble
-    steps:
-      - checkout
-      - install_js:
-          react-version: << parameters.react-version >>
-          browsers: true
-      - run:
-          name: Tests real browsers
-          # Run a couple of times for a better sample.
-          # TODO: hack something together where we can compile once and run multiple times e.g. by abusing watchmode.
-          command: |
-            # Running on chrome only since actual times are innaccurate anyway
-            # The other reason is that browserstack allows little concurrency so it's likely that we're starving other runs.
-            pnpm test:karma:profile --browsers chrome,chromeHeadless
-            pnpm test:karma:profile --browsers chrome,chromeHeadless
-            pnpm test:karma:profile --browsers chrome,chromeHeadless
-            pnpm test:karma:profile --browsers chrome,chromeHeadless
-            pnpm test:karma:profile --browsers chrome,chromeHeadless
-      # Persist reports for inspection in https://mui-dashboard.netlify.app/
-      - store_artifacts:
-          # see karma.conf.profile.js reactProfilerReporter.outputDir
-          path: tmp/react-profiler-report/karma
-          destination: react-profiler-report/karma
   test_regressions:
     <<: *default-job
     docker:
@@ -430,12 +400,6 @@ workflows:
           <<: *default-context
           requires:
             - checkout
-  profile:
-    when:
-      equal: [profile, << pipeline.parameters.workflow >>]
-    jobs:
-      - test_profile:
-          <<: *default-context
   react-17:
     triggers:
       - schedule:

.eslintignore

@@ -1,5 +1,4 @@
 .git
-.nyc_output
 /coverage
 /docs/.next
 /docs/export

.eslintrc.js

@@ -53,8 +53,38 @@ module.exports = {
   },
   overrides: [
     ...baseline.overrides.filter(
-      (ruleSet) => !ruleSet.rules.hasOwnProperty('filenames/match-exported'),
+      (ruleSet) =>
+        !ruleSet.rules.hasOwnProperty('filenames/match-exported') &&
+        !ruleSet.extends?.includes('plugin:mocha/recommended'),
     ),
+    {
+      files: [
+        // matching the pattern of the test runner
+        '*.test.?(c|m)[jt]s?(x)',
+      ],
+      rules: {
+        // disable eslint-plugin-jsx-a11y
+        // tests are not driven by assistive technology
+        // add `jsx-a11y` rules once you encounter them in tests
+        'jsx-a11y/click-events-have-key-events': 'off',
+        'jsx-a11y/control-has-associated-label': 'off',
+        'jsx-a11y/iframe-has-title': 'off',
+        'jsx-a11y/label-has-associated-control': 'off',
+        'jsx-a11y/mouse-events-have-key-events': 'off',
+        'jsx-a11y/no-noninteractive-tabindex': 'off',
+        'jsx-a11y/no-static-element-interactions': 'off',
+        'jsx-a11y/tabindex-no-positive': 'off',
+
+        // In tests this is generally intended.
+        'react/button-has-type': 'off',
+        // They are accessed to test custom validator implementation with PropTypes.checkPropTypes
+        'react/forbid-foreign-prop-types': 'off',
+        // components that are defined in test are isolated enough
+        // that they don't need type-checking
+        'react/prop-types': 'off',
+        'react/no-unused-prop-types': 'off',
+      },
+    },
     {
       files: ['docs/src/app/(private)/experiments/**/*{.tsx,.js}'],
       rules: {

.gitignore

@@ -10,7 +10,6 @@
 *.log
 *.tsbuildinfo
 /.eslintcache
-/.nyc_output
 /coverage
 /docs/.env.local
 /docs/.next

package.json

@@ -33,27 +33,21 @@
     "size:snapshot": "node --max-old-space-size=4096 ./scripts/sizeSnapshot/create",
     "size:why": "pnpm size:snapshot --analyze",
     "start": "pnpm install && pnpm docs:dev",
-    "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": "pnpm test:chromium",
     "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": "vite build --config test/e2e/vite.config.mjs",
     "test:e2e:dev": "vite --config test/e2e/vite.config.mjs -l info",
     "test:e2e:run": "cross-env VITEST_ENV=chromium vitest --project e2e",
     "test:e2e:server": "serve test/e2e -p 5173",
-    "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: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": "vite build --config test/regressions/vite.config.mjs",
     "test:regressions:dev": "vite --config test/regressions/vite.config.mjs",
     "test:regressions:run": "cross-env VITEST_ENV=chromium vitest --project regressions",
     "test:regressions:server": "serve test/regressions -p 5173",
-    "test:unit": "cross-env NODE_ENV=test mocha 'packages/**/*.test.{js,ts,tsx}' 'docs/**/*.test.{js,ts,tsx}'",
     "test:jsdom": "cross-env NODE_ENV=test VITEST_ENV=jsdom vitest --project @base-ui-components/react --project docs",
+    "test:jsdom:coverage": "pnpm test:jsdom --coverage",
     "test:chromium": "cross-env NODE_ENV=test VITEST_ENV=chromium vitest --project @base-ui-components/react --project docs",
+    "test:chromium:coverage": "pnpm test:chromium --coverage",
     "test:firefox": "cross-env NODE_ENV=test VITEST_ENV=firefox vitest --project @base-ui-components/react --project docs",
     "test:argos": "node ./scripts/pushArgos.mjs",
     "typescript": "tsc -b tsconfig.json",
@@ -82,7 +76,6 @@
     "@tailwindcss/postcss": "4.0.0-beta.2",
     "@types/fs-extra": "^11.0.4",
     "@types/lodash": "^4.17.13",
-    "@types/mocha": "^10.0.10",
     "@types/node": "^18.19.69",
     "@types/react": "^19.0.2",
     "@types/url-join": "^4.0.3",
@@ -120,7 +113,6 @@
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-jsx-a11y": "^6.10.2",
     "eslint-plugin-material-ui": "workspace:^",
-    "eslint-plugin-mocha": "^10.5.0",
     "eslint-plugin-react": "^7.37.3",
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-testing-library": "^6.5.0",
@@ -129,20 +121,10 @@
     "fs-extra": "^11.2.0",
     "globby": "^14.0.2",
     "jsonc-parser": "^3.3.1",
-    "karma": "^6.4.4",
-    "karma-browserstack-launcher": "~1.6.0",
-    "karma-chrome-launcher": "^3.2.0",
-    "karma-coverage-istanbul-reporter": "^3.0.3",
-    "karma-firefox-launcher": "^2.1.3",
-    "karma-mocha": "^2.0.1",
-    "karma-sourcemap-loader": "^0.4.0",
-    "karma-webpack": "^5.0.1",
     "lerna": "^8.1.9",
     "lodash": "^4.17.21",
     "markdownlint-cli2": "^0.17.1",
-    "mocha": "^10.8.2",
     "nx": "^18.3.5",
-    "nyc": "^15.1.0",
     "piscina": "^4.8.0",
     "postcss": "^8.4.49",
     "postcss-loader": "^8.1.1",
@@ -191,16 +173,5 @@
     "@types/node": "^18.19.69",
     "@types/react": "^19.0.2",
     "@types/react-dom": "^19.0.2"
-  },
-  "nyc": {
-    "include": [
-      "packages/react/src/**/*.{js,ts,tsx}"
-    ],
-    "exclude": [
-      "**/*.test.{js,ts,tsx}",
-      "**/*.test/*"
-    ],
-    "sourceMap": false,
-    "instrument": false
   }
 }

packages/eslint-plugin-material-ui/package.json

@@ -9,8 +9,5 @@
     "@typescript-eslint/experimental-utils": "^5.62.0",
     "@typescript-eslint/parser": "^8.19.0"
   },
-  "scripts": {
-    "test": "cd ../../ && cross-env NODE_ENV=test mocha 'packages/eslint-plugin-material-ui/**/*.test.js' --timeout 3000"
-  },
   "license": "MIT"
 }

packages/react/package.json

@@ -72,7 +72,7 @@
     "test:package": "publint ./build && attw --pack ./build",
     "prebuild": "rimraf --glob build build-tests \"*.tsbuildinfo\"",
     "release": "pnpm build && pnpm publish",
-    "test": "cd ../../ && cross-env NODE_ENV=test mocha 'packages/react/**/*.test.{js,ts,tsx}'",
+    "test": "cross-env NODE_ENV=test VITEST_ENV=jsdom vitest",
     "typescript": "tsc -b tsconfig.json"
   },
   "dependencies": {

packages/react/scripts/createPackageManifest.mts

@@ -14,7 +14,7 @@ type TransformedExports = Record<
 
 export async function createPackageManifest() {
   const packageData = await fse.readFile(path.resolve(PROJECT_ROOT, './package.json'), 'utf8');
-  const { imports, exports, nyc, scripts, devDependencies, workspaces, ...otherPackageData } =
+  const { imports, exports, scripts, devDependencies, workspaces, ...otherPackageData } =
     JSON.parse(packageData);
 
   const newPackageData = {

packages/react/src/accordion/root/AccordionRoot.test.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { spy } from 'sinon';
-import { describeSkipIf, flushMicrotasks } from '@mui/internal-test-utils';
+import { flushMicrotasks } from '@mui/internal-test-utils';
 import { DirectionProvider } from '@base-ui-components/react/direction-provider';
 import { Accordion } from '@base-ui-components/react/accordion';
 import { createRenderer, describeConformance } from '#test-utils';
@@ -46,11 +46,9 @@ describe('<Accordion.Root />', () => {
   });
 
   describe('uncontrolled', () => {
-    it('open state', async function test(t = {}) {
+    it('open state', async ({ skip }) => {
       if (isJSDOM) {
-        // @ts-expect-error to support mocha and vitest
-        // eslint-disable-next-line @typescript-eslint/no-unused-expressions
-        this?.skip?.() || t?.skip();
+        skip();
       }
 
       const { getByRole, queryByText, user } = await render(
@@ -284,7 +282,7 @@ describe('<Accordion.Root />', () => {
     });
   });
 
-  describeSkipIf(isJSDOM)('keyboard interactions', () => {
+  describe.skipIf(isJSDOM)('keyboard interactions', () => {
     ['Enter', 'Space'].forEach((key) => {
       it(`key: ${key} toggles the Accordion open state`, async () => {
         const { getByRole, queryByText, user } = await render(
@@ -506,7 +504,7 @@ describe('<Accordion.Root />', () => {
     });
   });
 
-  describeSkipIf(isJSDOM)('prop: openMultiple', () => {
+  describe.skipIf(isJSDOM)('prop: openMultiple', () => {
     it('multiple items can be open by default', async () => {
       const { getAllByRole, queryByText, user } = await render(
         <Accordion.Root>
@@ -580,7 +578,7 @@ describe('<Accordion.Root />', () => {
     });
   });
 
-  describeSkipIf(isJSDOM)('horizontal orientation', () => {
+  describe.skipIf(isJSDOM)('horizontal orientation', () => {
     it('ArrowLeft/Right moves focus in horizontal orientation', async () => {
       const { getAllByRole, user } = await render(
         <Accordion.Root orientation="horizontal">
@@ -617,7 +615,7 @@ describe('<Accordion.Root />', () => {
       expect(trigger1).toHaveFocus();
     });
 
-    describeSkipIf(isJSDOM)('RTL', () => {
+    describe.skipIf(isJSDOM)('RTL', () => {
       it('ArrowLeft/Right is reversed for horizontal accordions in RTL mode', async () => {
         const { getAllByRole, user } = await render(
           <DirectionProvider direction="rtl">
@@ -658,7 +656,7 @@ describe('<Accordion.Root />', () => {
     });
   });
 
-  describeSkipIf(isJSDOM)('prop: onValueChange', () => {
+  describe.skipIf(isJSDOM)('prop: onValueChange', () => {
     it('default item value', async () => {
       const onValueChange = spy();
 

packages/react/src/alert-dialog/root/AlertDialogRoot.test.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { describeSkipIf, screen, waitFor } from '@mui/internal-test-utils';
+import { screen, waitFor } from '@mui/internal-test-utils';
 import { AlertDialog } from '@base-ui-components/react/alert-dialog';
 import { createRenderer } from '#test-utils';
 import { spy } from 'sinon';
@@ -88,7 +88,7 @@ describe('<AlertDialog.Root />', () => {
     });
   });
 
-  describeSkipIf(isJSDOM)('modality', () => {
+  describe.skipIf(isJSDOM)('modality', () => {
     it('makes other interactive elements on the page inert when a modal dialog is open and restores them after the dialog is closed', async () => {
       const { user } = await render(
         <div>
@@ -135,7 +135,7 @@ describe('<AlertDialog.Root />', () => {
     });
   });
 
-  describeSkipIf(isJSDOM)('prop: onCloseComplete', () => {
+  describe.skipIf(isJSDOM)('prop: onCloseComplete', () => {
     it('is called on close when there is no exit animation defined', async () => {
       let onCloseCompleteCalled = false;
       function notifyonCloseComplete() {
@@ -169,7 +169,7 @@ describe('<AlertDialog.Root />', () => {
     });
 
     it('is called on close when the exit animation finishes', async () => {
-      (globalThis as any).BASE_UI_ANIMATIONS_DISABLED = false;
+      globalThis.BASE_UI_ANIMATIONS_DISABLED = false;
 
       let onCloseCompleteCalled = false;
       function notifyonCloseComplete() {