[Dependencies]: upgrade react to latest v16.12.0

package.json

@@ -79,13 +79,15 @@
   },
   "resolutions": {
     "**/@types/node": "10.12.27",
-    "**/@types/react": "16.8.3",
+    "**/@types/react": "^16.9.13",
     "**/@types/hapi": "^17.0.18",
     "**/@types/angular": "^1.6.56",
     "**/typescript": "3.7.2",
     "**/graphql-toolkit/lodash": "^4.17.13",
     "**/isomorphic-git/**/base64-js": "^1.2.1",
     "**/image-diff/gm/debug": "^2.6.9",
+    "**/react-dom": "^16.12.0",
+    "**/react-test-renderer": "^16.12.0",
     "**/deepmerge": "^4.2.2"
   },
   "workspaces": {
@@ -214,12 +216,11 @@
     "pug": "^2.0.3",
     "querystring-browser": "1.0.4",
     "raw-loader": "3.1.0",
-    "react": "^16.8.0",
+    "react": "^16.12.0",
     "react-addons-shallow-compare": "15.6.2",
     "react-color": "^2.13.8",
-    "react-dom": "^16.8.0",
+    "react-dom": "^16.12.0",
     "react-grid-layout": "^0.16.2",
-    "react-hooks-testing-library": "^0.5.0",
     "react-input-range": "^1.3.0",
     "react-markdown": "^3.4.1",
     "react-redux": "^5.1.1",
@@ -285,6 +286,8 @@
     "@microsoft/api-documenter": "7.4.3",
     "@microsoft/api-extractor": "7.4.2",
     "@percy/agent": "^0.11.0",
+    "@testing-library/react": "^9.3.2",
+    "@testing-library/react-hooks": "^3.2.1",
     "@types/angular": "^1.6.56",
     "@types/angular-mocks": "^1.7.0",
     "@types/babel__core": "^7.1.2",
@@ -310,7 +313,7 @@
     "@types/has-ansi": "^3.0.0",
     "@types/history": "^4.7.3",
     "@types/hoek": "^4.1.3",
-    "@types/jest": "^24.0.18",
+    "@types/jest": "24.0.19",
     "@types/joi": "^13.4.2",
     "@types/jquery": "^3.3.31",
     "@types/js-yaml": "^3.11.1",
@@ -330,8 +333,8 @@
     "@types/podium": "^1.0.0",
     "@types/prop-types": "^15.5.3",
     "@types/reach__router": "^1.2.6",
-    "@types/react": "^16.8.0",
-    "@types/react-dom": "^16.8.0",
+    "@types/react": "^16.9.11",
+    "@types/react-dom": "^16.9.4",
     "@types/react-redux": "^6.0.6",
     "@types/react-router-dom": "^4.3.1",
     "@types/react-virtualized": "^9.18.7",
@@ -345,6 +348,8 @@
     "@types/styled-components": "^4.4.0",
     "@types/supertest": "^2.0.5",
     "@types/supertest-as-promised": "^2.0.38",
+    "@types/testing-library__react": "^9.1.2",
+    "@types/testing-library__react-hooks": "^3.1.0",
     "@types/type-detect": "^4.0.1",
     "@types/uuid": "^3.4.4",
     "@types/vinyl-fs": "^2.4.11",
@@ -408,7 +413,6 @@
     "istanbul-instrumenter-loader": "3.0.1",
     "jest": "^24.9.0",
     "jest-cli": "^24.9.0",
-    "jest-dom": "^3.5.0",
     "jest-raw-loader": "^1.0.1",
     "jimp": "0.8.4",
     "json5": "^1.0.1",

packages/eslint-config-kibana/jest.js

@@ -16,7 +16,7 @@ module.exports = {
       rules: {
         'jest/no-focused-tests': 'error',
         'jest/no-identical-title': 'error',
-        'import/order': 'off'
+        'import/order': 'off',
       },
     }
   ]

packages/kbn-i18n/package.json

@@ -28,7 +28,7 @@
     "intl-messageformat": "^2.2.0",
     "intl-relativeformat": "^2.1.0",
     "prop-types": "^15.6.2",
-    "react": "^16.8.0",
+    "react": "^16.12.0",
     "react-intl": "^2.8.0"
   }
 }

packages/kbn-ui-framework/package.json

@@ -19,7 +19,7 @@
     "focus-trap-react": "^3.1.1",
     "lodash": "npm:@elastic/lodash@3.10.1-kibana3",
     "prop-types": "15.6.0",
-    "react": "^16.8.0",
+    "react": "^16.12.0",
     "react-ace": "^5.9.0",
     "react-color": "^2.13.8",
     "tabbable": "1.1.3",
@@ -57,7 +57,7 @@
     "postcss": "^7.0.5",
     "postcss-loader": "^3.0.0",
     "raw-loader": "^3.1.0",
-    "react-dom": "^16.8.0",
+    "react-dom": "^16.12.0",
     "react-redux": "^5.0.6",
     "react-router": "^3.2.0",
     "react-router-redux": "^4.0.8",

src/legacy/core_plugins/kibana/public/discover/doc/doc.test.tsx

@@ -45,16 +45,6 @@ beforeEach(() => {
   jest.clearAllMocks();
 });
 
-// Suppress warnings about "act" until we use React 16.9
-/* eslint-disable no-console */
-const originalError = console.error;
-beforeAll(() => {
-  console.error = jest.fn();
-});
-afterAll(() => {
-  console.error = originalError;
-});
-
 export const waitForPromises = () => new Promise(resolve => setTimeout(resolve, 0));
 
 /**

src/legacy/core_plugins/kibana/public/discover/doc/use_es_doc_search.test.tsx

@@ -16,20 +16,10 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { renderHook, act } from 'react-hooks-testing-library';
+import { renderHook, act } from '@testing-library/react-hooks';
 import { buildSearchBody, useEsDocSearch, ElasticRequestState } from './use_es_doc_search';
 import { DocProps } from './doc';
 
-// Suppress warnings about "act" until we use React 16.9
-/* eslint-disable no-console */
-const originalError = console.error;
-beforeAll(() => {
-  console.error = jest.fn();
-});
-afterAll(() => {
-  console.error = originalError;
-});
-
 describe('Test of <Doc /> helper / hook', () => {
   test('buildSearchBody', () => {
     const indexPattern = {

src/plugins/eui_utils/public/eui_utils.test.tsx

@@ -18,7 +18,7 @@
  */
 
 import { BehaviorSubject } from 'rxjs';
-import { renderHook, act } from 'react-hooks-testing-library';
+import { renderHook, act } from '@testing-library/react-hooks';
 
 import { EUI_CHARTS_THEME_DARK, EUI_CHARTS_THEME_LIGHT } from '@elastic/eui/dist/eui_charts_theme';
 import { EuiUtils } from './eui_utils';

src/plugins/kibana_react/public/util/use_observable.test.tsx

@@ -17,7 +17,7 @@
  * under the License.
  */
 
-import { renderHook, act } from 'react-hooks-testing-library';
+import { renderHook, act } from '@testing-library/react-hooks';
 import { Subject } from 'rxjs';
 import { useObservable } from './use_observable';
 

test/interpreter_functional/plugins/kbn_tp_run_pipeline/package.json

@@ -8,7 +8,7 @@
   "license": "Apache-2.0",
   "dependencies": {
     "@elastic/eui": "16.0.0",
-    "react": "^16.8.0",
-    "react-dom": "^16.8.0"
+    "react": "^16.12.0",
+    "react-dom": "^16.12.0"
   }
 }

test/plugin_functional/plugins/kbn_tp_custom_visualizations/package.json

@@ -8,6 +8,6 @@
   "license": "Apache-2.0",
   "dependencies": {
     "@elastic/eui": "16.0.0",
-    "react": "^16.8.0"
+    "react": "^16.12.0"
   }
 }

test/plugin_functional/plugins/kbn_tp_embeddable_explorer/package.json

@@ -9,7 +9,7 @@
   "license": "Apache-2.0",
   "dependencies": {
     "@elastic/eui": "16.0.0",
-    "react": "^16.8.0"
+    "react": "^16.12.0"
   },
   "scripts": {
     "kbn": "node ../../../../scripts/kbn.js",

test/plugin_functional/plugins/kbn_tp_sample_panel_action/package.json

@@ -9,7 +9,7 @@
   "license": "Apache-2.0",
   "dependencies": {
     "@elastic/eui": "16.0.0",
-    "react": "^16.8.0"
+    "react": "^16.12.0"
   },
   "scripts": {
     "kbn": "node ../../../../scripts/kbn.js",

x-pack/dev-tools/jest/setup/setup_test.js

@@ -10,3 +10,4 @@
 */
 
 import 'jest-styled-components';
+import '@testing-library/jest-dom/extend-expect';

x-pack/legacy/plugins/apm/public/components/app/ServiceOverview/__test__/ServiceOverview.test.tsx

@@ -5,8 +5,7 @@
  */
 
 import React from 'react';
-import { render, wait, waitForElement } from 'react-testing-library';
-import 'react-testing-library/cleanup-after-each';
+import { render, wait, waitForElement } from '@testing-library/react';
 import { ServiceOverview } from '..';
 import * as urlParamsHooks from '../../../../hooks/useUrlParams';
 import * as kibanaCore from '../../../../../../observability/public/context/kibana_core';
@@ -61,16 +60,6 @@ describe('Service Overview -> View', () => {
     jest.resetAllMocks();
   });
 
-  // Suppress warnings about "act" until async/await syntax is supported: https://github.com/facebook/react/issues/14769
-  /* eslint-disable no-console */
-  const originalError = console.error;
-  beforeAll(() => {
-    console.error = jest.fn();
-  });
-  afterAll(() => {
-    console.error = originalError;
-  });
-
   it('should render services, when list is not empty', async () => {
     // mock rest requests
     coreMock.http.get.mockResolvedValueOnce({

x-pack/legacy/plugins/apm/public/components/app/TransactionOverview/__jest__/TransactionOverview.test.tsx

@@ -8,12 +8,11 @@ import React from 'react';
 import {
   queryByLabelText,
   render,
-  queryBySelectText,
   getByText,
   getByDisplayValue,
   queryByDisplayValue,
   fireEvent
-} from 'react-testing-library';
+} from '@testing-library/react';
 import { omit } from 'lodash';
 import { history } from '../../../../utils/history';
 import { TransactionOverview } from '..';
@@ -32,16 +31,6 @@ const coreMock = ({
   notifications: { toasts: { addWarning: () => {} } }
 } as unknown) as LegacyCoreStart;
 
-// Suppress warnings about "act" until async/await syntax is supported: https://github.com/facebook/react/issues/14769
-/* eslint-disable no-console */
-const originalError = console.error;
-beforeAll(() => {
-  console.error = jest.fn();
-});
-afterAll(() => {
-  console.error = originalError;
-});
-
 function setup({
   urlParams,
   serviceTransactionTypes
@@ -107,8 +96,8 @@ describe('TransactionOverview', () => {
       });
 
       // secondType is selected in the dropdown
-      expect(queryBySelectText(container, 'secondType')).not.toBeNull();
-      expect(queryBySelectText(container, 'firstType')).toBeNull();
+      expect(queryByDisplayValue(container, 'secondType')).not.toBeNull();
+      expect(queryByDisplayValue(container, 'firstType')).toBeNull();
 
       expect(getByText(container, 'firstType')).not.toBeNull();
     });

x-pack/legacy/plugins/apm/public/components/shared/KeyValueTable/__test__/KeyValueTable.test.tsx

@@ -6,7 +6,7 @@
 
 import React from 'react';
 import { KeyValueTable } from '..';
-import { cleanup, render } from 'react-testing-library';
+import { render } from '@testing-library/react';
 
 function getKeys(output: ReturnType<typeof render>) {
   const keys = output.getAllByTestId('dot-key');
@@ -19,8 +19,6 @@ function getValues(output: ReturnType<typeof render>) {
 }
 
 describe('KeyValueTable', () => {
-  afterEach(cleanup);
-
   it('displays key and value table', () => {
     const data = [
       { key: 'name.first', value: 'First Name' },

x-pack/legacy/plugins/apm/public/components/shared/ManagedTable/__test__/ManagedTable.test.js

@@ -6,7 +6,7 @@
 
 import { shallow } from 'enzyme';
 import React from 'react';
-import { ManagedTable } from '..';
+import { UnoptimizedManagedTable } from '..';
 
 describe('ManagedTable component', () => {
   let people;
@@ -31,14 +31,14 @@ describe('ManagedTable component', () => {
 
   it('should render a page-full of items, with defaults', () => {
     expect(
-      shallow(<ManagedTable columns={columns} items={people} />)
+      shallow(<UnoptimizedManagedTable columns={columns} items={people} />)
     ).toMatchSnapshot();
   });
 
   it('should render when specifying initial values', () => {
     expect(
       shallow(
-        <ManagedTable
+        <UnoptimizedManagedTable
           columns={columns}
           items={people}
           initialSortField="age"

x-pack/legacy/plugins/apm/public/components/shared/ManagedTable/index.tsx

@@ -119,4 +119,4 @@ const ManagedTable = React.memo(
   UnoptimizedManagedTable
 ) as typeof UnoptimizedManagedTable;
 
-export { ManagedTable };
+export { ManagedTable, UnoptimizedManagedTable };

x-pack/legacy/plugins/apm/public/components/shared/MetadataTable/ErrorMetadata/__test__/ErrorMetadata.test.tsx

@@ -6,9 +6,8 @@
 
 import React from 'react';
 import { ErrorMetadata } from '..';
-import { render, cleanup } from 'react-testing-library';
+import { render } from '@testing-library/react';
 import { APMError } from '../../../../../../typings/es_schemas/ui/APMError';
-import 'jest-dom/extend-expect';
 import {
   expectTextsInDocument,
   expectTextsNotInDocument
@@ -37,8 +36,6 @@ function getError() {
 }
 
 describe('ErrorMetadata', () => {
-  afterEach(cleanup);
-
   it('should render a error with all sections', () => {
     const error = getError();
     const output = render(<ErrorMetadata error={error} />);

x-pack/legacy/plugins/apm/public/components/shared/MetadataTable/SpanMetadata/__test__/SpanMetadata.test.tsx

@@ -5,8 +5,7 @@
  */
 
 import React from 'react';
-import 'jest-dom/extend-expect';
-import { render, cleanup } from 'react-testing-library';
+import { render } from '@testing-library/react';
 import { SpanMetadata } from '..';
 import { Span } from '../../../../../../typings/es_schemas/ui/Span';
 import {
@@ -15,7 +14,6 @@ import {
 } from '../../../../../utils/testHelpers';
 
 describe('SpanMetadata', () => {
-  afterEach(cleanup);
   describe('render', () => {
     it('renders', () => {
       const span = ({

x-pack/legacy/plugins/apm/public/components/shared/MetadataTable/TransactionMetadata/__test__/TransactionMetadata.test.tsx

@@ -6,9 +6,8 @@
 
 import React from 'react';
 import { TransactionMetadata } from '..';
-import { render, cleanup } from 'react-testing-library';
+import { render } from '@testing-library/react';
 import { Transaction } from '../../../../../../typings/es_schemas/ui/Transaction';
-import 'jest-dom/extend-expect';
 import {
   expectTextsInDocument,
   expectTextsNotInDocument
@@ -37,8 +36,6 @@ function getTransaction() {
 }
 
 describe('TransactionMetadata', () => {
-  afterEach(cleanup);
-
   it('should render a transaction with all sections', () => {
     const transaction = getTransaction();
     const output = render(<TransactionMetadata transaction={transaction} />);