fix(deps): update dependency eslint-plugin-testing-library to v4 (#2160)

Co-authored-by: Renovate Bot <bot@renovateapp.com>
Co-authored-by: tdeekens <tobias.deekens@commercetools.com>

.changeset/pink-queens-prove.md

@@ -0,0 +1,8 @@
+---
+"@commercetools-frontend/application-components": patch
+"@commercetools-frontend/application-shell-connectors": patch
+"@commercetools-frontend/application-shell": patch
+"merchant-center-application-template-starter": patch
+---
+
+Update dependency eslint-plugin-testing-library to v4 and use `screen` over assigning to `rendered`

application-templates/starter/src/components/entry-point/entry-point.spec.js

@@ -1,3 +1,4 @@
+import { screen } from '@testing-library/react';
 import { renderApplicationWithRedux } from '../../test-utils';
 
 const render = (options) => {
@@ -11,30 +12,28 @@ const render = (options) => {
 
 describe('when route matches', () => {
   it('should render view', async () => {
-    const rendered = render({
+    render({
       route: '/my-project/examples-starter',
     });
-    await rendered.findByText(/Page one/i);
+    await screen.findByText(/Page one/i);
   });
 });
 
 describe('when route does not match', () => {
   it('should render catch all', async () => {
-    const rendered = render({
+    render({
       route: '/my-project/xyz',
     });
-    await rendered.findByText(/we could not find what you are looking for/i);
+    await screen.findByText(/we could not find what you are looking for/i);
   });
 });
 
 describe('without permissions', () => {
   it('should render `PageUnauthorized`', async () => {
-    const rendered = render({
+    render({
       route: '/my-project/examples-starter',
       permissions: {},
     });
-    await rendered.findByText(
-      /not enough permissions to access this resource/i
-    );
+    await screen.findByText(/not enough permissions to access this resource/i);
   });
 });

application-templates/starter/src/components/main-view/main-view.spec.js

@@ -1,20 +1,22 @@
 import { fireEvent } from '@commercetools-frontend/application-shell/test-utils';
+import { screen } from '@testing-library/react';
 import { renderApplication } from '../../test-utils';
 
 describe('main view', () => {
   it('the user can click on the link to "one" and the page should show a text with "View one"', async () => {
     const initialRoute = '/my-project/examples-starter';
-    const rendered = renderApplication(null, {
+    const { history } = renderApplication(null, {
       permissions: { canViewProducts: true, canManageProducts: true },
       route: initialRoute,
     });
-    await rendered.findByText(/Hello, world/i);
 
-    fireEvent.click(rendered.getByText(/Page one/i));
+    await screen.findByText(/Hello, world/i);
 
-    await rendered.findByText(/View one/i);
+    fireEvent.click(screen.getByText(/Page one/i));
 
-    expect(rendered.history.location).toEqual(
+    await screen.findByText(/View one/i);
+
+    expect(history.location).toEqual(
       expect.objectContaining({
         pathname: `${initialRoute}/one`,
       })

cypress/.eslintrc.yaml

@@ -6,3 +6,4 @@ rules:
   jest/valid-expect: off
   prefer-object-spread/prefer-object-spread: off
   testing-library/await-async-query: off
+  testing-library/prefer-screen-queries: off

packages/application-components/src/components/dialogs/confirmation-dialog/confirmation-dialog.spec.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import SecondaryButton from '@commercetools-uikit/secondary-button';
-import { renderComponent, fireEvent } from '../../../test-utils';
+import { screen, renderComponent, fireEvent } from '../../../test-utils';
 import ConfirmationDialog from './confirmation-dialog';
 
 type DialogControllerProps = {
@@ -27,7 +27,7 @@ describe('rendering', () => {
   it('should open the modal and close it by clicking on the close button', async () => {
     const onCancel = jest.fn();
     const onConfirm = jest.fn();
-    const rendered = renderComponent(
+    renderComponent(
       <DialogController>
         {({ isOpen, setIsOpen }) => (
           <ConfirmationDialog
@@ -42,24 +42,24 @@ describe('rendering', () => {
         )}
       </DialogController>
     );
-    expect(rendered.queryByText(/Lorem ipsus/i)).not.toBeInTheDocument();
+    expect(screen.queryByText(/Lorem ipsus/i)).not.toBeInTheDocument();
 
-    fireEvent.click(rendered.getByLabelText(/Open Confirmation Dialog/i));
-    await rendered.findByText(/Lorem ipsus/i);
-    expect(rendered.getByText(/Hello/i)).toBeInTheDocument();
+    fireEvent.click(screen.getByLabelText(/Open Confirmation Dialog/i));
+    await screen.findByText(/Lorem ipsus/i);
+    expect(screen.getByText(/Hello/i)).toBeInTheDocument();
 
-    fireEvent.click(rendered.getByLabelText('Cancel'));
+    fireEvent.click(screen.getByLabelText('Cancel'));
     expect(onCancel).toHaveBeenCalled();
-    fireEvent.click(rendered.getByLabelText('Confirm'));
+    fireEvent.click(screen.getByLabelText('Confirm'));
     expect(onConfirm).toHaveBeenCalled();
 
-    fireEvent.click(rendered.getByLabelText(/Close dialog/i));
-    expect(rendered.queryByText(/Lorem ipsus/i)).not.toBeInTheDocument();
+    fireEvent.click(screen.getByLabelText(/Close dialog/i));
+    expect(screen.queryByText(/Lorem ipsus/i)).not.toBeInTheDocument();
   });
   it('should not be able to close the modal when onClose is not provided', async () => {
     const onCancel = jest.fn();
     const onConfirm = jest.fn();
-    const rendered = renderComponent(
+    renderComponent(
       <DialogController>
         {({ isOpen }) => (
           <ConfirmationDialog
@@ -73,12 +73,12 @@ describe('rendering', () => {
         )}
       </DialogController>
     );
-    expect(rendered.queryByText(/Lorem ipsus/i)).not.toBeInTheDocument();
+    expect(screen.queryByText(/Lorem ipsus/i)).not.toBeInTheDocument();
 
-    fireEvent.click(rendered.getByLabelText(/Open Confirmation Dialog/i));
-    await rendered.findByText(/Lorem ipsus/i);
-    expect(rendered.getByText(/Hello/i)).toBeInTheDocument();
+    fireEvent.click(screen.getByLabelText(/Open Confirmation Dialog/i));
+    await screen.findByText(/Lorem ipsus/i);
+    expect(screen.getByText(/Hello/i)).toBeInTheDocument();
 
-    expect(rendered.queryByText(/Close dialog/i)).not.toBeInTheDocument();
+    expect(screen.queryByText(/Close dialog/i)).not.toBeInTheDocument();
   });
 });

packages/application-components/src/components/dialogs/form-dialog/form-dialog.spec.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import SecondaryButton from '@commercetools-uikit/secondary-button';
-import { renderComponent, fireEvent } from '../../../test-utils';
+import { screen, renderComponent, fireEvent } from '../../../test-utils';
 import FormDialog from './form-dialog';
 
 type DialogControllerProps = {
@@ -27,7 +27,7 @@ describe('rendering', () => {
   it('should open the modal and close it by clicking on the close button', async () => {
     const onCancel = jest.fn();
     const onConfirm = jest.fn();
-    const rendered = renderComponent(
+    renderComponent(
       <DialogController>
         {({ isOpen, setIsOpen }) => (
           <FormDialog
@@ -42,24 +42,24 @@ describe('rendering', () => {
         )}
       </DialogController>
     );
-    expect(rendered.queryByText(/Lorem ipsus/i)).not.toBeInTheDocument();
+    expect(screen.queryByText(/Lorem ipsus/i)).not.toBeInTheDocument();
 
-    fireEvent.click(rendered.getByLabelText(/Open Form Dialog/i));
-    await rendered.findByText(/Lorem ipsus/i);
-    expect(rendered.getByText(/Hello/i)).toBeInTheDocument();
+    fireEvent.click(screen.getByLabelText(/Open Form Dialog/i));
+    await screen.findByText(/Lorem ipsus/i);
+    expect(screen.getByText(/Hello/i)).toBeInTheDocument();
 
-    fireEvent.click(rendered.getByLabelText('Cancel'));
+    fireEvent.click(screen.getByLabelText('Cancel'));
     expect(onCancel).toHaveBeenCalled();
-    fireEvent.click(rendered.getByLabelText('Save'));
+    fireEvent.click(screen.getByLabelText('Save'));
     expect(onConfirm).toHaveBeenCalled();
 
-    fireEvent.click(rendered.getByLabelText(/Close dialog/i));
-    expect(rendered.queryByText(/Lorem ipsus/i)).not.toBeInTheDocument();
+    fireEvent.click(screen.getByLabelText(/Close dialog/i));
+    expect(screen.queryByText(/Lorem ipsus/i)).not.toBeInTheDocument();
   });
   it('should not be able to close the modal when onClose is not provided', async () => {
     const onCancel = jest.fn();
     const onConfirm = jest.fn();
-    const rendered = renderComponent(
+    renderComponent(
       <DialogController>
         {({ isOpen }) => (
           <FormDialog
@@ -73,12 +73,12 @@ describe('rendering', () => {
         )}
       </DialogController>
     );
-    expect(rendered.queryByText(/Lorem ipsus/i)).not.toBeInTheDocument();
+    expect(screen.queryByText(/Lorem ipsus/i)).not.toBeInTheDocument();
 
-    fireEvent.click(rendered.getByLabelText(/Open Form Dialog/i));
-    await rendered.findByText(/Lorem ipsus/i);
-    expect(rendered.getByText(/Hello/i)).toBeInTheDocument();
+    fireEvent.click(screen.getByLabelText(/Open Form Dialog/i));
+    await screen.findByText(/Lorem ipsus/i);
+    expect(screen.getByText(/Hello/i)).toBeInTheDocument();
 
-    expect(rendered.queryByText(/Close dialog/i)).not.toBeInTheDocument();
+    expect(screen.queryByText(/Close dialog/i)).not.toBeInTheDocument();
   });
 });

packages/application-components/src/components/dialogs/info-dialog/info-dialog.spec.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import SecondaryButton from '@commercetools-uikit/secondary-button';
-import { renderComponent, fireEvent } from '../../../test-utils';
+import { screen, renderComponent, fireEvent } from '../../../test-utils';
 import InfoDialog from './info-dialog';
 
 type DialogControllerProps = {
@@ -25,7 +25,7 @@ DialogController.displayName = 'DialogController';
 
 describe('rendering', () => {
   it('should open the modal and close it by clicking on the close button', async () => {
-    const rendered = renderComponent(
+    renderComponent(
       <DialogController>
         {({ isOpen, setIsOpen }) => (
           <InfoDialog
@@ -38,13 +38,13 @@ describe('rendering', () => {
         )}
       </DialogController>
     );
-    expect(rendered.queryByText(/Lorem ipsus/)).not.toBeInTheDocument();
+    expect(screen.queryByText(/Lorem ipsus/)).not.toBeInTheDocument();
 
-    fireEvent.click(rendered.getByLabelText(/Open Info Dialog/));
-    await rendered.findByText(/Lorem ipsus/);
-    expect(rendered.getByText(/Hello/)).toBeInTheDocument();
+    fireEvent.click(screen.getByLabelText(/Open Info Dialog/));
+    await screen.findByText(/Lorem ipsus/);
+    expect(screen.getByText(/Hello/)).toBeInTheDocument();
 
-    fireEvent.click(rendered.getByLabelText(/Close dialog/));
-    expect(rendered.queryByText(/Lorem ipsus/)).not.toBeInTheDocument();
+    fireEvent.click(screen.getByLabelText(/Close dialog/));
+    expect(screen.queryByText(/Lorem ipsus/)).not.toBeInTheDocument();
   });
 });

packages/application-components/src/components/maintenance-page-layout/maintenance-page-layout.spec.tsx

@@ -1,7 +1,7 @@
 import type { Props } from './maintenance-page-layout';
 
 import React from 'react';
-import { renderComponent } from '../../../test-utils';
+import { screen, renderComponent } from '../../../test-utils';
 import MaintenancePageLayout from './maintenance-page-layout';
 
 const createTestProps = (props: Partial<Props> = {}) => ({
@@ -18,9 +18,9 @@ describe('rendering', () => {
       props = createTestProps();
     });
     it('renders the title and paragraph', () => {
-      const rendered = renderComponent(<MaintenancePageLayout {...props} />);
-      expect(rendered.getByText('title')).toBeInTheDocument();
-      expect(rendered.getByText('title 1')).toBeInTheDocument();
+      renderComponent(<MaintenancePageLayout {...props} />);
+      expect(screen.getByText('title')).toBeInTheDocument();
+      expect(screen.getByText('title 1')).toBeInTheDocument();
     });
   });
   describe('with both paragraphs', () => {
@@ -30,10 +30,10 @@ describe('rendering', () => {
       });
     });
     it('renders the title and paragraphs', () => {
-      const rendered = renderComponent(<MaintenancePageLayout {...props} />);
-      expect(rendered.getByText('title')).toBeInTheDocument();
-      expect(rendered.getByText('title 1')).toBeInTheDocument();
-      expect(rendered.getByText('title 2')).toBeInTheDocument();
+      renderComponent(<MaintenancePageLayout {...props} />);
+      expect(screen.getByText('title')).toBeInTheDocument();
+      expect(screen.getByText('title 1')).toBeInTheDocument();
+      expect(screen.getByText('title 2')).toBeInTheDocument();
     });
   });
   describe('with both paragraphs and a body content in between', () => {
@@ -44,11 +44,11 @@ describe('rendering', () => {
       });
     });
     it('renders the title, paragraphs and body content', () => {
-      const rendered = renderComponent(<MaintenancePageLayout {...props} />);
-      expect(rendered.getByText('title')).toBeInTheDocument();
-      expect(rendered.getByText('title 1')).toBeInTheDocument();
-      expect(rendered.getByText('title 2')).toBeInTheDocument();
-      expect(rendered.getByText('content')).toBeInTheDocument();
+      renderComponent(<MaintenancePageLayout {...props} />);
+      expect(screen.getByText('title')).toBeInTheDocument();
+      expect(screen.getByText('title 1')).toBeInTheDocument();
+      expect(screen.getByText('title 2')).toBeInTheDocument();
+      expect(screen.getByText('content')).toBeInTheDocument();
     });
   });
   describe('with only one paragraph and the body content', () => {
@@ -58,20 +58,20 @@ describe('rendering', () => {
       });
     });
     it('renders the title, paragraphs and body content', () => {
-      const rendered = renderComponent(<MaintenancePageLayout {...props} />);
-      expect(rendered.getByText('title')).toBeInTheDocument();
-      expect(rendered.getByText('title 1')).toBeInTheDocument();
-      expect(rendered.getByText('content')).toBeInTheDocument();
+      renderComponent(<MaintenancePageLayout {...props} />);
+      expect(screen.getByText('title')).toBeInTheDocument();
+      expect(screen.getByText('title 1')).toBeInTheDocument();
+      expect(screen.getByText('content')).toBeInTheDocument();
     });
   });
   describe('with label', () => {
     beforeEach(() => {
       props = createTestProps({ label: 'page label' });
     });
     it('renders the label as an alt of the image', () => {
-      const rendered = renderComponent(<MaintenancePageLayout {...props} />);
+      renderComponent(<MaintenancePageLayout {...props} />);
       expect(
-        rendered.getByRole('img', { name: props.label })
+        screen.getByRole('img', { name: props.label })
       ).toBeInTheDocument();
     });
   });

packages/application-components/src/components/modal-pages/internals/modal-page-header-title.tsx

@@ -54,7 +54,9 @@ const renderSubtitle = (subtitle?: Props['subtitle']) => {
 };
 
 const ModalPageHeaderTitle = (props: Props) => {
+  // eslint-disable-next-line testing-library/render-result-naming-convention
   const renderedTitle = renderTitle(props.titleSize, props.title);
+  // eslint-disable-next-line testing-library/render-result-naming-convention
   const renderedSubtitle = renderSubtitle(props.subtitle);
   return (
     <div

packages/application-components/src/components/page-not-found/page-not-found.spec.tsx

@@ -1,10 +1,11 @@
 import React from 'react';
-import { renderComponent } from '../../test-utils';
+import { screen, renderComponent } from '../../test-utils';
 import PageNotFound from './page-not-found';
 
 describe('rendering', () => {
   it('should render help desk link', () => {
-    const rendered = renderComponent(<PageNotFound />);
-    expect(rendered.getByText('Help Desk')).toBeInTheDocument();
+    renderComponent(<PageNotFound />);
+
+    expect(screen.getByText('Help Desk')).toBeInTheDocument();
   });
 });

packages/application-components/src/components/page-unauthorized/page-unauthorized.spec.tsx

@@ -1,16 +1,18 @@
 import React from 'react';
-import { renderComponent } from '../../test-utils';
+import { screen, renderComponent } from '../../test-utils';
 import PageUnauthorized from './page-unauthorized';
 
 describe('rendering', () => {
   it('should render help desk link', () => {
-    const rendered = renderComponent(<PageUnauthorized />);
-    expect(rendered.getByText('Help Desk')).toBeInTheDocument();
+    renderComponent(<PageUnauthorized />);
+
+    expect(screen.getByText('Help Desk')).toBeInTheDocument();
   });
   it('should render the title', () => {
-    const rendered = renderComponent(<PageUnauthorized />);
+    renderComponent(<PageUnauthorized />);
+
     expect(
-      rendered.getByText('We could not find what you are looking for')
+      screen.getByText('We could not find what you are looking for')
     ).toBeInTheDocument();
   });
 });