Merge branch 'master' into feat/RadioGroup

.eslintrc.js

@@ -57,5 +57,15 @@ module.exports = {
         'no-console': 'off',
       },
     },
+    {
+      files: ['packages/**/*.test{.tsx,.js}'],
+      excludedFiles: 'packages/mui-base/src/legacy/**/*.*',
+      extends: ['plugin:testing-library/react'],
+      rules: {
+        'testing-library/prefer-screen-queries': 'off', // TODO: enable and fix
+        'testing-library/no-container': 'off', // TODO: enable and fix
+        'testing-library/render-result-naming-convention': 'off', // False positives
+      },
+    },
   ],
 };

docs/package.json

@@ -76,7 +76,7 @@
     "@babel/plugin-transform-react-constant-elements": "^7.25.1",
     "@babel/preset-typescript": "^7.24.7",
     "@mui/internal-docs-utils": "^1.0.8",
-    "@mui/internal-test-utils": "1.0.6",
+    "@mui/internal-test-utils": "1.0.6-dev.20240805-092432-9f940a61d6",
     "@types/autosuggest-highlight": "^3.2.3",
     "@types/chai": "^4.3.17",
     "@types/node": "^18.19.42",

package.json

@@ -79,7 +79,7 @@
     "@mui/internal-docs-utils": "^1.0.8",
     "@mui/internal-markdown": "^1.0.8",
     "@mui/internal-scripts": "^1.0.14",
-    "@mui/internal-test-utils": "1.0.6",
+    "@mui/internal-test-utils": "1.0.6-dev.20240805-092432-9f940a61d6",
     "@mui/material": "6.0.0-beta.4",
     "@mui/monorepo": "github:mui/material-ui#v6.0.0-beta.4",
     "@mui/utils": "6.0.0-beta.4",
@@ -122,6 +122,7 @@
     "eslint-plugin-mocha": "^10.4.3",
     "eslint-plugin-react": "^7.34.2",
     "eslint-plugin-react-hooks": "^4.6.2",
+    "eslint-plugin-testing-library": "^6.2.2",
     "execa": "^8.0.1",
     "fast-glob": "^3.3.2",
     "fs-extra": "^11.2.0",

packages/mui-base/package.json

@@ -26,6 +26,9 @@
     "type": "opencollective",
     "url": "https://opencollective.com/mui-org"
   },
+  "imports": {
+    "#test-utils": "./test/index.ts"
+  },
   "scripts": {
     "build": "pnpm build:node && pnpm build:stable && pnpm build:types && pnpm build:copy-files",
     "build:node": "node ../../scripts/build.mjs node",
@@ -49,7 +52,7 @@
   },
   "devDependencies": {
     "@mui/internal-babel-macros": "^1.0.1",
-    "@mui/internal-test-utils": "1.0.6",
+    "@mui/internal-test-utils": "1.0.6-dev.20240805-092432-9f940a61d6",
     "@testing-library/react": "^15.0.7",
     "@testing-library/user-event": "^14.5.2",
     "@types/chai": "^4.3.17",

packages/mui-base/src/AlertDialog/Backdrop/AlertDialogBackdrop.test.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import * as AlertDialog from '@base_ui/react/AlertDialog';
-import { createRenderer, describeConformance } from '../../../test';
+import { createRenderer, describeConformance } from '#test-utils';
 
 describe('<AlertDialog.Backdrop />', () => {
   const { render } = createRenderer();

packages/mui-base/src/AlertDialog/Close/AlertDialogClose.test.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import * as AlertDialog from '@base_ui/react/AlertDialog';
-import { createRenderer, describeConformance } from '../../../test';
+import { createRenderer, describeConformance } from '#test-utils';
 
 describe('<AlertDialog.Close />', () => {
   const { render } = createRenderer();

packages/mui-base/src/AlertDialog/Description/AlertDialogDescription.test.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import * as AlertDialog from '@base_ui/react/AlertDialog';
-import { createRenderer, describeConformance } from '../../../test';
+import { createRenderer, describeConformance } from '#test-utils';
 
 describe('<AlertDialog.Description />', () => {
   const { render } = createRenderer();

packages/mui-base/src/AlertDialog/Popup/AlertDialogPopup.test.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import * as AlertDialog from '@base_ui/react/AlertDialog';
-import { createRenderer, describeConformance } from '../../../test';
+import { createRenderer, describeConformance } from '#test-utils';
 
 describe('<AlertDialog.Popup />', () => {
   const { render } = createRenderer();

packages/mui-base/src/AlertDialog/Title/AlertDialogTitle.test.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import * as AlertDialog from '@base_ui/react/AlertDialog';
-import { createRenderer, describeConformance } from '../../../test';
+import { createRenderer, describeConformance } from '#test-utils';
 
 describe('<AlertDialog.Title />', () => {
   const { render } = createRenderer();

packages/mui-base/src/AlertDialog/Trigger/AlertDialogTrigger.test.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import * as AlertDialog from '@base_ui/react/AlertDialog';
-import { createRenderer, describeConformance } from '../../../test';
+import { createRenderer, describeConformance } from '#test-utils';
 
 describe('<AlertDialog.Trigger />', () => {
   const { render } = createRenderer();

packages/mui-base/src/Checkbox/Indicator/CheckboxIndicator.test.tsx

@@ -1,9 +1,8 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer } from '@mui/internal-test-utils';
 import * as Checkbox from '@base_ui/react/Checkbox';
 import { CheckboxContext } from '@base_ui/react/Checkbox';
-import { describeConformance } from '../../../test/describeConformance';
+import { createRenderer, describeConformance } from '#test-utils';
 
 const testContext = {
   checked: true,
@@ -17,7 +16,6 @@ describe('<Checkbox.Indicator />', () => {
   const { render } = createRenderer();
 
   describeConformance(<Checkbox.Indicator />, () => ({
-    inheritComponent: 'span',
     refInstanceof: window.HTMLSpanElement,
     render(node) {
       return render(
@@ -26,8 +24,8 @@ describe('<Checkbox.Indicator />', () => {
     },
   }));
 
-  it('should not render indicator by default', () => {
-    const { container } = render(
+  it('should not render indicator by default', async () => {
+    const { container } = await render(
       <Checkbox.Root>
         <Checkbox.Indicator />
       </Checkbox.Root>,
@@ -36,8 +34,8 @@ describe('<Checkbox.Indicator />', () => {
     expect(indicator).to.equal(null);
   });
 
-  it('should render indicator when checked', () => {
-    const { container } = render(
+  it('should render indicator when checked', async () => {
+    const { container } = await render(
       <Checkbox.Root checked>
         <Checkbox.Indicator />
       </Checkbox.Root>,
@@ -46,8 +44,8 @@ describe('<Checkbox.Indicator />', () => {
     expect(indicator).not.to.equal(null);
   });
 
-  it('should spread extra props', () => {
-    const { container } = render(
+  it('should spread extra props', async () => {
+    const { container } = await render(
       <Checkbox.Root defaultChecked>
         <Checkbox.Indicator data-extra-prop="Lorem ipsum" />
       </Checkbox.Root>,
@@ -57,8 +55,8 @@ describe('<Checkbox.Indicator />', () => {
   });
 
   describe('keepMounted prop', () => {
-    it('should keep indicator mounted when unchecked', () => {
-      const { container } = render(
+    it('should keep indicator mounted when unchecked', async () => {
+      const { container } = await render(
         <Checkbox.Root>
           <Checkbox.Indicator keepMounted />
         </Checkbox.Root>,
@@ -67,8 +65,8 @@ describe('<Checkbox.Indicator />', () => {
       expect(indicator).not.to.equal(null);
     });
 
-    it('should keep indicator mounted when checked', () => {
-      const { container } = render(
+    it('should keep indicator mounted when checked', async () => {
+      const { container } = await render(
         <Checkbox.Root checked>
           <Checkbox.Indicator keepMounted />
         </Checkbox.Root>,
@@ -77,8 +75,8 @@ describe('<Checkbox.Indicator />', () => {
       expect(indicator).not.to.equal(null);
     });
 
-    it('should keep indicator mounted when indeterminate', () => {
-      const { container } = render(
+    it('should keep indicator mounted when indeterminate', async () => {
+      const { container } = await render(
         <Checkbox.Root indeterminate>
           <Checkbox.Indicator keepMounted />
         </Checkbox.Root>,