Upgrade @testing-library/user-event to latest ^14.5.2

examples/content_management_examples/public/examples/todos/stories/todo.stories.test.tsx

@@ -7,7 +7,7 @@
  */
 
 import React from 'react';
-import { render, screen, within, waitForElementToBeRemoved } from '@testing-library/react';
+import { render, screen, within, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { SimpleTodoApp } from './todo.stories';
 
@@ -28,7 +28,7 @@ test('SimpleTodoApp works', async () => {
   // apply "completed" filter
   let todoFilters = screen.getByRole('group', { name: 'Todo filters' });
   let completedFilter = within(todoFilters).getByTestId('completed');
-  userEvent.click(completedFilter);
+  await userEvent.click(completedFilter);
 
   // check only completed todos are shown
   todos = await screen.findAllByRole('listitem');
@@ -39,7 +39,7 @@ test('SimpleTodoApp works', async () => {
   // apply "todo" filter
   todoFilters = screen.getByRole('group', { name: 'Todo filters' });
   const todoFilter = within(todoFilters).getByTestId('todo');
-  userEvent.click(todoFilter);
+  await userEvent.click(todoFilter);
 
   // check only todo todos are shown
   todos = await screen.findAllByRole('listitem');
@@ -50,7 +50,7 @@ test('SimpleTodoApp works', async () => {
   // apply "all" filter
   todoFilters = screen.getByRole('group', { name: 'Todo filters' });
   const allFilter = within(todoFilters).getByTestId('all');
-  userEvent.click(allFilter);
+  await userEvent.click(allFilter);
 
   // check all todos are shown
   todos = await screen.findAllByRole('listitem');
@@ -59,7 +59,7 @@ test('SimpleTodoApp works', async () => {
 
   // add new todo
   const newTodoInput = screen.getByTestId('newTodo');
-  userEvent.type(newTodoInput, 'Learn React{enter}');
+  await userEvent.type(newTodoInput, 'Learn React{enter}');
 
   // wait for new todo to be added
   await screen.findByText('Learn React');
@@ -68,12 +68,12 @@ test('SimpleTodoApp works', async () => {
   let newTodo = todos[2];
 
   // mark new todo as completed
-  userEvent.click(within(newTodo).getByRole('checkbox'));
+  await userEvent.click(within(newTodo).getByRole('checkbox'));
 
   // apply "completed" filter again
   todoFilters = screen.getByRole('group', { name: 'Todo filters' });
   completedFilter = within(todoFilters).getByTestId('completed');
-  userEvent.click(completedFilter);
+  await userEvent.click(completedFilter);
 
   // check only completed todos are shown and a new todo is there
   await screen.findByText('Learn React'); // wait for new todo to be there
@@ -83,8 +83,10 @@ test('SimpleTodoApp works', async () => {
   expect(newTodo).toHaveTextContent('Learn React');
 
   // remove new todo
-  userEvent.click(within(newTodo).getByLabelText('Delete'));
+  await userEvent.click(within(newTodo).getByLabelText('Delete'));
 
   // wait for new todo to be removed
-  await waitForElementToBeRemoved(() => screen.getByText('Learn React'));
+  await waitFor(() => {
+    expect(screen.queryByText('Learn React')).not.toBeInTheDocument();
+  });
 });

package.json

@@ -1483,10 +1483,10 @@
     "@storybook/testing-react": "^1.3.0",
     "@storybook/theming": "^6.5.16",
     "@testing-library/dom": "^8.19.0",
-    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/jest-dom": "^6.5.0",
     "@testing-library/react": "^12.1.5",
     "@testing-library/react-hooks": "^8.0.1",
-    "@testing-library/user-event": "^13.5.0",
+    "@testing-library/user-event": "^14.5.2",
     "@types/adm-zip": "^0.5.0",
     "@types/archiver": "^5.3.1",
     "@types/async": "^3.2.3",
@@ -1612,7 +1612,6 @@
     "@types/styled-components": "^5.1.0",
     "@types/supertest": "^6.0.2",
     "@types/tapable": "^1.0.6",
-    "@types/testing-library__jest-dom": "^5.14.7",
     "@types/textarea-caret": "^3.0.1",
     "@types/tinycolor2": "^1.4.1",
     "@types/tough-cookie": "^4.0.5",

packages/content-management/table_list_view_table/src/__jest__/created_by_filter.test.tsx

@@ -8,7 +8,7 @@
 
 import React from 'react';
 import { MemoryRouter } from 'react-router-dom';
-import { render, screen, within, waitForElementToBeRemoved } from '@testing-library/react';
+import { render, screen, within } from '@testing-library/react';
 import { I18nProvider } from '@kbn/i18n-react';
 import { WithServices } from './tests.helpers';
 import { TableListViewTable, type TableListViewTableProps } from '../table_list_view_table';
@@ -124,18 +124,18 @@ describe('created_by filter', () => {
     // 5 items in the list
     expect(screen.getAllByTestId(/userContentListingTitleLink/)).toHaveLength(4);
 
-    userEvent.click(screen.getByTestId('userFilterPopoverButton'));
+    await userEvent.click(screen.getByTestId('userFilterPopoverButton'));
 
     const userSelectablePopover = screen.getByTestId('userSelectableList');
     const popover = within(userSelectablePopover);
     expect(await popover.findAllByTestId(/userProfileSelectableOption/)).toHaveLength(3);
 
-    userEvent.click(popover.getByTestId('userProfileSelectableOption-user1'));
+    await userEvent.click(popover.getByTestId('userProfileSelectableOption-user1'));
 
     // 1 item in the list
     expect(screen.getAllByTestId(/userContentListingTitleLink/)).toHaveLength(1);
 
-    userEvent.click(popover.getByTestId('userProfileSelectableOption-user2'));
+    await userEvent.click(popover.getByTestId('userProfileSelectableOption-user2'));
 
     // 2 items in the list
     expect(screen.getAllByTestId(/userContentListingTitleLink/)).toHaveLength(2);
@@ -150,11 +150,11 @@ describe('created_by filter', () => {
     // 4 items in the list
     expect(screen.getAllByTestId(/userContentListingTitleLink/)).toHaveLength(4);
 
-    userEvent.click(screen.getByTestId('userFilterPopoverButton'));
+    await userEvent.click(screen.getByTestId('userFilterPopoverButton'));
 
     const userSelectablePopover = screen.getByTestId('userSelectableList');
     const popover = within(userSelectablePopover);
-    userEvent.click(await popover.findByTestId('userProfileSelectableOption-null'));
+    await userEvent.click(await popover.findByTestId('userProfileSelectableOption-null'));
 
     // just 1 item in the list
     expect(screen.getAllByTestId(/userContentListingTitleLink/)).toHaveLength(1);
@@ -177,7 +177,7 @@ describe('created_by filter', () => {
     // 3 items in the list
     expect(screen.getAllByTestId(/userContentListingTitleLink/)).toHaveLength(3);
 
-    userEvent.click(screen.getByTestId('userFilterPopoverButton'));
+    await userEvent.click(screen.getByTestId('userFilterPopoverButton'));
 
     const userSelectablePopover = screen.getByTestId('userSelectableList');
     const popover = within(userSelectablePopover);
@@ -202,11 +202,11 @@ describe('created_by filter', () => {
     // 1 item in the list
     expect(screen.getAllByTestId(/userContentListingTitleLink/)).toHaveLength(1);
 
-    userEvent.click(screen.getByTestId('userFilterPopoverButton'));
+    await userEvent.click(screen.getByTestId('userFilterPopoverButton'));
 
     const userSelectablePopover = screen.getByTestId('userSelectableList');
     const popover = within(userSelectablePopover);
-    await waitForElementToBeRemoved(() => popover.getByRole('progressbar'));
+    expect(popover.queryByRole('progressbar')).not.toBeInTheDocument();
     expect(popover.getAllByTestId('userFilterEmptyMessage')[1]).toBeVisible();
   });
 });

packages/kbn-alerts-grouping/src/components/alerts_grouping.test.tsx

@@ -10,7 +10,7 @@
  * Adapted from x-pack/plugins/security_solution/public/detections/components/alerts_table/alerts_grouping.test.tsx
  */
 import React from 'react';
-import { render, within, screen, waitFor } from '@testing-library/react';
+import { render, within, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import type { Filter } from '@kbn/es-query';
 
@@ -120,14 +120,14 @@ describe('AlertsGrouping', () => {
     expect(screen.getByTestId('empty-results-panel')).toBeInTheDocument();
   });
 
-  it('renders grouping table in first accordion level when single group is selected', () => {
+  it('renders grouping table in first accordion level when single group is selected', async () => {
     render(
       <TestProviders>
         <AlertsGrouping {...mockGroupingProps}>{renderChildComponent}</AlertsGrouping>
       </TestProviders>
     );
 
-    userEvent.click(
+    await userEvent.click(
       within(screen.getByTestId('level-0-group-0')).getByTestId('group-panel-toggle')
     );
     expect(
@@ -172,7 +172,7 @@ describe('AlertsGrouping', () => {
     );
   });
 
-  it('renders grouping table in second accordion level when 2 groups are selected', () => {
+  it('renders grouping table in second accordion level when 2 groups are selected', async () => {
     mockUseAlertsGroupingState.mockReturnValue({
       ...mockAlertsGroupingState,
       grouping: {
@@ -185,13 +185,13 @@ describe('AlertsGrouping', () => {
         <AlertsGrouping {...mockGroupingProps}>{renderChildComponent}</AlertsGrouping>
       </TestProviders>
     );
-    userEvent.click(
+    await userEvent.click(
       within(screen.getByTestId('level-0-group-0')).getByTestId('group-panel-toggle')
     );
     expect(
       within(screen.getByTestId('level-0-group-0')).queryByTestId('alerts-table')
     ).not.toBeInTheDocument();
-    userEvent.click(
+    await userEvent.click(
       within(screen.getByTestId('level-1-group-0')).getByTestId('group-panel-toggle')
     );
     expect(
@@ -213,19 +213,19 @@ describe('AlertsGrouping', () => {
       </TestProviders>
     );
 
-    userEvent.click(screen.getByTestId('pagination-button-1'));
-    userEvent.click(
+    await userEvent.click(screen.getByTestId('pagination-button-1'));
+    await userEvent.click(
       within(screen.getByTestId('level-0-group-0')).getByTestId('group-panel-toggle')
     );
 
-    userEvent.click(
+    await userEvent.click(
       within(screen.getByTestId('level-0-group-0')).getByTestId('pagination-button-1')
     );
-    userEvent.click(
+    await userEvent.click(
       within(screen.getByTestId('level-1-group-0')).getByTestId('group-panel-toggle')
     );
 
-    userEvent.click(
+    await userEvent.click(
       within(screen.getByTestId('level-1-group-0')).getByTestId('pagination-button-1')
     );
 
@@ -242,9 +242,9 @@ describe('AlertsGrouping', () => {
       ).toEqual('true');
     });
 
-    userEvent.click(screen.getAllByTestId('group-selector-dropdown')[0]);
+    await userEvent.click(screen.getAllByTestId('group-selector-dropdown')[0]);
     // Wait for element to have pointer events enabled
-    await waitFor(() => userEvent.click(screen.getAllByTestId('panel-user.name')[0]));
+    await userEvent.click(screen.getAllByTestId('panel-user.name')[0]);
 
     [
       screen.getByTestId('grouping-level-0-pagination'),
@@ -260,7 +260,7 @@ describe('AlertsGrouping', () => {
     });
   });
 
-  it('resets all levels pagination when global query updates', () => {
+  it('resets all levels pagination when global query updates', async () => {
     mockUseAlertsGroupingState.mockReturnValue({
       ...mockAlertsGroupingState,
       grouping: {
@@ -275,17 +275,17 @@ describe('AlertsGrouping', () => {
       </TestProviders>
     );
 
-    userEvent.click(screen.getByTestId('pagination-button-1'));
-    userEvent.click(
+    await userEvent.click(screen.getByTestId('pagination-button-1'));
+    await userEvent.click(
       within(screen.getByTestId('level-0-group-0')).getByTestId('group-panel-toggle')
     );
-    userEvent.click(
+    await userEvent.click(
       within(screen.getByTestId('level-0-group-0')).getByTestId('pagination-button-1')
     );
-    userEvent.click(
+    await userEvent.click(
       within(screen.getByTestId('level-1-group-0')).getByTestId('group-panel-toggle')
     );
-    userEvent.click(
+    await userEvent.click(
       within(screen.getByTestId('level-1-group-0')).getByTestId('pagination-button-1')
     );
 
@@ -313,7 +313,7 @@ describe('AlertsGrouping', () => {
     });
   });
 
-  it('resets only most inner group pagination when its parent groups open/close', () => {
+  it('resets only most inner group pagination when its parent groups open/close', async () => {
     mockUseAlertsGroupingState.mockReturnValue({
       ...mockAlertsGroupingState,
       grouping: {
@@ -329,31 +329,31 @@ describe('AlertsGrouping', () => {
     );
 
     // set level 0 page to 2
-    userEvent.click(screen.getByTestId('pagination-button-1'));
-    userEvent.click(
+    await userEvent.click(screen.getByTestId('pagination-button-1'));
+    await userEvent.click(
       within(screen.getByTestId('level-0-group-0')).getByTestId('group-panel-toggle')
     );
 
     // set level 1 page to 2
-    userEvent.click(
+    await userEvent.click(
       within(screen.getByTestId('level-0-group-0')).getByTestId('pagination-button-1')
     );
-    userEvent.click(
+    await userEvent.click(
       within(screen.getByTestId('level-1-group-0')).getByTestId('group-panel-toggle')
     );
 
     // set level 2 page to 2
-    userEvent.click(
+    await userEvent.click(
       within(screen.getByTestId('level-1-group-0')).getByTestId('pagination-button-1')
     );
-    userEvent.click(
+    await userEvent.click(
       within(screen.getByTestId('level-2-group-0')).getByTestId('group-panel-toggle')
     );
 
     // open different level 1 group
 
     // level 0, 1 pagination is the same
-    userEvent.click(
+    await userEvent.click(
       within(screen.getByTestId('level-1-group-1')).getByTestId('group-panel-toggle')
     );
     [
@@ -396,26 +396,26 @@ describe('AlertsGrouping', () => {
       </TestProviders>
     );
 
-    userEvent.click(await screen.findByTestId('pagination-button-1'));
-    userEvent.click(
+    await userEvent.click(await screen.findByTestId('pagination-button-1'));
+    await userEvent.click(
       within(await screen.findByTestId('level-0-group-0')).getByTestId('group-panel-toggle')
     );
-    userEvent.click(
+    await userEvent.click(
       within(await screen.findByTestId('level-0-group-0')).getByTestId('pagination-button-1')
     );
-    userEvent.click(
+    await userEvent.click(
       within(await screen.findByTestId('level-1-group-0')).getByTestId('group-panel-toggle')
     );
 
-    userEvent.click(
+    await userEvent.click(
       within(await screen.findByTestId('level-1-group-0')).getByTestId('pagination-button-1')
     );
-    userEvent.click(
+    await userEvent.click(
       within(await screen.findByTestId('grouping-level-2')).getByTestId(
         'tablePaginationPopoverButton'
       )
     );
-    userEvent.click(await screen.findByTestId('tablePagination-100-rows'));
+    await userEvent.click(await screen.findByTestId('tablePagination-100-rows'));
 
     [
       await screen.findByTestId('grouping-level-0-pagination'),
@@ -453,24 +453,24 @@ describe('AlertsGrouping', () => {
       </TestProviders>
     );
 
-    userEvent.click(screen.getByTestId('pagination-button-1'));
-    userEvent.click(
+    await userEvent.click(screen.getByTestId('pagination-button-1'));
+    await userEvent.click(
       within(await screen.findByTestId('level-0-group-0')).getByTestId('group-panel-toggle')
     );
 
-    userEvent.click(
+    await userEvent.click(
       within(await screen.findByTestId('level-0-group-0')).getByTestId('pagination-button-1')
     );
-    userEvent.click(
+    await userEvent.click(
       within(await screen.findByTestId('level-1-group-0')).getByTestId('group-panel-toggle')
     );
 
-    userEvent.click(
+    await userEvent.click(
       within(await screen.findByTestId('level-1-group-0')).getByTestId('pagination-button-1')
     );
     const tablePaginations = await screen.findAllByTestId('tablePaginationPopoverButton');
-    userEvent.click(tablePaginations[tablePaginations.length - 1]);
-    await waitFor(() => userEvent.click(screen.getByTestId('tablePagination-100-rows')));
+    await userEvent.click(tablePaginations[tablePaginations.length - 1]);
+    await userEvent.click(screen.getByTestId('tablePagination-100-rows'));
 
     [
       screen.getByTestId('grouping-level-0-pagination'),