[Dependencies]: upgrade react to latest v16.12.0 (#51145)

package.json

@@ -79,17 +79,16 @@
   },
   "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",
-    "**/deepmerge": "^4.2.2",
+    "**/react-dom": "^16.12.0",
-    "**/react": "16.8.6",
+    "**/react-test-renderer": "^16.12.0",
-    "**/react-dom": "16.8.6",
+    "**/deepmerge": "^4.2.2"
-    "**/react-test-renderer": "16.8.6"
   },
   "workspaces": {
     "packages": [
@@ -216,15 +215,13 @@
     "pug": "^2.0.3",
     "querystring-browser": "1.0.4",
     "raw-loader": "3.1.0",
-    "react": "^16.8.6",
+    "react": "^16.12.0",
-    "react-addons-shallow-compare": "15.6.2",
     "react-color": "^2.13.8",
-    "react-dom": "^16.8.6",
+    "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",
+    "react-redux": "^5.1.2",
     "react-router-dom": "^4.3.1",
     "react-sizeme": "^2.3.6",
     "reactcss": "1.2.3",
@@ -287,6 +284,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",
@@ -312,7 +311,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",
@@ -332,8 +331,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": "^16.9.11",
-    "@types/react-dom": "^16.8.0",
+    "@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",
@@ -347,6 +346,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",
@@ -410,7 +411,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/javascript.js

@@ -40,7 +40,7 @@ module.exports = {
 
       rules: {
         'block-scoped-var': 'error',
-        camelcase: [ 'error', { properties: 'never' } ],
+        camelcase: [ 'error', { properties: 'never', allow: ['^UNSAFE_'] } ],
         'comma-dangle': 'off',
         'comma-spacing': ['error', { before: false, after: true }],
         'comma-style': [ 'error', 'last' ],

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/eslint-config-kibana/typescript.js

@@ -94,7 +94,7 @@ module.exports = {
           '@typescript-eslint/camelcase': ['error', {
             'properties': 'never',
             'ignoreDestructuring': true,
-            'allow': ['^[A-Z0-9_]+$']
+            'allow': ['^[A-Z0-9_]+$', '^UNSAFE_']
           }],
           '@typescript-eslint/class-name-casing': 'error',
           '@typescript-eslint/explicit-member-accessibility': ['error',

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.6",
+    "react": "^16.12.0",
     "react-intl": "^2.8.0"
   }
 }

packages/kbn-ui-framework/doc_site/src/components/guide_nav/guide_nav.js

@@ -47,7 +47,7 @@ export class GuideNav extends Component {
     });
   }
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     const currentRoute = nextProps.routes[1];
     const nextRoute = this.props.getNextRoute(currentRoute.name);
     const previousRoute = this.props.getPreviousRoute(currentRoute.name);

packages/kbn-ui-framework/doc_site/src/components/guide_sandbox/guide_sandbox.js

@@ -49,7 +49,7 @@ function mapDispatchToProps(dispatch) {
 }
 
 class GuideSandboxComponent extends Component {
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     this.props.openSandbox();
   }
 

packages/kbn-ui-framework/doc_site/src/components/guide_section/guide_section.js

@@ -36,7 +36,7 @@ export class GuideSection extends Component {
     this.props.openCodeViewer(this.props.source, this.props.title);
   }
 
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     this.props.registerSection(this.getId(), this.props.title);
   }
 

packages/kbn-ui-framework/doc_site/src/views/app_view.js

@@ -81,7 +81,7 @@ export class AppView extends Component {
     });
   }
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     // Only force the chrome to be hidden if we're navigating from a non-sandbox to a sandbox.
     if (!this.props.isSandbox && nextProps.isSandbox) {
       this.setState({

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.6",
+    "react": "^16.12.0",
     "react-ace": "^5.9.0",
     "react-color": "^2.13.8",
     "tabbable": "1.1.3",
@@ -57,8 +57,8 @@
     "postcss": "^7.0.5",
     "postcss-loader": "^3.0.0",
     "raw-loader": "^3.1.0",
-    "react-dom": "^16.8.6",
+    "react-dom": "^16.12.0",
-    "react-redux": "^5.0.6",
+    "react-redux": "^5.1.2",
     "react-router": "^3.2.0",
     "react-router-redux": "^4.0.8",
     "redux": "3.7.2",

src/legacy/core_plugins/input_control_vis/public/components/editor/field_select.js

@@ -49,7 +49,7 @@ class FieldSelectUi extends Component {
     this.loadFields(this.state.indexPatternId);
   }
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     if (this.props.indexPatternId !== nextProps.indexPatternId) {
       this.loadFields(nextProps.indexPatternId);
     }

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/legacy/core_plugins/kibana/public/home/components/tutorial/tutorial.js

@@ -67,7 +67,7 @@ class TutorialUi extends React.Component {
     }
   }
 
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     this._isMounted = true;
   }
 

src/legacy/core_plugins/kibana/public/management/sections/index_patterns/create_index_pattern_wizard/components/step_index_pattern/components/indices_list/indices_list.js

@@ -61,7 +61,7 @@ export class IndicesList extends Component {
     this.pager = new Pager(props.indices.length, this.state.perPage, this.state.page);
   }
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     if (nextProps.indices.length !== this.props.indices.length) {
       this.pager.setTotalItems(nextProps.indices.length);
       this.resetPageTo0();

src/legacy/core_plugins/kibana/public/management/sections/index_patterns/create_index_pattern_wizard/components/step_index_pattern/step_index_pattern.js

@@ -75,7 +75,7 @@ export class StepIndexPattern extends Component {
     this.lastQuery = null;
   }
 
-  async componentWillMount() {
+  async UNSAFE_componentWillMount() {
     this.fetchExistingIndexPatterns();
     if (this.state.query) {
       this.lastQuery = this.state.query;

src/legacy/core_plugins/kibana/public/management/sections/index_patterns/create_index_pattern_wizard/create_index_pattern_wizard.js

@@ -65,7 +65,7 @@ export class CreateIndexPatternWizard extends Component {
     };
   }
 
-  async componentWillMount() {
+  async UNSAFE_componentWillMount() {
     this.fetchData();
   }
 

src/legacy/core_plugins/kibana/public/management/sections/index_patterns/edit_index_pattern/indexed_fields_table/indexed_fields_table.js

@@ -47,7 +47,7 @@ export class IndexedFieldsTable extends Component {
     };
   }
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     if (nextProps.fields !== this.props.fields) {
       this.setState({
         fields: this.mapFields(nextProps.fields)

src/legacy/core_plugins/kibana/public/management/sections/index_patterns/edit_index_pattern/scripted_fields_table/scripted_fields_table.js

@@ -59,7 +59,7 @@ export class ScriptedFieldsTable extends Component {
     };
   }
 
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     this.fetchFields();
   }
 

src/legacy/core_plugins/kibana/public/management/sections/index_patterns/edit_index_pattern/source_filters_table/source_filters_table.js

@@ -58,7 +58,7 @@ export class SourceFiltersTable extends Component {
     };
   }
 
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     this.updateFilters();
   }
 

src/legacy/core_plugins/kibana/public/management/sections/objects/components/objects_table/components/relationships/relationships.js

@@ -58,11 +58,11 @@ export class Relationships extends Component {
     };
   }
 
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     this.getRelationshipData();
   }
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     if (nextProps.savedObject.id !== this.props.savedObject.id) {
       this.getRelationshipData();
     }

src/legacy/core_plugins/kibana/public/management/sections/settings/advanced_settings.js

@@ -81,7 +81,7 @@ export class AdvancedSettings extends Component {
     }, {});
   }
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     const { config } = nextProps;
     const { query } = this.state;
 

src/legacy/core_plugins/kibana/public/management/sections/settings/components/field/field.js

@@ -76,7 +76,7 @@ export class Field extends PureComponent {
     this.changeImageForm = null;
   }
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     const { unsavedValue } = this.state;
     const { type, value, defVal } = nextProps.setting;
     const editableValue = this.getEditableValue(type, value, defVal);

src/legacy/core_plugins/telemetry/public/components/telemetry_form.js

@@ -52,7 +52,7 @@ export class TelemetryForm extends Component {
     queryMatches: null,
   }
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     const {
       query
     } = nextProps;

src/legacy/core_plugins/vis_type_timeseries/public/components/aggs/calculation.js

@@ -42,7 +42,7 @@ import {
 } from '@elastic/eui';
 
 export class CalculationAgg extends Component {
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     if (!this.props.model.variables) {
       this.props.onChange(
         _.assign({}, this.props.model, {

src/legacy/core_plugins/vis_type_timeseries/public/components/aggs/math.js

@@ -42,7 +42,7 @@ import {
 import { FormattedMessage } from '@kbn/i18n/react';
 
 export class MathAgg extends Component {
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     if (!this.props.model.variables) {
       this.props.onChange(
         _.assign({}, this.props.model, {

src/legacy/core_plugins/vis_type_timeseries/public/components/aggs/percentile.js

@@ -42,7 +42,7 @@ const RESTRICT_FIELDS = [KBN_FIELD_TYPES.NUMBER];
 export class PercentileAgg extends Component {
   // eslint-disable-line react/no-multi-comp
 
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     if (!this.props.model.percentiles) {
       this.props.onChange(
         _.assign({}, this.props.model, {

src/legacy/core_plugins/vis_type_timeseries/public/components/custom_color_picker.js

@@ -18,7 +18,7 @@
  */
 
 import PropTypes from 'prop-types';
-import React, { Component } from 'react';
+import React, { PureComponent } from 'react';
 
 import {
   ColorWrap as colorWrap,
@@ -32,18 +32,13 @@ import ChromePointer from 'react-color/lib/components/chrome/ChromePointer';
 import ChromePointerCircle from 'react-color/lib/components/chrome/ChromePointerCircle';
 import CompactColor from 'react-color/lib/components/compact/CompactColor';
 import color from 'react-color/lib/helpers/color';
-import shallowCompare from 'react-addons-shallow-compare';
 
-class CustomColorPickerUI extends Component {
+class CustomColorPickerUI extends PureComponent {
   constructor(props) {
     super(props);
     this.handleChange = this.handleChange.bind(this);
   }
 
-  shouldComponentUpdate(nextProps, nextState) {
-    return shallowCompare(nextProps, nextState);
-  }
-
   handleChange(data) {
     this.props.onChange(data);
   }

src/legacy/core_plugins/vis_type_timeseries/public/components/panel_config/gauge.js

@@ -52,7 +52,7 @@ class GaugePanelConfigUi extends Component {
     this.state = { selectedTab: 'data' };
   }
 
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     const { model } = this.props;
     const parts = {};
     if (

src/legacy/core_plugins/vis_type_timeseries/public/components/panel_config/metric.js

@@ -48,7 +48,7 @@ export class MetricPanelConfig extends Component {
     this.state = { selectedTab: 'data' };
   }
 
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     const { model } = this.props;
     if (
       !model.background_color_rules ||

src/legacy/core_plugins/vis_type_timeseries/public/components/panel_config/table.js

@@ -51,7 +51,7 @@ export class TablePanelConfig extends Component {
     this.state = { selectedTab: 'data' };
   }
 
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     const { model } = this.props;
     const parts = {};
     if (!model.bar_color_rules || (model.bar_color_rules && model.bar_color_rules.length === 0)) {

src/legacy/core_plugins/vis_type_timeseries/public/components/panel_config/top_n.js

@@ -51,7 +51,7 @@ export class TopNPanelConfig extends Component {
     this.state = { selectedTab: 'data' };
   }
 
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     const { model } = this.props;
     const parts = {};
     if (!model.bar_color_rules || (model.bar_color_rules && model.bar_color_rules.length === 0)) {

src/legacy/core_plugins/vis_type_timeseries/public/components/split.js

@@ -37,7 +37,7 @@ const SPLIT_MODES = {
 };
 
 export class Split extends Component {
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     const { model } = nextProps;
     if (model.split_mode === 'filters' && !model.split_filters) {
       this.props.onChange({

src/legacy/core_plugins/vis_type_timeseries/public/components/vis_types/table/config.js

@@ -44,7 +44,7 @@ import { getDefaultQueryLanguage } from '../../lib/get_default_query_language';
 
 import { QueryBarWrapper } from '../../query_bar_wrapper';
 class TableSeriesConfigUI extends Component {
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     const { model } = this.props;
     if (!model.color_rules || (model.color_rules && model.color_rules.length === 0)) {
       this.props.onChange({

src/legacy/core_plugins/vis_type_timeseries/public/visualizations/views/gauge.js

@@ -42,7 +42,7 @@ export class Gauge extends Component {
     this.handleResize = this.handleResize.bind(this);
   }
 
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     const check = () => {
       this.timeout = setTimeout(() => {
         const newState = calculateCoordinates(this.inner, this.resize, this.state);

src/legacy/core_plugins/vis_type_timeseries/public/visualizations/views/gauge_vis.js

@@ -37,7 +37,7 @@ export class GaugeVis extends Component {
     this.handleResize = this.handleResize.bind(this);
   }
 
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     const check = () => {
       this.timeout = setTimeout(() => {
         const newState = calculateCoordinates(this.inner, this.resize, this.state);

src/legacy/core_plugins/vis_type_timeseries/public/visualizations/views/metric.js

@@ -37,7 +37,7 @@ export class Metric extends Component {
     this.handleResize = this.handleResize.bind(this);
   }
 
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     const check = () => {
       this.timeout = setTimeout(() => {
         const newState = calculateCoordinates(this.inner, this.resize, this.state);

src/legacy/ui/public/exit_full_screen/exit_full_screen_button.tsx

@@ -31,7 +31,7 @@ interface Props {
 }
 
 export class ExitFullScreenButton extends PureComponent<Props> {
-  public componentWillMount() {
+  public UNSAFE_componentWillMount() {
     chrome.setVisible(false);
   }
 

src/legacy/ui/public/vis/vis_types/vislib_vis_legend/vislib_vis_legend.test.tsx

@@ -19,7 +19,7 @@
 
 import React from 'react';
 import { mount, ReactWrapper } from 'enzyme';
-import { act } from 'react-hooks-testing-library';
+import { act } from '@testing-library/react-hooks';
 
 import { I18nProvider } from '@kbn/i18n/react';
 import { EuiButtonGroup } from '@elastic/eui';

src/plugins/data/public/ui/index_pattern_select/index_pattern_select.tsx

@@ -88,7 +88,7 @@ export class IndexPatternSelect extends Component<IndexPatternSelectProps> {
     this.fetchSelectedIndexPattern(this.props.indexPatternId);
   }
 
-  componentWillReceiveProps(nextProps: IndexPatternSelectProps) {
+  UNSAFE_componentWillReceiveProps(nextProps: IndexPatternSelectProps) {
     if (nextProps.indexPatternId !== this.props.indexPatternId) {
       this.fetchSelectedIndexPattern(nextProps.indexPatternId);
     }

src/plugins/embeddable/public/lib/panel/embeddable_panel.tsx

@@ -102,7 +102,7 @@ export class EmbeddablePanel extends React.Component<Props, State> {
     }
   }
 
-  public componentWillMount() {
+  public UNSAFE_componentWillMount() {
     this.mounted = true;
     const { embeddable } = this.props;
     const { parent } = embeddable;

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/exit_full_screen_button/exit_full_screen_button.tsx

@@ -35,7 +35,7 @@ class ExitFullScreenButtonUi extends PureComponent<ExitFullScreenButtonProps> {
     }
   };
 
-  public componentWillMount() {
+  public UNSAFE_componentWillMount() {
     document.addEventListener('keydown', this.onKeyDown, false);
   }
 

src/plugins/kibana_react/public/table_list_view/table_list_view.tsx

@@ -112,7 +112,7 @@ class TableListView extends React.Component<TableListViewProps, TableListViewSta
     };
   }
 
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     this._isMounted = true;
   }
 

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';
 

src/plugins/kibana_react/public/util/use_shallow_compare_effect.test.ts

@@ -17,7 +17,7 @@
  * under the License.
  */
 
-import { renderHook } from 'react-hooks-testing-library';
+import { renderHook } from '@testing-library/react-hooks';
 import { useShallowCompareEffect } from './use_shallow_compare_effect';
 
 describe('useShallowCompareEffect', () => {

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.6",
+    "react": "^16.12.0",
-    "react-dom": "^16.8.6"
+    "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.6"
+    "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.6"
+    "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.6"
+    "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 { render, wait, waitForElement } from '@testing-library/react';
-import 'react-testing-library/cleanup-after-each';
 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(queryByDisplayValue(container, 'secondType')).not.toBeNull();
-      expect(queryBySelectText(container, 'firstType')).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 } from '@testing-library/react';
-import { render, cleanup } from 'react-testing-library';
 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} />);

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

@@ -5,14 +5,12 @@
  */
 
 import React from 'react';
-import 'jest-dom/extend-expect';
+import { render } from '@testing-library/react';
-import { render, cleanup } from 'react-testing-library';
 import { MetadataTable } from '..';
 import { expectTextsInDocument } from '../../../../utils/testHelpers';
 import { SectionsWithRows } from '../helper';
 
 describe('MetadataTable', () => {
-  afterEach(cleanup);
   it('shows sections', () => {
     const sectionsWithRows = ([
       { key: 'foo', label: 'Foo', required: true },

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

@@ -4,8 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 import React from 'react';
-import 'jest-dom/extend-expect';
+import { render } from '@testing-library/react';
-import { render } from 'react-testing-library';
 import { Section } from '../Section';
 import { expectTextsInDocument } from '../../../../utils/testHelpers';
 

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

@@ -5,8 +5,7 @@
  */
 
 import React from 'react';
-import { render, fireEvent, cleanup } from 'react-testing-library';
+import { render, fireEvent } from '@testing-library/react';
-import 'react-testing-library/cleanup-after-each';
 import { TransactionActionMenu } from '../TransactionActionMenu';
 import { Transaction } from '../../../../../typings/es_schemas/ui/Transaction';
 import * as Transactions from './mockData';
@@ -38,7 +37,6 @@ describe('TransactionActionMenu component', () => {
 
   afterEach(() => {
     jest.clearAllMocks();
-    cleanup();
   });
 
   it('should always render the discover link', async () => {

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

@@ -4,21 +4,9 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { cleanup, renderHook } from 'react-hooks-testing-library';
+import { renderHook } from '@testing-library/react-hooks';
 import { useDelayedVisibility } from '.';
 
-afterEach(cleanup);
-
-// 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;
-});
-
 describe('useFetcher', () => {
   let hook;
   beforeEach(() => {

x-pack/legacy/plugins/apm/public/hooks/useAvgDurationByBrowser.test.ts

@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { renderHook } from 'react-hooks-testing-library';
+import { renderHook } from '@testing-library/react-hooks';
 import theme from '@elastic/eui/dist/eui_theme_light.json';
 import * as useFetcherModule from './useFetcher';
 import { useAvgDurationByBrowser } from './useAvgDurationByBrowser';

x-pack/legacy/plugins/apm/public/hooks/useFetcher.integration.test.tsx

@@ -5,22 +5,12 @@
  */
 
 import React from 'react';
-import { render } from 'react-testing-library';
+import { render } from '@testing-library/react';
 import { delay, tick } from '../utils/testHelpers';
 import { useFetcher } from './useFetcher';
 import { KibanaCoreContext } from '../../../observability/public/context/kibana_core';
 import { LegacyCoreStart } from 'kibana/public';
 
-// 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;
-});
-
 // Wrap the hook with a provider so it can useKibanaCore
 const wrapper = ({ children }: { children?: React.ReactNode }) => (
   <KibanaCoreContext.Provider

x-pack/legacy/plugins/apm/public/hooks/useFetcher.test.tsx

@@ -4,25 +4,13 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { cleanup, renderHook } from 'react-hooks-testing-library';
+import { renderHook } from '@testing-library/react-hooks';
 import { delay } from '../utils/testHelpers';
 import { useFetcher } from './useFetcher';
 import { KibanaCoreContext } from '../../../observability/public/context/kibana_core';
 import { LegacyCoreStart } from 'kibana/public';
 import React from 'react';
 
-afterEach(cleanup);
-
-// 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;
-});
-
 // Wrap the hook with a provider so it can useKibanaCore
 const wrapper = ({ children }: { children?: React.ReactNode }) => (
   <KibanaCoreContext.Provider

x-pack/legacy/plugins/apm/public/utils/testHelpers.tsx

@@ -12,7 +12,8 @@ import { Location } from 'history';
 import moment from 'moment';
 import { Moment } from 'moment-timezone';
 import React from 'react';
-import { render, waitForElement } from 'react-testing-library';
+import { render, waitForElement } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
 import { MemoryRouter } from 'react-router-dom';
 import { APMConfig } from '../../../../../plugins/apm/server';
 import { LocationProvider } from '../context/LocationContext';

x-pack/legacy/plugins/beats_management/public/components/inputs/code_editor.tsx

@@ -41,7 +41,7 @@ class CodeEditor extends Component<
     setValue(defaultValue || '');
   }
 
-  public componentWillReceiveProps(nextProps: ComponentProps) {
+  public UNSAFE_componentWillReceiveProps(nextProps: ComponentProps) {
     if (nextProps.isFormSubmitted()) {
       this.showError();
     }

x-pack/legacy/plugins/beats_management/public/components/inputs/input.tsx

@@ -40,7 +40,7 @@ class FieldText extends Component<
     }
   }
 
-  public componentWillReceiveProps(nextProps: ComponentProps) {
+  public UNSAFE_componentWillReceiveProps(nextProps: ComponentProps) {
     if (nextProps.isFormSubmitted()) {
       this.showError();
     }

x-pack/legacy/plugins/beats_management/public/components/inputs/multi_input.tsx

@@ -42,7 +42,7 @@ class MultiFieldText extends Component<
     }
   }
 
-  public componentWillReceiveProps(nextProps: ComponentProps) {
+  public UNSAFE_componentWillReceiveProps(nextProps: ComponentProps) {
     if (nextProps.isFormSubmitted()) {
       this.showError();
     }

x-pack/legacy/plugins/beats_management/public/components/inputs/select.tsx

@@ -49,7 +49,7 @@ class FieldSelect extends Component<
     }
   }
 
-  public componentWillReceiveProps(nextProps: ComponentProps) {
+  public UNSAFE_componentWillReceiveProps(nextProps: ComponentProps) {
     if (nextProps.isFormSubmitted()) {
       this.showError();
     }

x-pack/legacy/plugins/beats_management/public/pages/beat/details.tsx

@@ -52,7 +52,7 @@ class BeatDetailPageUi extends React.PureComponent<PageProps, PageState> {
     };
   }
 
-  public async componentWillMount() {
+  public async UNSAFE_componentWillMount() {
     const tags = await this.props.libs.tags.getTagsWithIds(this.props.beat.tags);
     const blocksResult = await this.props.libs.configBlocks.getForTags(
       this.props.beat.tags,

x-pack/legacy/plugins/beats_management/public/pages/beat/tags.tsx

@@ -34,7 +34,7 @@ export class BeatTagsPage extends React.PureComponent<BeatTagsPageProps, BeatTag
     };
   }
 
-  public componentWillMount() {
+  public UNSAFE_componentWillMount() {
     this.updateBeatsData();
   }
 

x-pack/legacy/plugins/beats_management/public/pages/tag/edit.tsx

@@ -54,7 +54,7 @@ class TagEditPageComponent extends React.PureComponent<
     };
   }
 
-  public componentWillMount() {
+  public UNSAFE_componentWillMount() {
     this.loadTag();
     this.loadAttachedBeats();
     this.loadConfigBlocks();

x-pack/legacy/plugins/beats_management/public/router.tsx

@@ -32,7 +32,7 @@ export class AppRouter extends Component<RouterProps, RouterState> {
     };
   }
 
-  public async componentWillMount() {
+  public async UNSAFE_componentWillMount() {
     if (this.state.loading === true) {
       try {
         await this.props.beatsContainer.reload();

x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/time_filter/components/time_picker/time_picker.tsx

@@ -48,7 +48,7 @@ export class TimePicker extends Component<Props, State> {
   };
 
   // TODO: Refactor to no longer use componentWillReceiveProps since it is being deprecated
-  componentWillReceiveProps({ from, to }: Props) {
+  UNSAFE_componentWillReceiveProps({ from, to }: Props) {
     if (from !== this.props.from || to !== this.props.to) {
       this.setState({
         range: { from, to },

x-pack/legacy/plugins/canvas/public/apps/workpad/workpad_app/__tests__/workpad_telemetry.test.tsx

@@ -5,7 +5,7 @@
  */
 
 import React from 'react';
-import { render, cleanup } from 'react-testing-library';
+import { render } from '@testing-library/react';
 import {
   withUnconnectedElementsLoadedTelemetry,
   WorkpadLoadedMetric,
@@ -63,8 +63,6 @@ describe('Elements Loaded Telemetry', () => {
     trackMetric.mockReset();
   });
 
-  afterEach(cleanup);
-
   it('tracks when all resolvedArgs are completed', () => {
     const { rerender } = render(
       <Component

x-pack/legacy/plugins/canvas/public/components/arg_form/arg_template_form.js

@@ -28,7 +28,7 @@ class ArgTemplateFormComponent extends React.Component {
     errorTemplate: PropTypes.oneOfType([PropTypes.element, PropTypes.func]).isRequired,
   };
 
-  componentWillUpdate(prevProps) {
+  UNSAFE_componentWillUpdate(prevProps) {
     //see if error state changed
     if (this.props.error !== prevProps.error) {
       this.props.handlers.destroy();

x-pack/legacy/plugins/canvas/public/components/enhance/stateful_prop.js

@@ -20,7 +20,7 @@ export function createStatefulPropHoc(fieldname, updater = 'updateValue') {
         };
       }
 
-      componentWillReceiveProps(nextProps) {
+      UNSAFE_componentWillReceiveProps(nextProps) {
         this.setState({ value: nextProps[fieldname] });
       }
 

x-pack/legacy/plugins/canvas/public/components/fullscreen/fullscreen.js

@@ -20,7 +20,7 @@ export class Fullscreen extends React.Component {
     height: 0,
   };
 
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     this.win = getWindow();
     this.setState({
       width: this.win.innerWidth,

x-pack/legacy/plugins/canvas/public/components/function_form/function_form_context_pending.js

@@ -20,7 +20,7 @@ export class FunctionFormContextPending extends React.PureComponent {
     this.fetchContext(this.props);
   }
 
-  componentWillReceiveProps(newProps) {
+  UNSAFE_componentWillReceiveProps(newProps) {
     const oldContext = this.props.contextExpression;
     const newContext = newProps.contextExpression;
     const forceUpdate = newProps.expressionType.requiresContext && oldContext !== newContext;

x-pack/legacy/plugins/canvas/public/components/render_with_fn/render_with_fn.js

@@ -42,7 +42,7 @@ export class RenderWithFn extends React.Component {
     this.renderTarget = null;
   }
 
-  componentWillReceiveProps({ renderFn }) {
+  UNSAFE_componentWillReceiveProps({ renderFn }) {
     const newRenderFunction = renderFn !== this.props.renderFn;
 
     if (newRenderFunction) {

x-pack/legacy/plugins/canvas/public/components/router/router.js

@@ -37,7 +37,7 @@ export class Router extends React.PureComponent {
     return { router };
   }
 
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     // routerProvider is a singleton, and will only ever return one instance
     const { routes, onRouteChange, onLoad, onError } = this.props;
     const router = routerProvider(routes);

x-pack/legacy/plugins/canvas/public/components/workpad_loader/workpad_loader.js

@@ -70,7 +70,7 @@ export class WorkpadLoader extends React.PureComponent {
     this._isMounted = true;
   }
 
-  componentWillReceiveProps(newProps) {
+  UNSAFE_componentWillReceiveProps(newProps) {
     // the workpadId prop will change when a is created or loaded, close the toolbar when it does
     const { workpadId, onClose } = this.props;
     if (workpadId !== newProps.workpadId) {

x-pack/legacy/plugins/cross_cluster_replication/public/app/app.js

@@ -56,7 +56,7 @@ export class App extends Component {
     };
   }
 
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     routing.userHasLeftApp = false;
   }
 

x-pack/legacy/plugins/graph/public/components/field_manager/field_editor.tsx

@@ -24,6 +24,7 @@ import {
   EuiForm,
   EuiSpacer,
   EuiIconTip,
+  EuiComboBoxOptionProps,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import classNames from 'classnames';
@@ -221,7 +222,9 @@ export function FieldEditor({
                     }}
                     singleSelection={{ asPlainText: true }}
                     isClearable={false}
-                    options={toOptions(allFields, initialField)}
+                    options={
+                      toOptions(allFields, initialField) as Array<EuiComboBoxOptionProps<string>>
+                    }
                     selectedOptions={[
                       {
                         value: currentField.name,

x-pack/legacy/plugins/graph/public/components/settings/settings.test.tsx

@@ -9,7 +9,7 @@ import { EuiTab, EuiListGroupItem, EuiButton, EuiAccordion, EuiFieldText } from
 import * as Rx from 'rxjs';
 import { mountWithIntl } from 'test_utils/enzyme_helpers';
 import { Settings, AngularProps } from './settings';
-import { act } from 'react-testing-library';
+import { act } from '@testing-library/react';
 import { ReactWrapper } from 'enzyme';
 import { UrlTemplateForm } from './url_template_form';
 import {

x-pack/legacy/plugins/index_lifecycle_management/public/sections/edit_policy/components/node_attrs_details/node_attrs_details.js

@@ -27,7 +27,7 @@ export class NodeAttrsDetails extends PureComponent {
     selectedNodeAttrs: PropTypes.string.isRequired,
   };
 
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     this.props.fetchNodeDetails(this.props.selectedNodeAttrs);
   }
 

x-pack/legacy/plugins/index_management/__jest__/client_integration/helpers/home.helpers.ts

@@ -105,7 +105,6 @@ export const setup = async (): Promise<IdxMgmtHomeTestBed> => {
     const { rows } = table.getMetaData('templateTable');
     const templateLink = findTestSubject(rows[index].reactWrapper, 'templateDetailsLink');
 
-    // @ts-ignore (remove when react 16.9.0 is released)
     await act(async () => {
       const { href } = templateLink.props();
       router.navigateTo(href!);

x-pack/legacy/plugins/index_management/__jest__/client_integration/home.test.ts

@@ -22,9 +22,7 @@ const removeWhiteSpaceOnArrayValues = (array: any[]) =>
 
 jest.mock('ui/new_platform');
 
-// We need to skip the tests until react 16.9.0 is released
+describe('<IndexManagementHome />', () => {
-// which supports asynchronous code inside act()
-describe.skip('<IndexManagementHome />', () => {
   const { server, httpRequestsMockHelpers } = setupEnvironment();
   let testBed: IdxMgmtHomeTestBed;
 
@@ -38,7 +36,6 @@ describe.skip('<IndexManagementHome />', () => {
 
       testBed = await setup();
 
-      // @ts-ignore (remove when react 16.9.0 is released)
       await act(async () => {
         const { component } = testBed;
 
@@ -81,7 +78,6 @@ describe.skip('<IndexManagementHome />', () => {
 
         actions.selectHomeTab('templatesTab');
 
-        // @ts-ignore (remove when react 16.9.0 is released)
         await act(async () => {
           await nextTick();
           component.update();
@@ -101,7 +97,6 @@ describe.skip('<IndexManagementHome />', () => {
 
           actions.selectHomeTab('templatesTab');
 
-          // @ts-ignore (remove when react 16.9.0 is released)
           await act(async () => {
             await nextTick();
             component.update();
@@ -147,7 +142,6 @@ describe.skip('<IndexManagementHome />', () => {
 
           actions.selectHomeTab('templatesTab');
 
-          // @ts-ignore (remove when react 16.9.0 is released)
           await act(async () => {
             await nextTick();
             component.update();
@@ -186,7 +180,6 @@ describe.skip('<IndexManagementHome />', () => {
 
           expect(exists('reloadButton')).toBe(true);
 
-          // @ts-ignore (remove when react 16.9.0 is released)
           await act(async () => {
             actions.clickReloadButton();
             await nextTick();
@@ -214,7 +207,6 @@ describe.skip('<IndexManagementHome />', () => {
 
           expect(exists('systemTemplatesSwitch')).toBe(true);
 
-          // @ts-ignore (remove when react 16.9.0 is released)
           await act(async () => {
             form.toggleEuiSwitch('systemTemplatesSwitch');
             await nextTick();
@@ -290,7 +282,6 @@ describe.skip('<IndexManagementHome />', () => {
           test('should show a warning message when attempting to delete a system template', async () => {
             const { component, form, actions } = testBed;
 
-            // @ts-ignore (remove when react 16.9.0 is released)
             await act(async () => {
               form.toggleEuiSwitch('systemTemplatesSwitch');
               await nextTick();
@@ -328,7 +319,6 @@ describe.skip('<IndexManagementHome />', () => {
               },
             });
 
-            // @ts-ignore (remove when react 16.9.0 is released)
             await act(async () => {
               confirmButton!.click();
               await nextTick();
@@ -384,7 +374,6 @@ describe.skip('<IndexManagementHome />', () => {
 
               actions.clickCloseDetailsButton();
 
-              // @ts-ignore (remove when react 16.9.0 is released)
               await act(async () => {
                 await nextTick();
                 component.update();
@@ -474,7 +463,6 @@ describe.skip('<IndexManagementHome />', () => {
 
               await actions.clickTemplateAt(0);
 
-              // @ts-ignore (remove when react 16.9.0 is released)
               await act(async () => {
                 await nextTick();
                 component.update();

x-pack/legacy/plugins/index_management/__jest__/client_integration/template_clone.test.tsx

@@ -38,9 +38,7 @@ jest.mock('@elastic/eui', () => ({
   ),
 }));
 
-// We need to skip the tests until react 16.9.0 is released
+describe('<TemplateClone />', () => {
-// which supports asynchronous code inside act()
-describe.skip('<TemplateClone />', () => {
   let testBed: TemplateFormTestBed;
 
   const { server, httpRequestsMockHelpers } = setupEnvironment();
@@ -59,7 +57,6 @@ describe.skip('<TemplateClone />', () => {
 
     testBed = await setup();
 
-    // @ts-ignore (remove when react 16.9.0 is released)
     await act(async () => {
       await nextTick();
       testBed.component.update();
@@ -77,7 +74,6 @@ describe.skip('<TemplateClone />', () => {
     beforeEach(async () => {
       const { actions, component } = testBed;
 
-      // @ts-ignore (remove when react 16.9.0 is released)
       await act(async () => {
         // Complete step 1 (logistics)
         // Specify index patterns, but do not change name (keep default)
@@ -105,7 +101,6 @@ describe.skip('<TemplateClone />', () => {
     it('should send the correct payload', async () => {
       const { actions } = testBed;
 
-      // @ts-ignore (remove when react 16.9.0 is released)
       await act(async () => {
         actions.clickSubmitButton();
         await nextTick();

x-pack/legacy/plugins/index_management/__jest__/client_integration/template_create.test.tsx

@@ -43,9 +43,7 @@ jest.mock('@elastic/eui', () => ({
   ),
 }));
 
-// We need to skip the tests until react 16.9.0 is released
+describe('<TemplateCreate />', () => {
-// which supports asynchronous code inside act()
-describe.skip('<TemplateCreate />', () => {
   let testBed: TemplateFormTestBed;
 
   const { server, httpRequestsMockHelpers } = setupEnvironment();
@@ -71,7 +69,6 @@ describe.skip('<TemplateCreate />', () => {
 
       expect(find('nextButton').props().disabled).toEqual(false);
 
-      // @ts-ignore (remove when react 16.9.0 is released)
       await act(async () => {
         actions.clickNextButton();
         await nextTick();
@@ -90,7 +87,6 @@ describe.skip('<TemplateCreate />', () => {
         beforeEach(async () => {
           const { actions } = testBed;
 
-          // @ts-ignore (remove when react 16.9.0 is released)
           await act(async () => {
             // Complete step 1 (logistics)
             await actions.completeStepOne({ name: TEMPLATE_NAME, indexPatterns: ['index1'] });
@@ -107,7 +103,6 @@ describe.skip('<TemplateCreate />', () => {
         it('should not allow invalid json', async () => {
           const { form, actions } = testBed;
 
-          // @ts-ignore (remove when react 16.9.0 is released)
           await act(async () => {
             actions.completeStepTwo('{ invalidJsonString ');
           });
@@ -120,7 +115,6 @@ describe.skip('<TemplateCreate />', () => {
         beforeEach(async () => {
           const { actions } = testBed;
 
-          // @ts-ignore (remove when react 16.9.0 is released)
           await act(async () => {
             // Complete step 1 (logistics)
             await actions.completeStepOne({ name: TEMPLATE_NAME, indexPatterns: ['index1'] });
@@ -140,7 +134,6 @@ describe.skip('<TemplateCreate />', () => {
         it('should not allow invalid json', async () => {
           const { actions, form } = testBed;
 
-          // @ts-ignore (remove when react 16.9.0 is released)
           await act(async () => {
             // Complete step 3 (mappings) with invalid json
             await actions.completeStepThree('{ invalidJsonString ');
@@ -154,7 +147,6 @@ describe.skip('<TemplateCreate />', () => {
         beforeEach(async () => {
           const { actions } = testBed;
 
-          // @ts-ignore (remove when react 16.9.0 is released)
           await act(async () => {
             // Complete step 1 (logistics)
             await actions.completeStepOne({ name: TEMPLATE_NAME, indexPatterns: ['index1'] });
@@ -177,7 +169,6 @@ describe.skip('<TemplateCreate />', () => {
         it('should not allow invalid json', async () => {
           const { actions, form } = testBed;
 
-          // @ts-ignore (remove when react 16.9.0 is released)
           await act(async () => {
             // Complete step 4 (aliases) with invalid json
             await actions.completeStepFour('{ invalidJsonString ');
@@ -194,7 +185,6 @@ describe.skip('<TemplateCreate />', () => {
 
         const { actions } = testBed;
 
-        // @ts-ignore (remove when react 16.9.0 is released)
         await act(async () => {
           // Complete step 1 (logistics)
           await actions.completeStepOne({
@@ -249,7 +239,6 @@ describe.skip('<TemplateCreate />', () => {
 
         const { actions, exists, find } = testBed;
 
-        // @ts-ignore (remove when react 16.9.0 is released)
         await act(async () => {
           // Complete step 1 (logistics)
           await actions.completeStepOne({
@@ -280,7 +269,6 @@ describe.skip('<TemplateCreate />', () => {
 
         const { actions } = testBed;
 
-        // @ts-ignore (remove when react 16.9.0 is released)
         await act(async () => {
           // Complete step 1 (logistics)
           await actions.completeStepOne({
@@ -302,7 +290,6 @@ describe.skip('<TemplateCreate />', () => {
       it('should send the correct payload', async () => {
         const { actions } = testBed;
 
-        // @ts-ignore (remove when react 16.9.0 is released)
         await act(async () => {
           actions.clickSubmitButton();
           await nextTick();
@@ -333,7 +320,6 @@ describe.skip('<TemplateCreate />', () => {
 
         httpRequestsMockHelpers.setCreateTemplateResponse(undefined, { body: error });
 
-        // @ts-ignore (remove when react 16.9.0 is released)
         await act(async () => {
           actions.clickSubmitButton();
           await nextTick();

x-pack/legacy/plugins/index_management/__jest__/client_integration/template_edit.test.tsx

@@ -40,9 +40,7 @@ jest.mock('@elastic/eui', () => ({
   ),
 }));
 
-// We need to skip the tests until react 16.9.0 is released
+describe('<TemplateEdit />', () => {
-// which supports asynchronous code inside act()
-describe.skip('<TemplateEdit />', () => {
   let testBed: TemplateFormTestBed;
 
   const { server, httpRequestsMockHelpers } = setupEnvironment();
@@ -61,7 +59,6 @@ describe.skip('<TemplateEdit />', () => {
 
     testBed = await setup();
 
-    // @ts-ignore (remove when react 16.9.0 is released)
     await act(async () => {
       await nextTick();
       testBed.component.update();
@@ -87,7 +84,6 @@ describe.skip('<TemplateEdit />', () => {
     beforeEach(async () => {
       const { actions } = testBed;
 
-      // @ts-ignore (remove when react 16.9.0 is released)
       await act(async () => {
         // Complete step 1 (logistics)
         await actions.completeStepOne({
@@ -108,7 +104,6 @@ describe.skip('<TemplateEdit />', () => {
     it('should send the correct payload with changed values', async () => {
       const { actions } = testBed;
 
-      // @ts-ignore (remove when react 16.9.0 is released)
       await act(async () => {
         actions.clickSubmitButton();
         await nextTick();

x-pack/legacy/plugins/index_management/public/app/sections/home/index_list/detail_panel/edit_settings_json/edit_settings_json.js

@@ -56,7 +56,7 @@ export class EditSettingsJson extends React.PureComponent {
     }
     return newSettings;
   }
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     const { indexName } = this.props;
     this.props.loadIndexData({ dataType: TAB_SETTINGS, indexName });
   }

x-pack/legacy/plugins/index_management/public/app/sections/home/index_list/detail_panel/show_json/show_json.js

@@ -10,10 +10,10 @@ import { EuiCodeEditor } from '@elastic/eui';
 import 'brace/theme/textmate';
 
 export class ShowJson extends React.PureComponent {
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     this.props.loadIndexData(this.props);
   }
-  componentWillUpdate(newProps) {
+  UNSAFE_componentWillUpdate(newProps) {
     const { data, loadIndexData } = newProps;
     if (!data) {
       loadIndexData(newProps);

x-pack/legacy/plugins/infra/public/containers/metrics_explorer/use_metrics_explorer_data.test.tsx

@@ -8,7 +8,7 @@ import { fetch } from '../../utils/fetch';
 import { useMetricsExplorerData } from './use_metrics_explorer_data';
 import { MetricsExplorerAggregation } from '../../../server/routes/metrics_explorer/types';
 
-import { renderHook } from 'react-hooks-testing-library';
+import { renderHook } from '@testing-library/react-hooks';
 
 import {
   options,

x-pack/legacy/plugins/infra/public/containers/metrics_explorer/use_metrics_explorer_options.test.tsx

@@ -5,7 +5,7 @@
  */
 
 import React from 'react';
-import { renderHook, act } from 'react-hooks-testing-library';
+import { renderHook, act } from '@testing-library/react-hooks';
 import {
   useMetricsExplorerOptions,
   MetricsExplorerOptionsContainer,
@@ -65,7 +65,7 @@ describe('useMetricExplorerOptions', () => {
   });
 
   it('should change the store when options update', () => {
-    const { result, waitForNextUpdate } = renderUseMetricsExplorerOptionsHook();
+    const { result, rerender } = renderUseMetricsExplorerOptionsHook();
     const newOptions: MetricsExplorerOptions = {
       ...DEFAULT_OPTIONS,
       metrics: [{ aggregation: MetricsExplorerAggregation.count }],
@@ -73,13 +73,13 @@ describe('useMetricExplorerOptions', () => {
     act(() => {
       result.current.setOptions(newOptions);
     });
-    waitForNextUpdate();
+    rerender();
     expect(result.current.options).toEqual(newOptions);
     expect(STORE.MetricsExplorerOptions).toEqual(JSON.stringify(newOptions));
   });
 
   it('should change the store when timerange update', () => {
-    const { result, waitForNextUpdate } = renderUseMetricsExplorerOptionsHook();
+    const { result, rerender } = renderUseMetricsExplorerOptionsHook();
     const newTimeRange: MetricsExplorerTimeOptions = {
       ...DEFAULT_TIMERANGE,
       from: 'now-15m',
@@ -87,7 +87,7 @@ describe('useMetricExplorerOptions', () => {
     act(() => {
       result.current.setTimeRange(newTimeRange);
     });
-    waitForNextUpdate();
+    rerender();
     expect(result.current.currentTimerange).toEqual(newTimeRange);
     expect(STORE.MetricsExplorerTimeRange).toEqual(JSON.stringify(newTimeRange));
   });

x-pack/legacy/plugins/infra/public/pages/infrastructure/metrics_explorer/use_metric_explorer_state.test.tsx

@@ -5,7 +5,7 @@
  */
 
 import { fetch } from '../../../utils/fetch';
-import { renderHook } from 'react-hooks-testing-library';
+import { renderHook } from '@testing-library/react-hooks';
 import { useMetricsExplorerState } from './use_metric_explorer_state';
 import { MetricsExplorerOptionsContainer } from '../../../containers/metrics_explorer/use_metrics_explorer_options';
 import React from 'react';
@@ -172,7 +172,7 @@ describe('useMetricsExplorerState', () => {
 
   describe('handleLoadMore', () => {
     it('should load more based on the afterKey', async () => {
-      const { result, waitForNextUpdate } = renderUseMetricsExplorerStateHook();
+      const { result, waitForNextUpdate, rerender } = renderUseMetricsExplorerStateHook();
       expect(result.current.data).toBe(null);
       expect(result.current.loading).toBe(true);
       await waitForNextUpdate();
@@ -189,7 +189,7 @@ describe('useMetricsExplorerState', () => {
       } as any);
       const { handleLoadMore } = result.current;
       handleLoadMore(pageInfo.afterKey!);
-      await waitForNextUpdate();
+      await rerender();
       expect(result.current.loading).toBe(true);
       await waitForNextUpdate();
       expect(result.current.loading).toBe(false);

x-pack/legacy/plugins/infra/public/pages/link_to/use_host_ip_to_name.test.ts

@@ -6,7 +6,7 @@
 
 import { useHostIpToName } from './use_host_ip_to_name';
 import { fetch } from '../../utils/fetch';
-import { renderHook } from 'react-hooks-testing-library';
+import { renderHook } from '@testing-library/react-hooks';
 
 const renderUseHostIpToNameHook = () =>
   renderHook(props => useHostIpToName(props.ipAddress, props.indexPattern), {

x-pack/legacy/plugins/lens/public/indexpattern_plugin/dimension_panel/dimension_panel.test.tsx

@@ -9,7 +9,11 @@ import React from 'react';
 import { act } from 'react-dom/test-utils';
 import { EuiComboBox, EuiSideNav, EuiPopover } from '@elastic/eui';
 import { changeColumn } from '../state_helpers';
-import { IndexPatternDimensionPanel, IndexPatternDimensionPanelProps } from './dimension_panel';
+import {
+  IndexPatternDimensionPanel,
+  IndexPatternDimensionPanelComponent,
+  IndexPatternDimensionPanelProps,
+} from './dimension_panel';
 import { DropHandler, DragContextState } from '../../drag_drop';
 import { createMockedDragDropContext } from '../mocks';
 import { mountWithIntl as mount, shallowWithIntl as shallow } from 'test_utils/enzyme_helpers';
@@ -164,7 +168,7 @@ describe('IndexPatternDimensionPanel', () => {
     const filterOperations = jest.fn().mockReturnValue(true);
 
     wrapper = shallow(
-      <IndexPatternDimensionPanel {...defaultProps} filterOperations={filterOperations} />
+      <IndexPatternDimensionPanelComponent {...defaultProps} filterOperations={filterOperations} />
     );
 
     expect(filterOperations).toBeCalled();
@@ -1076,7 +1080,7 @@ describe('IndexPatternDimensionPanel', () => {
 
     it('is not droppable if the dragged item has no field', () => {
       wrapper = shallow(
-        <IndexPatternDimensionPanel
+        <IndexPatternDimensionPanelComponent
           {...defaultProps}
           dragDropContext={{
             ...dragDropContext,
@@ -1097,7 +1101,7 @@ describe('IndexPatternDimensionPanel', () => {
 
     it('is not droppable if field is not supported by filterOperations', () => {
       wrapper = shallow(
-        <IndexPatternDimensionPanel
+        <IndexPatternDimensionPanelComponent
           {...defaultProps}
           dragDropContext={{
             ...dragDropContext,
@@ -1122,7 +1126,7 @@ describe('IndexPatternDimensionPanel', () => {
 
     it('is droppable if the field is supported by filterOperations', () => {
       wrapper = shallow(
-        <IndexPatternDimensionPanel
+        <IndexPatternDimensionPanelComponent
           {...defaultProps}
           dragDropContext={{
             ...dragDropContext,
@@ -1147,7 +1151,7 @@ describe('IndexPatternDimensionPanel', () => {
 
     it('is notdroppable if the field belongs to another index pattern', () => {
       wrapper = shallow(
-        <IndexPatternDimensionPanel
+        <IndexPatternDimensionPanelComponent
           {...defaultProps}
           dragDropContext={{
             ...dragDropContext,
@@ -1177,7 +1181,7 @@ describe('IndexPatternDimensionPanel', () => {
       };
       const testState = dragDropState();
       wrapper = shallow(
-        <IndexPatternDimensionPanel
+        <IndexPatternDimensionPanelComponent
           {...defaultProps}
           dragDropContext={{
             ...dragDropContext,
@@ -1225,7 +1229,7 @@ describe('IndexPatternDimensionPanel', () => {
       };
       const testState = dragDropState();
       wrapper = shallow(
-        <IndexPatternDimensionPanel
+        <IndexPatternDimensionPanelComponent
           {...defaultProps}
           dragDropContext={{
             ...dragDropContext,
@@ -1273,7 +1277,7 @@ describe('IndexPatternDimensionPanel', () => {
       };
       const testState = dragDropState();
       wrapper = shallow(
-        <IndexPatternDimensionPanel
+        <IndexPatternDimensionPanelComponent
           {...defaultProps}
           dragDropContext={{
             ...dragDropContext,