v22 PR

src/Breadcrumb/Breadcrumb.test.jsx

@@ -48,15 +48,16 @@ describe('<Breadcrumb />', () => {
     expect(screen.getAllByRole('presentation').length).toBe(2);
   });
 
-  it('fires the passed in click handler', () => {
+  it('fires the passed in click handler', async () => {
+    const user = userEvent.setup();
     const clickHandler = jest.fn();
     render(<Breadcrumb {...baseProps} clickHandler={clickHandler} />);
 
     const listItems = screen.queryAllByRole('listitem');
     const links = screen.queryAllByRole('link');
     expect(listItems.length).toBe(baseProps.links.length);
 
-    userEvent.click(links[0]);
+    await user.click(links[0]);
     expect(clickHandler).toHaveBeenCalled();
   });
 

src/Button/deprecated/Button.test.jsx

@@ -14,21 +14,23 @@ describe('<Button />', () => {
     expect(button).toBeInTheDocument();
   });
 
-  it('puts focus on button on click', () => {
+  it('puts focus on button on click', async () => {
+    const user = userEvent.setup();
     const { getByText } = render(<Button {...defaultProps} />);
     const button = getByText(defaultProps.label);
 
     expect(button).not.toHaveFocus();
-    userEvent.click(button);
+    await user.click(button);
     expect(button).toHaveFocus();
   });
 
-  it('calls onClick prop on click', () => {
+  it('calls onClick prop on click', async () => {
+    const user = userEvent.setup();
     const onClickSpy = jest.fn();
     const { getByText } = render(<Button {...defaultProps} onClick={onClickSpy} />);
     const button = getByText(defaultProps.label);
 
-    userEvent.click(button);
+    await user.click(button);
     expect(onClickSpy).toHaveBeenCalledTimes(1);
   });
 });

src/Card/CardCarousel/tests/CardCarouselControls.test.jsx

@@ -88,27 +88,29 @@ describe('<CardCarouselControls />', () => {
     expect(tree).toMatchSnapshot();
   });
 
-  it('handles scroll to previous click', () => {
+  it('handles scroll to previous click', async () => {
+    const user = userEvent.setup();
     const contextValue = {
       ...defaultCardCarouselContextValue,
       isScrolledToStart: false,
     };
     render((
       <CardCarouselControlsWrapper cardCarouselContextValue={contextValue} />
     ));
-    userEvent.click(screen.getByLabelText('Scroll to previous'));
+    await user.click(screen.getByLabelText('Scroll to previous'));
     expect(mockScrollToPrevious).toHaveBeenCalledTimes(1);
   });
 
-  it('handles scroll to next click', () => {
+  it('handles scroll to next click', async () => {
+    const user = userEvent.setup();
     const contextValue = {
       ...defaultCardCarouselContextValue,
       isScrolledToEnd: false,
     };
     render((
       <CardCarouselControlsWrapper cardCarouselContextValue={contextValue} />
     ));
-    userEvent.click(screen.getByLabelText('Scroll to next'));
+    await user.click(screen.getByLabelText('Scroll to next'));
     expect(mockScrollToNext).toHaveBeenCalledTimes(1);
   });
 });

src/Collapsible/Collapsible.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, screen } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
 import renderer from 'react-test-renderer';
 import userEvent from '@testing-library/user-event';
 
@@ -75,17 +75,23 @@ describe('<Collapsible />', () => {
         <Collapsible.Advanced ref={ref}>{collapsibleContent}</Collapsible.Advanced>,
       );
     });
-    it('opens on .open()', () => {
+    it('opens on .open()', async () => {
       expect(screen.queryByText(EXAMPLE_CONTENT)).not.toBeInTheDocument();
       ref.current.open();
-      expect(screen.getByText(EXAMPLE_CONTENT)).toBeInTheDocument();
+      await waitFor(() => {
+        expect(screen.getByText(EXAMPLE_CONTENT)).toBeInTheDocument();
+      });
     });
 
-    it('closes on .close()', () => {
+    it('closes on .close()', async() => {
       ref.current.open();
-      expect(screen.getByText(EXAMPLE_CONTENT)).toBeInTheDocument();
+      await waitFor(() => {
+        expect(screen.getByText(EXAMPLE_CONTENT)).toBeInTheDocument();
+      });
       ref.current.close();
-      expect(screen.queryByText(EXAMPLE_CONTENT)).not.toBeInTheDocument();
+      await waitFor(() => {
+        expect(screen.queryByText(EXAMPLE_CONTENT)).not.toBeInTheDocument();
+      });
     });
 
     it('correct behavior with unmountOnExit', () => {
@@ -127,7 +133,9 @@ describe('<Collapsible />', () => {
 
     it('closes on trigger click', async () => {
       collapsible.open();
-      expect(screen.getByText(EXAMPLE_CONTENT)).toBeInTheDocument();
+      await waitFor(() => {
+        expect(screen.getByText(EXAMPLE_CONTENT)).toBeInTheDocument();
+      });
       await userEvent.click(screen.getAllByRole('button')[0]); // Close
       expect(screen.queryByText(EXAMPLE_CONTENT)).not.toBeInTheDocument();
     });

src/ColorPicker/ColorPicker.test.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import renderer from 'react-test-renderer';
 import userEvent from '@testing-library/user-event';
-import { render, screen, act } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 
 import ColorPicker from '.';
 
@@ -29,33 +29,26 @@ describe('picker works as expected', () => {
   const color = 'wassap';
   const setColor = jest.fn();
   it('validates hex color', async () => {
+    const user = userEvent.setup();
     render(<ColorPicker color={color} setColor={setColor} />);
 
-    await act(async () => {
-      await userEvent.click(screen.getByRole('button'));
-    });
+    await user.click(screen.getByRole('button'));
     expect(screen.queryByTestId('hex-input').value).toEqual('#wassap');
     expect(screen.queryByText('Colors must be in hexadecimal format.')).toBeInTheDocument();
 
-    await act(async () => {
-      await userEvent.clear(screen.getByTestId('hex-input'));
-      await userEvent.paste(screen.getByTestId('hex-input'), '32116c');
-    });
+    await user.clear(screen.getByTestId('hex-input')); // clear() will keep focus on the element, so we can paste
+    await user.paste('32116c');
     expect(screen.queryByTestId('hex-input').value).toEqual('#32116c');
     expect(screen.queryByText('Colors must be in hexadecimal format.')).not.toBeInTheDocument();
 
-    await act(async () => {
-      await userEvent.clear(screen.getByTestId('hex-input'));
-      await userEvent.paste(screen.getByTestId('hex-input'), 'yuk');
-    });
+    await user.clear(screen.getByTestId('hex-input'));
+    await user.paste('yuk');
 
     expect(screen.queryByTestId('hex-input').value).toEqual('#yuk');
     expect(screen.queryByText('Colors must be in hexadecimal format.')).toBeInTheDocument();
 
-    await act(async () => {
-      await userEvent.clear(screen.getByTestId('hex-input'));
-      await userEvent.paste(screen.getByTestId('hex-input'), '#fad');
-    });
+    await user.clear(screen.getByTestId('hex-input'));
+    await user.paste('#fad');
 
     expect(screen.queryByTestId('hex-input').value).toEqual('#fad');
     expect(screen.queryByText('Colors must be in hexadecimal format.')).not.toBeInTheDocument();

src/DataTable/selection/tests/ControlledSelectHeader.test.jsx

@@ -42,7 +42,8 @@ describe('<ControlledSelectHeader />', () => {
     jest.resetAllMocks();
   });
 
-  it('correctly selects all page rows', () => {
+  it('correctly selects all page rows', async () => {
+    const user = userEvent.setup();
     const isChecked = true;
     mockToggleAllPageRowsSelectedProps.mockReturnValue({
       checked: isChecked,
@@ -53,13 +54,14 @@ describe('<ControlledSelectHeader />', () => {
     render(<ControlledSelectHeaderWrapper tableProps={tableProps} selectProps={selectProps} />);
 
     const checkbox = screen.getByRole('checkbox');
-    userEvent.click(checkbox);
+    await user.click(checkbox);
 
     expect(spy).toHaveBeenCalledTimes(1);
     expect(spy).toHaveBeenCalledWith(rows, tableProps.itemCount);
   });
 
-  it('correctly unselects all page rows', () => {
+  it('correctly unselects all page rows', async () => {
+    const user = userEvent.setup();
     const spy = jest.spyOn(selectActions, 'clearPageSelectionAction');
     mockToggleAllPageRowsSelectedProps.mockReturnValue({
       checked: false,
@@ -78,7 +80,7 @@ describe('<ControlledSelectHeader />', () => {
     render(<ControlledSelectHeaderWrapper tableProps={newTableProps} selectProps={selectProps} />);
 
     const checkbox = screen.getByRole('checkbox');
-    userEvent.click(checkbox);
+    await user.click(checkbox);
 
     expect(spy).toHaveBeenCalledTimes(1);
     const rowIds = getRowIds(rows).map(id => id.toString());

src/DataTable/tests/BulkActions.test.jsx

@@ -10,7 +10,6 @@ import {
 } from '../CollapsibleButtonGroup';
 import { useWindowSize, Button } from '../..';
 import DataTableContext from '../DataTableContext';
-import { waitForComponentToPaint } from './utils';
 
 jest.mock('../../hooks/useWindowSize');
 useWindowSize.mockReturnValue({ width: 800 });
@@ -199,8 +198,7 @@ describe('<BulkActions />', () => {
     });
 
     it('displays the user\'s second button as an outline button', () => {
-      const { container } = render(<BulkActionsWrapper />);
-      waitForComponentToPaint(container);
+      render(<BulkActionsWrapper />);
       const buttons = screen.getAllByTestId('action');
       expect(buttons[0].textContent).toBe(SECOND_ACTION);
     });

src/DataTable/tests/DataViewToggle.test.jsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
-import { act } from 'react-dom/test-utils';
 
 import userEvent from '@testing-library/user-event';
 import DataTableContext from '../DataTableContext';
@@ -78,6 +77,7 @@ describe('data view toggle behavior', () => {
   });
 
   test('onDataViewToggle is invoked when clicking on buttons', async () => {
+    const user = userEvent.setup();
     const onDataViewToggle = jest.fn();
     render(
       <DataTableContext.Provider
@@ -95,15 +95,11 @@ describe('data view toggle behavior', () => {
     );
     expect(screen.queryByRole('group')).toBeInTheDocument();
     const cardButton = screen.getByLabelText(DATA_VIEW_TOGGLE_VALUES.card.alt);
-    await act(async () => {
-      userEvent.click(cardButton);
-    });
+    await user.click(cardButton);
     expect(onDataViewToggle).toHaveBeenCalledWith(DATA_VIEW_TOGGLE_VALUES.card.value);
 
     const listButton = screen.getByLabelText(DATA_VIEW_TOGGLE_VALUES.list.alt);
-    await act(async () => {
-      userEvent.click(listButton);
-    });
+    await user.click(listButton);
     expect(onDataViewToggle).toHaveBeenCalledWith(DATA_VIEW_TOGGLE_VALUES.list.value);
   });
 });