ref(react-testing-library): Introduce user-event (#29638)

Author: priscilawebdev

package.json

@@ -32,6 +32,7 @@
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^12.0.0",
     "@testing-library/react-hooks": "^7.0.2",
+    "@testing-library/user-event": "^13.5.0",
     "@types/color": "^3.0.2",
     "@types/compression-webpack-plugin": "^6.0.5",
     "@types/css-minimizer-webpack-plugin": "^3.0.1",

static/app/components/clipboardTooltip.tsx

@@ -46,6 +46,7 @@ const TooltipClipboardWrapper = styled('div')`
 `;
 
 const TooltipClipboardIconWrapper = styled('div')`
+  pointer-events: auto;
   position: relative;
   bottom: -${space(0.25)};
   :hover {

tests/js/sentry-test/reactTestingLibrary.tsx

@@ -1,7 +1,12 @@
 import {Component, Fragment} from 'react';
 import {cache} from '@emotion/css';
 import {CacheProvider, ThemeProvider} from '@emotion/react';
-import {render, RenderOptions} from '@testing-library/react';
+import {
+  fireEvent as reactRtlFireEvent,
+  render,
+  RenderOptions,
+} from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 import {Organization} from 'app/types';
 import {lightTheme} from 'app/utils/theme';
@@ -68,4 +73,11 @@ const mountWithTheme = (
 
 export * from '@testing-library/react';
 
-export {mountWithTheme};
+/**
+ * @deprecated
+ * Use userEvent over fireEvent where possible.
+ * More details: https://kentcdodds.com/blog/common-mistakes-with-react-testing-library#not-using-testing-libraryuser-event
+ */
+const fireEvent = reactRtlFireEvent;
+
+export {mountWithTheme, userEvent, fireEvent};

tests/js/spec/components/banner.spec.tsx

@@ -1,4 +1,4 @@
-import {fireEvent, mountWithTheme, screen} from 'sentry-test/reactTestingLibrary';
+import {mountWithTheme, screen, userEvent} from 'sentry-test/reactTestingLibrary';
 
 import Banner from 'app/components/banner';
 
@@ -7,7 +7,7 @@ describe('Banner', function () {
     mountWithTheme(<Banner dismissKey="test" title="test" />);
     expect(screen.getByText('test')).toBeInTheDocument();
 
-    fireEvent.click(screen.getByLabelText('Close'));
+    userEvent.click(screen.getByLabelText('Close'));
 
     expect(screen.queryByText('test')).not.toBeInTheDocument();
     expect(localStorage.getItem('test-banner-dismissed')).toBe('true');

tests/js/spec/components/breadcrumbs.spec.jsx

@@ -1,4 +1,4 @@
-import {fireEvent, mountWithTheme, screen} from 'sentry-test/reactTestingLibrary';
+import {mountWithTheme, screen, userEvent} from 'sentry-test/reactTestingLibrary';
 
 import Breadcrumbs from 'app/components/breadcrumbs';
 
@@ -43,15 +43,15 @@ describe('Breadcrumbs', () => {
 
   it('generates correct links', () => {
     createWrapper();
-    fireEvent.click(screen.getByText('Test 1'));
+    userEvent.click(screen.getByText('Test 1'));
     expect(routerContext.context.router.push).toHaveBeenCalledWith('/test1');
-    fireEvent.click(screen.getByText('Test 2'));
+    userEvent.click(screen.getByText('Test 2'));
     expect(routerContext.context.router.push).toHaveBeenCalledWith('/test2');
   });
 
   it('does not make links where no `to` is provided', () => {
     createWrapper();
-    fireEvent.click(screen.getByText('Test 3'));
+    userEvent.click(screen.getByText('Test 3'));
     expect(routerContext.context.router.push).not.toHaveBeenCalled();
   });
 
@@ -77,12 +77,12 @@ describe('Breadcrumbs', () => {
       />,
       {context: routerContext}
     );
-    fireEvent.mouseOver(screen.getByText('dropdown crumb'));
+    userEvent.hover(screen.getByText('dropdown crumb'));
 
     const item3 = await screen.findByText('item3');
     expect(item3).toBeInTheDocument();
 
-    fireEvent.click(item3);
+    userEvent.click(item3);
     expect(onSelect).toHaveBeenCalledWith(
       expect.objectContaining({label: 'item3'}),
       expect.anything(),

tests/js/spec/components/button.spec.tsx

@@ -1,4 +1,4 @@
-import {fireEvent, mountWithTheme, screen} from 'sentry-test/reactTestingLibrary';
+import {mountWithTheme, screen, userEvent} from 'sentry-test/reactTestingLibrary';
 
 import Button from 'app/components/button';
 
@@ -38,7 +38,7 @@ describe('Button', function () {
     mountWithTheme(<Button onClick={spy}>Click me</Button>, {
       context: routerContext,
     });
-    fireEvent.click(screen.getByText('Click me'));
+    userEvent.click(screen.getByText('Click me'));
 
     expect(spy).toHaveBeenCalled();
   });
@@ -51,7 +51,7 @@ describe('Button', function () {
       </Button>,
       {context: routerContext}
     );
-    fireEvent.click(screen.getByText('Click me'));
+    userEvent.click(screen.getByText('Click me'));
 
     expect(spy).not.toHaveBeenCalled();
   });

tests/js/spec/components/clipboardTooltip.spec.tsx

@@ -1,6 +1,6 @@
 import copy from 'copy-text-to-clipboard';
 
-import {fireEvent, mountWithTheme, screen} from 'sentry-test/reactTestingLibrary';
+import {mountWithTheme, screen, userEvent} from 'sentry-test/reactTestingLibrary';
 
 import ClipboardTooltip from 'app/components/clipboardTooltip';
 
@@ -17,13 +17,12 @@ describe('ClipboardTooltip', function () {
     );
 
     expect(screen.getByText(content)).toBeInTheDocument();
-    fireEvent.mouseEnter(screen.getByText(content));
+    userEvent.hover(screen.getByText(content));
 
     await screen.findByText(title);
 
-    const clipboardContent = screen.getByLabelText('Copy to clipboard');
-    expect(clipboardContent).toBeInTheDocument();
-    fireEvent.click(clipboardContent);
+    expect(screen.getByLabelText('Copy to clipboard')).toBeInTheDocument();
+    userEvent.click(screen.getByLabelText('Copy to clipboard'));
 
     expect(copy).toHaveBeenCalledWith(title);
   });

tests/js/spec/components/errorRobot.spec.jsx

@@ -1,4 +1,4 @@
-import {fireEvent, mountWithTheme, screen} from 'sentry-test/reactTestingLibrary';
+import {mountWithTheme, screen, userEvent} from 'sentry-test/reactTestingLibrary';
 
 import {Client} from 'app/api';
 import {ErrorRobot} from 'app/components/errorRobot';
@@ -42,7 +42,7 @@ describe('ErrorRobot', function () {
 
     it('Renders installation instructions', function () {
       createWrapper();
-      fireEvent.click(screen.getByText('Installation Instructions'));
+      userEvent.click(screen.getByText('Installation Instructions'));
       expect(routerContext.context.router.push).toHaveBeenCalledWith(
         '/org-slug/project-slug/getting-started/'
       );

tests/js/spec/components/events/interfaces/breadcrumbs/breadcrumbs.spec.tsx

@@ -1,5 +1,5 @@
 import {initializeOrg} from 'sentry-test/initializeOrg';
-import {fireEvent, mountWithTheme, screen} from 'sentry-test/reactTestingLibrary';
+import {mountWithTheme, screen, userEvent} from 'sentry-test/reactTestingLibrary';
 import {getAllByTextContent} from 'sentry-test/utils';
 
 import Breadcrumbs from 'app/components/events/interfaces/breadcrumbs';
@@ -70,15 +70,15 @@ describe('Breadcrumbs', () => {
     it('should filter crumbs based on crumb message', async function () {
       mountWithTheme(<Breadcrumbs {...props} />);
 
-      const searchInput = screen.getByPlaceholderText('Search breadcrumbs');
-
-      fireEvent.change(searchInput, {target: {value: 'hi'}});
+      userEvent.type(screen.getByPlaceholderText('Search breadcrumbs'), 'hi');
 
       expect(
         await screen.findByText('Sorry, no breadcrumbs match your search query')
       ).toBeInTheDocument();
 
-      fireEvent.change(searchInput, {target: {value: 'up'}});
+      userEvent.click(screen.getByLabelText('Clear'));
+
+      userEvent.type(screen.getByPlaceholderText('Search breadcrumbs'), 'up');
 
       expect(
         screen.queryByText('Sorry, no breadcrumbs match your search query')
@@ -90,9 +90,7 @@ describe('Breadcrumbs', () => {
     it('should filter crumbs based on crumb level', function () {
       mountWithTheme(<Breadcrumbs {...props} />);
 
-      const searchInput = screen.getByPlaceholderText('Search breadcrumbs');
-
-      fireEvent.change(searchInput, {target: {value: 'war'}});
+      userEvent.type(screen.getByPlaceholderText('Search breadcrumbs'), 'war');
 
       // breadcrumbs + filter item
       // TODO(Priscila): Filter should not render in the dom if not open
@@ -102,9 +100,7 @@ describe('Breadcrumbs', () => {
     it('should filter crumbs based on crumb category', function () {
       mountWithTheme(<Breadcrumbs {...props} />);
 
-      const searchInput = screen.getByPlaceholderText('Search breadcrumbs');
-
-      fireEvent.change(searchInput, {target: {value: 'error'}});
+      userEvent.type(screen.getByPlaceholderText('Search breadcrumbs'), 'error');
 
       expect(getAllByTextContent('error')).toHaveLength(2);
     });
@@ -129,7 +125,7 @@ describe('Breadcrumbs', () => {
 
       const searchInput = screen.getByPlaceholderText('Search breadcrumbs');
 
-      fireEvent.change(searchInput, {target: {value: 'sup'}});
+      userEvent.type(searchInput, 'sup');
 
       expect(screen.queryByTestId('crumb')).not.toBeInTheDocument();
 

tests/js/spec/components/events/interfaces/crashContent/stackTrace/content.spec.tsx

@@ -1,4 +1,4 @@
-import {fireEvent, mountWithTheme, screen} from 'sentry-test/reactTestingLibrary';
+import {mountWithTheme, screen, userEvent} from 'sentry-test/reactTestingLibrary';
 
 import StackTraceContent from 'app/components/events/interfaces/crashContent/stackTrace/content';
 import {StacktraceType} from 'app/types/stacktrace';
@@ -81,19 +81,15 @@ describe('StackTrace', function () {
     const frameTitles = screen.getAllByTestId('title');
 
     // collapse the expanded frame (by default)
-    fireEvent.mouseDown(frameTitles[0]);
-    fireEvent.click(frameTitles[0]);
+    userEvent.click(frameTitles[0]);
 
     // all frames are now collapsed
     expect(screen.queryByTestId('toggle-button-expanded')).not.toBeInTheDocument();
     expect(screen.getAllByTestId('toggle-button-collapsed')).toHaveLength(5);
 
     // expand penultimate and last frame
-    fireEvent.mouseDown(frameTitles[frameTitles.length - 2]);
-    fireEvent.click(frameTitles[frameTitles.length - 2]);
-
-    fireEvent.mouseDown(frameTitles[frameTitles.length - 1]);
-    fireEvent.click(frameTitles[frameTitles.length - 1]);
+    userEvent.click(frameTitles[frameTitles.length - 2]);
+    userEvent.click(frameTitles[frameTitles.length - 1]);
 
     // two frames are now collapsed
     expect(screen.getAllByTestId('toggle-button-expanded')).toHaveLength(2);
@@ -114,8 +110,7 @@ describe('StackTrace', function () {
     expect(screen.getAllByTestId('toggle-button-collapsed')).toHaveLength(4);
 
     // collapse the expanded frame (by default)
-    fireEvent.mouseDown(expandedToggleButtons);
-    fireEvent.click(expandedToggleButtons);
+    userEvent.click(expandedToggleButtons);
 
     // all frames are now collapsed
     expect(screen.queryByTestId('toggle-button-expanded')).not.toBeInTheDocument();
@@ -124,11 +119,8 @@ describe('StackTrace', function () {
     const collapsedToggleButtons = screen.getAllByTestId('toggle-button-collapsed');
 
     // expand penultimate and last frame
-    fireEvent.mouseDown(collapsedToggleButtons[collapsedToggleButtons.length - 2]);
-    fireEvent.click(collapsedToggleButtons[collapsedToggleButtons.length - 2]);
-
-    fireEvent.mouseDown(collapsedToggleButtons[collapsedToggleButtons.length - 1]);
-    fireEvent.click(collapsedToggleButtons[collapsedToggleButtons.length - 1]);
+    userEvent.click(collapsedToggleButtons[collapsedToggleButtons.length - 2]);
+    userEvent.click(collapsedToggleButtons[collapsedToggleButtons.length - 1]);
 
     // two frames are now collapsed
     expect(screen.getAllByTestId('toggle-button-expanded')).toHaveLength(2);