Bump @testing-library

package.json

@@ -512,11 +512,11 @@
     "@storybook/react": "^6.3.12",
     "@storybook/testing-react": "^0.0.22",
     "@storybook/theming": "^6.3.12",
-    "@testing-library/dom": "^7.30.3",
-    "@testing-library/jest-dom": "^5.11.10",
-    "@testing-library/react": "^11.2.6",
-    "@testing-library/react-hooks": "^5.1.1",
-    "@testing-library/user-event": "^13.1.1",
+    "@testing-library/dom": "^8.12.0",
+    "@testing-library/jest-dom": "^5.16.3",
+    "@testing-library/react": "^12.1.4",
+    "@testing-library/react-hooks": "^7.0.2",
+    "@testing-library/user-event": "^13.5.0",
     "@types/apidoc": "^0.22.3",
     "@types/archiver": "^5.1.0",
     "@types/babel__core": "^7.1.19",
@@ -714,8 +714,7 @@
     "@types/tar": "^4.0.5",
     "@types/tar-fs": "^1.16.1",
     "@types/tempy": "^0.2.0",
-    "@types/testing-library__jest-dom": "^5.9.5",
-    "@types/testing-library__react-hooks": "^4.0.0",
+    "@types/testing-library__jest-dom": "^5.14.3",
     "@types/tinycolor2": "^1.4.1",
     "@types/tough-cookie": "^4.0.1",
     "@types/type-detect": "^4.0.1",
@@ -874,6 +873,7 @@
     "postcss-loader": "^3.0.0",
     "postcss-prefix-selector": "^1.7.2",
     "prettier": "^2.6.1",
+    "pretty-format": "^27.5.1",
     "q": "^1.5.1",
     "react-test-renderer": "^16.12.0",
     "read-pkg": "^5.2.0",

packages/kbn-i18n-react/src/provider.tsx

@@ -6,8 +6,7 @@
  * Side Public License, v 1.
  */
 
-import * as PropTypes from 'prop-types';
-import * as React from 'react';
+import React from 'react';
 
 // eslint-disable-next-line @kbn/eslint/module_migration
 import { IntlProvider } from 'react-intl';
@@ -20,20 +19,15 @@ import { PseudoLocaleWrapper } from './pseudo_locale_wrapper';
  * of components. This component is used to setup the i18n context for a tree.
  * IntlProvider should wrap react app's root component (inside each react render method).
  */
-export class I18nProvider extends React.PureComponent {
-  public static propTypes = { children: PropTypes.element.isRequired };
 
-  public render() {
-    return (
-      <IntlProvider
-        locale={i18n.getLocale()}
-        messages={i18n.getTranslation().messages}
-        defaultLocale={i18n.getDefaultLocale()}
-        formats={i18n.getFormats()}
-        textComponent={React.Fragment}
-      >
-        <PseudoLocaleWrapper>{this.props.children}</PseudoLocaleWrapper>
-      </IntlProvider>
-    );
-  }
-}
+export const I18nProvider: React.FC = ({ children }) => (
+  <IntlProvider
+    locale={i18n.getLocale()}
+    messages={i18n.getTranslation().messages}
+    defaultLocale={i18n.getDefaultLocale()}
+    formats={i18n.getFormats()}
+    textComponent={React.Fragment}
+  >
+    <PseudoLocaleWrapper>{children}</PseudoLocaleWrapper>
+  </IntlProvider>
+);

packages/kbn-securitysolution-list-hooks/BUILD.bazel

@@ -49,7 +49,6 @@ TYPES_DEPS = [
   "@npm//@types/jest",
   "@npm//@types/node",
   "@npm//@types/react",
-  "@npm//@types/testing-library__react-hooks",
   "@npm//fp-ts",
   "@npm//tslib",
 ]

renovate.json

@@ -141,6 +141,21 @@
       "matchBaseBranches": ["main"],
       "labels": ["Team:Operations", "release_note:skip"],
       "enabled": true
+    },
+    {
+      "groupName": "@testing-library",
+      "packageNames": [
+        "@testing-library/dom",
+        "@testing-library/jest-dom",
+        "@testing-library/react",
+        "@testing-library/react-hooks",
+        "@testing-library/user-event",
+        "@types/testing-library__jest-dom"
+      ],
+      "reviewers": ["team:kibana-operations"],
+      "matchBaseBranches": ["main"],
+      "labels": ["Team:Operations", "release_note:skip"],
+      "enabled": true
     }
   ]
 }

x-pack/plugins/cases/public/common/mock/test_providers.tsx

@@ -84,7 +84,7 @@ export const createAppMockRenderer = ({
   AppWrapper.displayName = 'AppWrapper';
   const render: UiRender = (ui, options) => {
     return reactRender(ui, {
-      wrapper: AppWrapper as React.ComponentType,
+      wrapper: AppWrapper,
       ...options,
     });
   };

x-pack/plugins/observability/public/components/shared/exploratory_view/rtl_helpers.tsx

@@ -12,7 +12,6 @@ import { stringify } from 'query-string';
 import {
   render as reactTestLibRender,
   RenderOptions,
-  Nullish,
   MatcherFunction,
 } from '@testing-library/react';
 import { Route, Router } from 'react-router-dom';
@@ -167,7 +166,7 @@ export function MockKibanaProvider<ExtraCore extends Partial<CoreStart>>({
   );
 }
 
-export function MockRouter<ExtraCore>({
+export function MockRouter<ExtraCore extends Partial<CoreStart>>({
   children,
   core,
   history = createMemoryHistory(),
@@ -385,7 +384,7 @@ export const mockDataView = createStubDataView({
 export const forNearestButton =
   (getByText: (f: MatcherFunction) => HTMLElement | null) =>
   (text: string): HTMLElement | null =>
-    getByText((_content: string, node: Nullish<Element>) => {
+    getByText((_content: string, node: Element | null) => {
       if (!node) return false;
       const noOtherButtonHasText = Array.from(node.children).every(
         (child) => child && (child.textContent !== text || child.tagName.toLowerCase() !== 'button')

x-pack/plugins/security_solution/public/common/components/drag_and_drop/draggable_wrapper.test.tsx

@@ -100,9 +100,6 @@ describe('DraggableWrapper', () => {
 
       await waitFor(() => {
         wrapper.find('[data-test-subj="withHoverActionsButton"]').simulate('mouseenter');
-        wrapper.update();
-        jest.runAllTimers();
-        wrapper.update();
         expect(wrapper.find('[data-test-subj="hover-actions-copy-button"]').exists()).toBe(true);
       });
     });

x-pack/plugins/security_solution/public/common/mock/endpoint/app_context_render.tsx

@@ -143,7 +143,7 @@ export const createAppRootMockRenderer = (): AppContextTestRender => {
 
   const render: UiRender = (ui, options) => {
     return reactRender(ui, {
-      wrapper: AppWrapper as React.ComponentType,
+      wrapper: AppWrapper,
       ...options,
     });
   };

x-pack/plugins/security_solution/public/timelines/components/timeline/properties/helpers.test.tsx

@@ -7,6 +7,7 @@
 
 import React from 'react';
 import { mount } from 'enzyme';
+import { waitFor } from '@testing-library/react';
 
 import { AddToFavoritesButton, NewTimeline, NewTimelineProps } from './helpers';
 import { useCreateTimelineButton } from './use_create_timeline';
@@ -124,9 +125,10 @@ describe('Favorite Button', () => {
         </TestProviders>
       );
 
-      wrapper.simulate('click');
-
-      expect(spy).toHaveBeenCalled();
+      waitFor(() => {
+        wrapper.simulate('click');
+        expect(spy).toHaveBeenCalled();
+      });
     });
 
     test('should disable favorite button with filled star', () => {

x-pack/plugins/session_view/public/test/index.tsx

@@ -123,7 +123,7 @@ export const createAppRootMockRenderer = (): AppContextTestRender => {
 
   const render: UiRender = (ui, options = {}) => {
     return reactRender(ui, {
-      wrapper: AppWrapper as React.ComponentType,
+      wrapper: AppWrapper,
       ...options,
     });
   };

x-pack/plugins/uptime/public/components/common/monitor_tags.test.tsx

@@ -162,7 +162,8 @@ describe('MonitorTags component', () => {
 
   it('expand tag show tags on click', () => {
     summaryPing.state.summaryPings[0].tags = ['red', 'green', 'blue', 'black', 'purple', 'yellow'];
-    render(<MonitorTags ping={summaryPing.state.summaryPings[0]} />, { wrapper: MemoryRouter });
+    const Wrapper: React.FC = ({ children }) => <MemoryRouter>{children}</MemoryRouter>;
+    render(<MonitorTags ping={summaryPing.state.summaryPings[0]} />, { wrapper: Wrapper });
 
     fireEvent.click(screen.getByText('+1'));
 

x-pack/plugins/uptime/public/lib/helper/rtl_helpers.tsx

@@ -12,7 +12,6 @@ import {
   render as reactTestLibRender,
   MatcherFunction,
   RenderOptions,
-  Nullish,
 } from '@testing-library/react';
 import { Router, Route } from 'react-router-dom';
 import { merge } from 'lodash';
@@ -289,7 +288,7 @@ const forNearestTag =
   (tag: string) =>
   (getByText: (f: MatcherFunction) => HTMLElement | null) =>
   (text: string): HTMLElement | null =>
-    getByText((_content: string, node: Nullish<Element>) => {
+    getByText((_content: string, node: Element | null) => {
       if (!node) return false;
       const noOtherButtonHasText = Array.from(node.children).every(
         (child) => child && (child.textContent !== text || child.tagName.toLowerCase() !== tag)
@@ -345,7 +344,7 @@ const finderWithClassWrapper =
     customAttribute?: keyof Element | keyof HTMLElement
   ) =>
   (text: string): HTMLElement | null =>
-    getterFn((_content: string, node: Nullish<Element>) => {
+    getterFn((_content: string, node: Element | null) => {
       if (!node) return false;
       // There are actually properties that are not in Element but which
       // appear on the `node`, so we must cast the customAttribute as a keyof Element