[code-infra] Set up eslint-plugin-testing-library (#14232)

Signed-off-by: Lukas Tyla <llukas.tyla@gmail.com> Co-authored-by: Andrew Cherniavskyi <andrew@mui.com>
mui · Aug 20, 2024 · a943aef · a943aef
1 parent ea3fbcc
commit a943aef
Show file tree

Hide file tree

Showing 110 changed files with 2,579 additions and 2,470 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -181,6 +181,19 @@ module.exports = {
   },
   overrides: [
     ...baseline.overrides,
+    {
+      files: [
+        // matching the pattern of the test runner
+        '*.test.js',
+        '*.test.ts',
+        '*.test.tsx',
+      ],
+      excludedFiles: ['test/e2e/**/*', 'test/regressions/**/*'],
+      extends: ['plugin:testing-library/react'],
+      rules: {
+        'testing-library/no-container': 'off',
+      },
+    },
     {
       files: [
         // matching the pattern of the test runner

diff --git a/package.json b/package.json
@@ -149,6 +149,7 @@
     "eslint-plugin-react": "^7.35.0",
     "eslint-plugin-react-compiler": "0.0.0-experimental-9ed098e-20240725",
     "eslint-plugin-react-hooks": "^4.6.2",
+    "eslint-plugin-testing-library": "^6.3.0",
     "fast-glob": "^3.3.2",
     "format-util": "^1.0.5",
     "fs-extra": "^11.2.0",

diff --git a/packages/x-charts-pro/src/ResponsiveChartContainerPro/ResponsiveChartContainerPro.test.tsx b/packages/x-charts-pro/src/ResponsiveChartContainerPro/ResponsiveChartContainerPro.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer, screen, waitFor } from '@mui/internal-test-utils';
+import { createRenderer, screen } from '@mui/internal-test-utils';
 import { LicenseInfo } from '@mui/x-license';
 import { sharedLicenseStatuses } from '@mui/x-license/useLicenseVerifier/useLicenseVerifier';
 import { ResponsiveChartContainerPro } from './ResponsiveChartContainerPro';
@@ -21,8 +21,6 @@ describe('<ResponsiveChartContainerPro /> - License', () => {
       render(<ResponsiveChartContainerPro series={[]} width={100} height={100} />),
     ).toErrorDev(['MUI X: Missing license key.']);
 
-    await waitFor(() => {
-      expect(screen.findAllByText('MUI X Missing license key')).not.to.equal(null);
-    });
+    expect(await screen.findAllByText('MUI X Missing license key')).not.to.equal(null);
   });
 });
diff --git a/packages/x-charts/src/context/HighlightedProvider/useHighlighted.test.tsx b/packages/x-charts/src/context/HighlightedProvider/useHighlighted.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { ErrorBoundary, createRenderer } from '@mui/internal-test-utils';
+import { ErrorBoundary, createRenderer, screen } from '@mui/internal-test-utils';
 import { useHighlighted } from './useHighlighted';
 import { HighlightedProvider } from './HighlightedProvider';
 import { SeriesProvider } from '../SeriesProvider';
@@ -42,7 +42,7 @@ describe('useHighlighted', () => {
   });
 
   it('should not throw an error when parent context is present', () => {
-    const { getByText } = render(
+    render(
       <PluginProvider>
         <SeriesProvider series={[]}>
           <HighlightedProvider highlightedItem={{ seriesId: 'test-id' }}>
@@ -52,6 +52,6 @@ describe('useHighlighted', () => {
       </PluginProvider>,
     );
 
-    expect(getByText('test-id')).toBeVisible();
+    expect(screen.getByText('test-id')).toBeVisible();
   });
 });
diff --git a/packages/x-charts/src/hooks/useSeries.test.tsx b/packages/x-charts/src/hooks/useSeries.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { ErrorBoundary, createRenderer } from '@mui/internal-test-utils';
+import { ErrorBoundary, createRenderer, screen } from '@mui/internal-test-utils';
 import { useSeries } from './useSeries';
 import { SeriesProvider } from '../context/SeriesProvider';
 import { PluginProvider } from '../internals';
@@ -41,14 +41,14 @@ describe('useSeries', () => {
   });
 
   it('should not throw an error when parent context is present', () => {
-    const { getByText } = render(
+    render(
       <PluginProvider>
         <SeriesProvider series={[{ type: 'bar', id: 'test-id', data: [1, 2] }]}>
           <UseSeries />
         </SeriesProvider>
       </PluginProvider>,
     );
 
-    expect(getByText('test-id')).toBeVisible();
+    expect(screen.getByText('test-id')).toBeVisible();
   });
 });
diff --git a/packages/x-charts/src/hooks/useSvgRef.test.tsx b/packages/x-charts/src/hooks/useSvgRef.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { ErrorBoundary, createRenderer } from '@mui/internal-test-utils';
+import { ErrorBoundary, createRenderer, screen } from '@mui/internal-test-utils';
 import { useSvgRef } from './useSvgRef';
 import { DrawingProvider } from '../context/DrawingProvider';
 
@@ -52,11 +52,11 @@ describe('useSvgRef', () => {
       );
     }
 
-    const { findByText, forceUpdate } = render(<RenderDrawingProvider />);
+    const { forceUpdate } = render(<RenderDrawingProvider />);
 
     // Ref is not available on first render.
     forceUpdate();
 
-    expect(await findByText('test-id')).toBeVisible();
+    expect(await screen.findByText('test-id')).toBeVisible();
   });
 });
diff --git a/packages/x-data-grid-premium/src/tests/aggregation.DataGridPremium.test.tsx b/packages/x-data-grid-premium/src/tests/aggregation.DataGridPremium.test.tsx
@@ -1,14 +1,8 @@
 import * as React from 'react';
-import {
-  createRenderer,
-  screen,
-  userEvent,
-  within,
-  act,
-  fireEvent,
-} from '@mui/internal-test-utils';
+import { createRenderer, screen, within, act, fireEvent } from '@mui/internal-test-utils';
 import { expect } from 'chai';
 import { getCell, getColumnHeaderCell, getColumnValues } from 'test/utils/helperFn';
+import { fireUserEvent } from 'test/utils/fireUserEvent';
 import { SinonSpy, spy } from 'sinon';
 import {
   DataGridPremium,
@@ -177,7 +171,7 @@ describe('<DataGridPremium /> - Aggregation', () => {
         setProps({ columns: [{ ...column, editable: true }] });
         fireEvent.doubleClick(cell);
         expect(cell.querySelector('input')).not.to.equal(null);
-        userEvent.mousePress(getCell(1, 0));
+        fireUserEvent.mousePress(getCell(1, 0));
 
         setProps({ columns: [column] });
         fireEvent.doubleClick(cell);
@@ -409,8 +403,8 @@ describe('<DataGridPremium /> - Aggregation', () => {
 
       act(() => apiRef.current.showColumnMenu('id'));
       clock.runToLast();
-      userEvent.mousePress(screen.getByLabelText('Aggregation'));
-      userEvent.mousePress(
+      fireUserEvent.mousePress(screen.getByLabelText('Aggregation'));
+      fireUserEvent.mousePress(
         within(
           screen.getByRole('listbox', {
             name: 'Aggregation',

diff --git a/packages/x-data-grid-premium/src/tests/cellSelection.DataGridPremium.test.tsx b/packages/x-data-grid-premium/src/tests/cellSelection.DataGridPremium.test.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { stub, SinonStub } from 'sinon';
 import { expect } from 'chai';
 import { spyApi, getCell, grid } from 'test/utils/helperFn';
-import { createRenderer, fireEvent, act, userEvent, screen } from '@mui/internal-test-utils';
+import { createRenderer, fireEvent, act, screen } from '@mui/internal-test-utils';
 import {
   DataGridPremium,
   DataGridPremiumProps,
@@ -11,6 +11,7 @@ import {
   gridClasses,
 } from '@mui/x-data-grid-premium';
 import { getBasicGridData } from '@mui/x-data-grid-generator';
+import { fireUserEvent } from 'test/utils/fireUserEvent';
 
 describe('<DataGridPremium /> - Cell selection', () => {
   const { render } = createRenderer();
@@ -116,9 +117,9 @@ describe('<DataGridPremium /> - Cell selection', () => {
       expect(document.querySelector('.Mui-selected')).to.equal(null);
       const cell = getCell(0, 0);
       cell.focus();
-      userEvent.mousePress(cell);
+      fireUserEvent.mousePress(cell);
       fireEvent.keyDown(cell, { key: 'Shift' });
-      userEvent.mousePress(getCell(2, 1), { shiftKey: true });
+      fireUserEvent.mousePress(getCell(2, 1), { shiftKey: true });
       expect(document.querySelectorAll('.Mui-selected')).to.have.length(3 * 2); // 3 rows with 2 cells each
     });
 
@@ -128,9 +129,9 @@ describe('<DataGridPremium /> - Cell selection', () => {
 
       const cell = getCell(0, 0);
       cell.focus();
-      userEvent.mousePress(cell);
+      fireUserEvent.mousePress(cell);
       fireEvent.keyDown(cell, { key: 'Shift' });
-      userEvent.mousePress(getCell(2, 1), { shiftKey: true });
+      fireUserEvent.mousePress(getCell(2, 1), { shiftKey: true });
       expect(spiedSelectCellsBetweenRange.lastCall.args[0]).to.deep.equal({ id: 0, field: 'id' });
       expect(spiedSelectCellsBetweenRange.lastCall.args[1]).to.deep.equal({
         id: 2,
@@ -142,9 +143,9 @@ describe('<DataGridPremium /> - Cell selection', () => {
       render(<TestDataGridSelection />);
       const cell = getCell(0, 0);
       cell.focus();
-      userEvent.mousePress(cell);
+      fireUserEvent.mousePress(cell);
       fireEvent.keyDown(cell, { key: 'Shift' });
-      userEvent.mousePress(getCell(2, 2), { shiftKey: true });
+      fireUserEvent.mousePress(getCell(2, 2), { shiftKey: true });
 
       expect(getCell(0, 0)).to.have.class(gridClasses['cell--rangeTop']);
       expect(getCell(0, 0)).to.have.class(gridClasses['cell--rangeLeft']);
@@ -167,7 +168,7 @@ describe('<DataGridPremium /> - Cell selection', () => {
       const cell = getCell(0, 0);
       cell.focus();
       expect(cell).toHaveFocus();
-      userEvent.mousePress(cell);
+      fireUserEvent.mousePress(cell);
       fireEvent.click(getCell(2, 1), { shiftKey: true });
       expect(cell).toHaveFocus();
     });
@@ -179,7 +180,7 @@ describe('<DataGridPremium /> - Cell selection', () => {
       const spiedSelectCellsBetweenRange = spyApi(apiRef.current, 'selectCellRange');
       const cell = getCell(0, 0);
       cell.focus();
-      userEvent.mousePress(cell);
+      fireUserEvent.mousePress(cell);
       fireEvent.keyDown(cell, { key: 'Shift' });
       fireEvent.keyDown(cell, { key: 'ArrowDown', shiftKey: true });
       expect(spiedSelectCellsBetweenRange.lastCall.args[0]).to.deep.equal({ id: 0, field: 'id' });
@@ -191,7 +192,7 @@ describe('<DataGridPremium /> - Cell selection', () => {
       const spiedSelectCellsBetweenRange = spyApi(apiRef.current, 'selectCellRange');
       const cell = getCell(1, 0);
       cell.focus();
-      userEvent.mousePress(cell);
+      fireUserEvent.mousePress(cell);
       fireEvent.keyDown(cell, { key: 'Shift' });
       fireEvent.keyDown(cell, { key: 'ArrowUp', shiftKey: true });
       expect(spiedSelectCellsBetweenRange.lastCall.args[0]).to.deep.equal({ id: 1, field: 'id' });
@@ -203,7 +204,7 @@ describe('<DataGridPremium /> - Cell selection', () => {
       const spiedSelectCellsBetweenRange = spyApi(apiRef.current, 'selectCellRange');
       const cell = getCell(0, 1);
       cell.focus();
-      userEvent.mousePress(cell);
+      fireUserEvent.mousePress(cell);
       fireEvent.keyDown(cell, { key: 'Shift' });
       fireEvent.keyDown(cell, { key: 'ArrowLeft', shiftKey: true });
       expect(spiedSelectCellsBetweenRange.lastCall.args[0]).to.deep.equal({
@@ -218,7 +219,7 @@ describe('<DataGridPremium /> - Cell selection', () => {
       const spiedSelectCellsBetweenRange = spyApi(apiRef.current, 'selectCellRange');
       const cell = getCell(0, 0);
       cell.focus();
-      userEvent.mousePress(cell);
+      fireUserEvent.mousePress(cell);
       fireEvent.keyDown(cell, { key: 'Shift' });
       fireEvent.keyDown(cell, { key: 'ArrowRight', shiftKey: true });
       expect(spiedSelectCellsBetweenRange.lastCall.args[0]).to.deep.equal({ id: 0, field: 'id' });
@@ -232,7 +233,7 @@ describe('<DataGridPremium /> - Cell selection', () => {
       render(<TestDataGridSelection />);
       const cell = getCell(0, 0);
       cell.focus();
-      userEvent.mousePress(cell);
+      fireUserEvent.mousePress(cell);
       fireEvent.keyDown(cell, { key: 'Shift' });
       fireEvent.keyDown(cell, { key: 'ArrowDown', shiftKey: true });
       expect(cell).toHaveFocus();