[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();