chore(jest): Upgrade user-event -> 14.x (#45410)

Co-authored-by: Malachi Willey <malwilley@gmail.com>
Co-authored-by: Scott Cooper <scttcper@gmail.com>

package.json

@@ -172,7 +172,7 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^12.1.2",
     "@testing-library/react-hooks": "^8.0.1",
-    "@testing-library/user-event": "^13.5.0",
+    "@testing-library/user-event": "^14.4.3",
     "@types/node": "^18.14.0",
     "@visual-snapshot/jest": "7.0.0",
     "babel-gettext-extractor": "^4.1.3",

static/app/components/actions/ignore.spec.jsx

@@ -15,70 +15,70 @@ describe('IgnoreActions', function () {
   });
 
   describe('disabled', function () {
-    it('does not call onUpdate when clicked', function () {
+    it('does not call onUpdate when clicked', async function () {
       render(<IgnoreActions onUpdate={spy} disabled />);
       const button = screen.getByRole('button', {name: 'Ignore'});
       expect(button).toBeDisabled();
-      userEvent.click(button);
+      await userEvent.click(button);
       expect(spy).not.toHaveBeenCalled();
     });
   });
 
   describe('ignored', function () {
-    it('displays ignored view', function () {
+    it('displays ignored view', async function () {
       render(<IgnoreActions onUpdate={spy} isIgnored />);
       const button = screen.getByRole('button', {name: 'Unignore'});
       expect(button).toBeInTheDocument();
       // Shows icon only
       expect(button).toHaveTextContent('');
 
-      userEvent.click(button);
+      await userEvent.click(button);
       expect(spy).toHaveBeenCalledWith({status: 'unresolved', statusDetails: {}});
     });
   });
 
   describe('without confirmation', function () {
-    it('calls spy with ignore details when clicked', function () {
+    it('calls spy with ignore details when clicked', async function () {
       render(<IgnoreActions onUpdate={spy} />);
       const button = screen.getByRole('button', {name: 'Ignore'});
-      userEvent.click(button);
+      await userEvent.click(button);
       expect(spy).toHaveBeenCalledTimes(1);
       expect(spy).toHaveBeenCalledWith({status: 'ignored', statusDetails: {}});
     });
   });
 
   describe('with confirmation step', function () {
-    it('displays confirmation modal with message provided', function () {
+    it('displays confirmation modal with message provided', async function () {
       render(
         <IgnoreActions onUpdate={spy} shouldConfirm confirmMessage={() => 'confirm me'} />
       );
       renderGlobalModal();
       const button = screen.getByRole('button', {name: 'Ignore'});
-      userEvent.click(button);
+      await userEvent.click(button);
 
       expect(screen.getByText('confirm me')).toBeInTheDocument();
       expect(spy).not.toHaveBeenCalled();
-      userEvent.click(screen.getByTestId('confirm-button'));
+      await userEvent.click(screen.getByTestId('confirm-button'));
 
       expect(spy).toHaveBeenCalled();
     });
   });
 
   describe('custom', function () {
-    it('can ignore until a custom date/time', function () {
+    it('can ignore until a custom date/time', async function () {
       render(
         <IgnoreActions onUpdate={spy} shouldConfirm confirmMessage={() => 'confirm me'} />
       );
       renderGlobalModal();
 
-      userEvent.click(screen.getByRole('button', {name: 'Ignore options'}));
-      userEvent.hover(screen.getByRole('menuitemradio', {name: 'For…'}));
-      userEvent.click(screen.getByRole('menuitemradio', {name: /Custom/}));
+      await userEvent.click(screen.getByRole('button', {name: 'Ignore options'}));
+      await userEvent.hover(screen.getByRole('menuitemradio', {name: 'For…'}));
+      await userEvent.click(screen.getByRole('menuitemradio', {name: /Custom/}));
 
       // opens modal
       expect(screen.getByRole('dialog')).toBeInTheDocument();
 
-      userEvent.click(
+      await userEvent.click(
         within(screen.getByRole('dialog')).getByRole('button', {name: 'Ignore'})
       );
 

static/app/components/actions/resolve.spec.jsx

@@ -21,7 +21,7 @@ describe('ResolveActions', function () {
   });
 
   describe('disabled', function () {
-    it('does not call onUpdate when clicked', function () {
+    it('does not call onUpdate when clicked', async function () {
       render(
         <ResolveActions
           onUpdate={spy}
@@ -33,13 +33,13 @@ describe('ResolveActions', function () {
       );
       const button = screen.getByRole('button', {name: 'Resolve'});
       expect(button).toBeDisabled();
-      userEvent.click(button);
+      await userEvent.click(button);
       expect(spy).not.toHaveBeenCalled();
     });
   });
 
   describe('disableDropdown', function () {
-    it('main button calls onUpdate when clicked and dropdown menu disabled', function () {
+    it('main button calls onUpdate when clicked and dropdown menu disabled', async function () {
       render(
         <ResolveActions
           onUpdate={spy}
@@ -52,7 +52,7 @@ describe('ResolveActions', function () {
 
       const button = screen.getByRole('button', {name: 'Resolve'});
       expect(button).toBeEnabled();
-      userEvent.click(button);
+      await userEvent.click(button);
       expect(spy).toHaveBeenCalled();
 
       // Dropdown menu is disabled
@@ -61,7 +61,7 @@ describe('ResolveActions', function () {
   });
 
   describe('resolved', function () {
-    it('calls onUpdate with unresolved status when clicked', function () {
+    it('calls onUpdate with unresolved status when clicked', async function () {
       render(
         <ResolveActions
           onUpdate={spy}
@@ -77,13 +77,13 @@ describe('ResolveActions', function () {
       expect(button).toBeInTheDocument();
       expect(button).toHaveTextContent('');
 
-      userEvent.click(button);
+      await userEvent.click(button);
       expect(spy).toHaveBeenCalledWith({status: 'unresolved', statusDetails: {}});
     });
   });
 
   describe('auto resolved', function () {
-    it('cannot be unresolved manually', function () {
+    it('cannot be unresolved manually', async function () {
       render(
         <ResolveActions
           onUpdate={spy}
@@ -96,13 +96,13 @@ describe('ResolveActions', function () {
         />
       );
 
-      userEvent.click(screen.getByRole('button', {name: 'Unresolve'}));
+      await userEvent.click(screen.getByRole('button', {name: 'Unresolve'}));
       expect(spy).not.toHaveBeenCalled();
     });
   });
 
   describe('without confirmation', function () {
-    it('calls spy with resolved status when clicked', function () {
+    it('calls spy with resolved status when clicked', async function () {
       render(
         <ResolveActions
           onUpdate={spy}
@@ -111,14 +111,14 @@ describe('ResolveActions', function () {
           projectSlug="proj-1"
         />
       );
-      userEvent.click(screen.getByRole('button', {name: 'Resolve'}));
+      await userEvent.click(screen.getByRole('button', {name: 'Resolve'}));
       expect(spy).toHaveBeenCalledTimes(1);
       expect(spy).toHaveBeenCalledWith({status: 'resolved', statusDetails: {}});
     });
   });
 
   describe('with confirmation step', function () {
-    it('displays confirmation modal with message provided', function () {
+    it('displays confirmation modal with message provided', async function () {
       render(
         <ResolveActions
           onUpdate={spy}
@@ -132,13 +132,13 @@ describe('ResolveActions', function () {
       renderGlobalModal();
 
       const button = screen.getByRole('button', {name: 'Resolve'});
-      userEvent.click(button);
+      await userEvent.click(button);
 
       const confirmButton = screen.getByTestId('confirm-button');
       expect(confirmButton).toBeInTheDocument();
       expect(spy).not.toHaveBeenCalled();
 
-      userEvent.click(confirmButton);
+      await userEvent.click(confirmButton);
 
       expect(spy).toHaveBeenCalled();
     });
@@ -160,14 +160,14 @@ describe('ResolveActions', function () {
     );
     renderGlobalModal();
 
-    userEvent.click(screen.getByLabelText('More resolve options'));
-    userEvent.click(screen.getByText('Another existing release…'));
+    await userEvent.click(screen.getByLabelText('More resolve options'));
+    await userEvent.click(screen.getByText('Another existing release…'));
 
     selectEvent.openMenu(screen.getByText('e.g. 1.0.4'));
     expect(await screen.findByText('1.2.0')).toBeInTheDocument();
-    userEvent.click(screen.getByText('1.2.0'));
+    await userEvent.click(screen.getByText('1.2.0'));
 
-    userEvent.click(screen.getByRole('button', {name: 'Save Changes'}));
+    await userEvent.click(screen.getByRole('button', {name: 'Save Changes'}));
     expect(onUpdate).toHaveBeenCalledWith({
       status: 'resolved',
       statusDetails: {

static/app/components/activity/note/input.spec.jsx

@@ -12,36 +12,36 @@ describe('NoteInput', function () {
       render(<NoteInput {...props} />);
     });
 
-    it('submits when meta + enter is pressed', function () {
+    it('submits when meta + enter is pressed', async function () {
       const onCreate = jest.fn();
       render(<NoteInput {...props} onCreate={onCreate} />);
 
-      userEvent.type(screen.getByRole('textbox'), 'something{meta}{enter}');
+      await userEvent.type(screen.getByRole('textbox'), 'something{Meta>}{Enter}');
       expect(onCreate).toHaveBeenCalled();
     });
 
-    it('submits when ctrl + enter is pressed', function () {
+    it('submits when ctrl + enter is pressed', async function () {
       const onCreate = jest.fn();
       render(<NoteInput {...props} onCreate={onCreate} />);
 
-      userEvent.type(screen.getByRole('textbox'), 'something{ctrl}{enter}');
+      await userEvent.type(screen.getByRole('textbox'), 'something{Control>}{Enter}');
       expect(onCreate).toHaveBeenCalled();
     });
 
-    it('does not submit when nothing is entered', function () {
+    it('does not submit when nothing is entered', async function () {
       const onCreate = jest.fn();
       render(<NoteInput {...props} onCreate={onCreate} />);
 
       const textbox = screen.getByRole('textbox');
-      userEvent.type(textbox, '{ctrl}{enter}');
+      await userEvent.type(textbox, '{Control}{enter}');
       expect(onCreate).not.toHaveBeenCalled();
     });
 
-    it('handles errors', function () {
+    it('handles errors', async function () {
       const errorJSON = {detail: {message: 'Note is bad', code: 401, extra: ''}};
       render(<NoteInput {...props} error={!!errorJSON} errorJSON={errorJSON} />);
 
-      userEvent.type(screen.getByRole('textbox'), 'something{ctrl}{enter}');
+      await userEvent.type(screen.getByRole('textbox'), 'something{Control>}{enter}');
       expect(screen.getByText('Note is bad')).toBeInTheDocument();
     });
 
@@ -51,9 +51,9 @@ describe('NoteInput', function () {
       expect(screen.getByRole('button', {name: 'Post Comment'})).toBeDisabled();
     });
 
-    it('enables the submit button when text is entered', function () {
+    it('enables the submit button when text is entered', async function () {
       render(<NoteInput {...props} />);
-      userEvent.type(screen.getByRole('textbox'), 'something');
+      await userEvent.type(screen.getByRole('textbox'), 'something');
 
       expect(screen.getByRole('button', {name: 'Post Comment'})).toBeEnabled();
     });
@@ -66,22 +66,22 @@ describe('NoteInput', function () {
       text: 'an existing item',
     };
 
-    it('edits existing message', function () {
+    it('edits existing message', async function () {
       const onUpdate = jest.fn();
       render(<NoteInput {...props} onUpdate={onUpdate} />);
 
       // Switch to preview
-      userEvent.click(screen.getByRole('tab', {name: 'Preview'}));
+      await userEvent.click(screen.getByRole('tab', {name: 'Preview'}));
 
       expect(screen.getByText('an existing item')).toBeInTheDocument();
 
       // Switch to edit
-      userEvent.click(screen.getByRole('tab', {name: 'Edit'}));
+      await userEvent.click(screen.getByRole('tab', {name: 'Edit'}));
 
       expect(screen.getByRole('textbox')).toHaveTextContent('an existing item');
 
       // Can edit text
-      userEvent.type(screen.getByRole('textbox'), ' new content{ctrl}{enter}');
+      await userEvent.type(screen.getByRole('textbox'), ' new content{Control>}{Enter}');
 
       expect(onUpdate).toHaveBeenCalledWith({
         text: 'an existing item new content',
@@ -89,13 +89,13 @@ describe('NoteInput', function () {
       });
     });
 
-    it('canels editing and moves to preview mode', function () {
+    it('canels editing and moves to preview mode', async function () {
       const onEditFinish = jest.fn();
       render(<NoteInput {...props} onEditFinish={onEditFinish} />);
 
-      userEvent.type(screen.getByRole('textbox'), ' new content');
+      await userEvent.type(screen.getByRole('textbox'), ' new content');
 
-      userEvent.click(screen.getByRole('button', {name: 'Cancel'}));
+      await userEvent.click(screen.getByRole('button', {name: 'Cancel'}));
       expect(onEditFinish).toHaveBeenCalled();
     });
   });

static/app/components/activity/note/inputWithStorage.spec.tsx

@@ -5,12 +5,12 @@ import localStorage from 'sentry/utils/localStorage';
 
 jest.mock('sentry/utils/localStorage');
 
-const changeReactMentionsInput = (value: string) => {
+async function changeReactMentionsInput(value: string) {
   const textbox = screen.getByRole('textbox');
 
-  userEvent.clear(textbox);
-  userEvent.type(screen.getByRole('textbox'), value);
-};
+  await userEvent.clear(textbox);
+  await userEvent.type(textbox, value);
+}
 
 describe('NoteInputWithStorage', function () {
   beforeEach(() => {
@@ -36,10 +36,11 @@ describe('NoteInputWithStorage', function () {
     expect(screen.getByRole('textbox')).toHaveValue('saved item');
   });
 
-  it('saves draft when input changes', function () {
+  it('saves draft when input changes', async function () {
     render(<NoteInputWithStorage {...defaultProps} />);
 
-    changeReactMentionsInput('WIP COMMENT');
+    await userEvent.clear(screen.getByRole('textbox'));
+    await changeReactMentionsInput('WIP COMMENT');
 
     expect(localStorage.setItem).toHaveBeenLastCalledWith(
       'storage',
@@ -47,17 +48,15 @@ describe('NoteInputWithStorage', function () {
     );
   });
 
-  it('removes draft item after submitting', function () {
+  it('removes draft item after submitting', async function () {
     (localStorage as jest.Mocked<typeof localStorage>).getItem.mockImplementation(() =>
       JSON.stringify({item1: 'draft item', item2: 'item2', item3: 'item3'})
     );
 
     render(<NoteInputWithStorage {...defaultProps} />);
 
-    userEvent.clear(screen.getByRole('textbox'));
-    userEvent.type(screen.getByRole('textbox'), 'new comment');
-
-    userEvent.type(screen.getByRole('textbox'), '{ctrl}{enter}{/ctrl}');
+    await changeReactMentionsInput('new comment');
+    await userEvent.type(screen.getByRole('textbox'), '{Control>}{enter}{/Control}');
 
     expect(localStorage.setItem).toHaveBeenLastCalledWith(
       'storage',

static/app/components/assigneeSelector.spec.jsx

@@ -112,7 +112,7 @@ describe('AssigneeSelector', () => {
 
   // Doesn't need to always be async, but it was easier to prevent flakes this way
   const openMenu = async () => {
-    userEvent.click(await screen.findByTestId('assignee-selector'), undefined, {
+    await userEvent.click(await screen.findByTestId('assignee-selector'), undefined, {
       // Skip hover to prevent tooltip from rendering
       skipHover: true,
     });
@@ -208,7 +208,7 @@ describe('AssigneeSelector', () => {
     await openMenu();
     expect(screen.queryByTestId('loading-indicator')).not.toBeInTheDocument();
 
-    userEvent.click(screen.getByText(`${USER_1.name} (You)`));
+    await userEvent.click(screen.getByText(`${USER_1.name} (You)`));
 
     expect(assignMock).toHaveBeenLastCalledWith(
       '/issues/1337/',
@@ -237,7 +237,7 @@ describe('AssigneeSelector', () => {
     await openMenu();
     expect(screen.queryByTestId('loading-indicator')).not.toBeInTheDocument();
 
-    userEvent.click(screen.getByText(`#${TEAM_1.slug}`));
+    await userEvent.click(screen.getByText(`#${TEAM_1.slug}`));
 
     await waitFor(() =>
       expect(assignMock).toHaveBeenCalledWith(
@@ -259,7 +259,7 @@ describe('AssigneeSelector', () => {
     await openMenu();
 
     // Assign first item in list, which is TEAM_1
-    userEvent.click(screen.getByText(`#${TEAM_1.slug}`));
+    await userEvent.click(screen.getByText(`#${TEAM_1.slug}`));
 
     await waitFor(() =>
       expect(assignMock).toHaveBeenCalledWith(
@@ -271,7 +271,7 @@ describe('AssigneeSelector', () => {
     );
 
     await openMenu();
-    userEvent.click(screen.getByRole('button', {name: 'Clear Assignee'}));
+    await userEvent.click(screen.getByRole('button', {name: 'Clear Assignee'}));
 
     // api was called with empty string, clearing assignment
     await waitFor(() =>
@@ -294,7 +294,7 @@ describe('AssigneeSelector', () => {
     await openMenu();
     expect(screen.queryByTestId('loading-indicator')).not.toBeInTheDocument();
 
-    userEvent.click(await screen.findByRole('link', {name: 'Invite Member'}));
+    await userEvent.click(await screen.findByRole('link', {name: 'Invite Member'}));
     expect(openInviteMembersModal).toHaveBeenCalled();
     ConfigStore.get.mockRestore();
   });
@@ -305,13 +305,13 @@ describe('AssigneeSelector', () => {
     await openMenu();
     expect(screen.queryByTestId('loading-indicator')).not.toBeInTheDocument();
 
-    userEvent.type(screen.getByRole('textbox'), 'JohnSmith@example.com');
+    await userEvent.type(screen.getByRole('textbox'), 'JohnSmith@example.com');
 
     // 1 total item
     expect(screen.getByTestId('assignee-option')).toBeInTheDocument();
     expect(screen.getByText(`${USER_2.name}`)).toBeInTheDocument();
 
-    userEvent.keyboard('{enter}');
+    await userEvent.keyboard('{enter}');
 
     await waitFor(() =>
       expect(assignGroup2Mock).toHaveBeenLastCalledWith(
@@ -350,7 +350,7 @@ describe('AssigneeSelector', () => {
 
     const options = screen.getAllByTestId('assignee-option');
     expect(options[4]).toHaveTextContent('JD');
-    act(() => userEvent.click(options[4]));
+    await userEvent.click(options[4]);
 
     await waitFor(() => {
       expect(addMessageSpy).toHaveBeenCalledWith(
@@ -369,7 +369,7 @@ describe('AssigneeSelector', () => {
 
     expect(screen.getByTestId('suggested-avatar-stack')).toBeInTheDocument();
     // Hover over avatar
-    userEvent.hover(screen.getByTestId('letter_avatar-avatar'));
+    await userEvent.hover(screen.getByTestId('letter_avatar-avatar'));
     expect(await screen.findByText('Suggestion: Jane Bloggs')).toBeInTheDocument();
     expect(screen.getByText('commit data')).toBeInTheDocument();
 
@@ -380,7 +380,7 @@ describe('AssigneeSelector', () => {
     const options = screen.getAllByTestId('assignee-option');
     // Suggested assignee initials
     expect(options[0]).toHaveTextContent('JB');
-    userEvent.click(options[0]);
+    await userEvent.click(options[0]);
 
     await waitFor(() =>
       expect(assignGroup2Mock).toHaveBeenCalledWith(
@@ -404,7 +404,7 @@ describe('AssigneeSelector', () => {
     jest.spyOn(GroupStore, 'get').mockImplementation(() => GROUP_1);
     render(<AssigneeSelectorComponent id={GROUP_1.id} />);
 
-    userEvent.hover(screen.getByTestId('unassigned'));
+    await userEvent.hover(screen.getByTestId('unassigned'));
     expect(await screen.findByText('Unassigned')).toBeInTheDocument();
   });
 });

static/app/components/assistant/guideAnchor.spec.jsx

@@ -21,7 +21,7 @@ describe('GuideAnchor', function () {
     };
   });
 
-  it('renders, advances, and finishes', async function () {
+  it('renders, async advances, async and finishes', async function () {
     render(
       <div>
         <GuideAnchor target="issue_number" />
@@ -39,7 +39,7 @@ describe('GuideAnchor', function () {
     //
     // NOTE(epurkhiser): We may be able to remove the skipPointerEventsCheck
     // when we're on popper >= 1.
-    userEvent.click(screen.getByLabelText('Next'), undefined, {
+    await userEvent.click(screen.getByLabelText('Next'), undefined, {
       skipPointerEventsCheck: true,
     });
 
@@ -52,7 +52,7 @@ describe('GuideAnchor', function () {
       url: '/assistant/',
     });
 
-    userEvent.click(screen.getByLabelText('Enough Already'), undefined, {
+    await userEvent.click(screen.getByLabelText('Enough Already'), undefined, {
       skipPointerEventsCheck: true,
     });
 
@@ -84,7 +84,7 @@ describe('GuideAnchor', function () {
       url: '/assistant/',
     });
 
-    userEvent.click(screen.getByLabelText('Dismiss'), undefined, {
+    await userEvent.click(screen.getByLabelText('Dismiss'), undefined, {
       skipPointerEventsCheck: true,
     });
 
@@ -124,7 +124,7 @@ describe('GuideAnchor', function () {
     expect(screen.getByTestId('child-div')).toBeInTheDocument();
   });
 
-  it('if forceHide is true, do not render guide', async function () {
+  it('if forceHide is true, async do not render guide', async function () {
     render(
       <div>
         <GuideAnchor target="issue_number" />

static/app/components/banner.spec.tsx

@@ -3,11 +3,11 @@ import {render, screen, userEvent} from 'sentry-test/reactTestingLibrary';
 import Banner from 'sentry/components/banner';
 
 describe('Banner', function () {
-  it('can be dismissed', function () {
+  it('can be dismissed', async function () {
     render(<Banner dismissKey="test" title="test" />);
     expect(screen.getByText('test')).toBeInTheDocument();
 
-    userEvent.click(screen.getByLabelText('Close'));
+    await userEvent.click(screen.getByLabelText('Close'));
 
     expect(screen.queryByText('test')).not.toBeInTheDocument();
     expect(localStorage.getItem('test-banner-dismissed')).toBe('true');

static/app/components/breadcrumbs.spec.jsx

@@ -42,17 +42,17 @@ describe('Breadcrumbs', () => {
     expect(wrapper.container).toSnapshot();
   });
 
-  it('generates correct links', () => {
+  it('generates correct links', async () => {
     createWrapper();
-    userEvent.click(screen.getByText('Test 1'));
+    await userEvent.click(screen.getByText('Test 1'));
     expect(routerContext.context.router.push).toHaveBeenCalledWith('/test1');
-    userEvent.click(screen.getByText('Test 2'));
+    await userEvent.click(screen.getByText('Test 2'));
     expect(routerContext.context.router.push).toHaveBeenCalledWith('/test2');
   });
 
-  it('does not make links where no `to` is provided', () => {
+  it('does not make links where no `to` is provided', async () => {
     createWrapper();
-    userEvent.click(screen.getByText('Test 3'));
+    await userEvent.click(screen.getByText('Test 3'));
     expect(routerContext.context.router.push).not.toHaveBeenCalled();
   });
 
@@ -78,12 +78,12 @@ describe('Breadcrumbs', () => {
       />,
       {context: routerContext}
     );
-    userEvent.hover(screen.getByText('dropdown crumb'));
+    await userEvent.hover(screen.getByText('dropdown crumb'));
 
     const item3 = await screen.findByText('item3');
     expect(item3).toBeInTheDocument();
 
-    userEvent.click(item3);
+    await userEvent.click(item3);
     expect(onSelect).toHaveBeenCalledWith(expect.objectContaining({label: 'item3'}));
   });
 });

static/app/components/bulkController/bulkNotice.spec.jsx

@@ -34,15 +34,15 @@ describe('BulkNotice', function () {
     expect(wrapper.container).toHaveTextContent('Select the first 1000 items.');
   });
 
-  it('can select all rows across all pages', function () {
+  it('can select all rows across all pages', async function () {
     const onSelectAllRows = jest.fn();
     render(<BulkNotice {...props} isPageSelected onSelectAllRows={onSelectAllRows} />);
 
-    userEvent.click(screen.getByRole('button', {name: 'Select all 64 items.'}));
+    await userEvent.click(screen.getByRole('button', {name: 'Select all 64 items.'}));
     expect(onSelectAllRows).toHaveBeenCalled();
   });
 
-  it('can deselect all once everything is selected', function () {
+  it('can deselect all once everything is selected', async function () {
     const onUnselectAllRows = jest.fn();
     const wrapper = render(
       <BulkNotice
@@ -55,7 +55,7 @@ describe('BulkNotice', function () {
     expect(wrapper.container).toHaveTextContent(
       `Selected all ${props.allRowsCount} items. Cancel selection.`
     );
-    userEvent.click(screen.getByRole('button', {name: 'Cancel selection.'}));
+    await userEvent.click(screen.getByRole('button', {name: 'Cancel selection.'}));
     expect(onUnselectAllRows).toHaveBeenCalled();
   });