@testing-library remove "pure" hack (#78742)

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

src/dev/jest/setup/react_testing_library.js

@@ -19,14 +19,13 @@
 
 import '@testing-library/jest-dom';
 /**
- * Have to import "/pure" here to not register afterEach() hook clean up
- * in the very beginning. There are couple tests which fail with clean up hook.
- * On CI they run before first test which imports '@testing-library/react'
- * and registers afterEach hook so the whole suite is passing.
- * This have to be fixed as we depend on test order execution
+ * PLEASE NOTE:
+ * Importing '@testing-library/react' registers an `afterEach(cleanup)` side effect.
+ * It has tricky code that flushes pending promises, that previously led to unpredictable test failures
  * https://github.com/elastic/kibana/issues/59469
+ * But since newer versions it has stabilised itself
  */
-import { configure } from '@testing-library/react/pure';
+import { configure } from '@testing-library/react';
 
 // instead of default 'data-testid', use kibana's 'data-test-subj'
 configure({ testIdAttribute: 'data-test-subj', asyncUtilTimeout: 4500 });

src/plugins/embeddable/public/lib/embeddables/embeddable_renderer.test.tsx

@@ -19,7 +19,7 @@
 
 import React from 'react';
 import { wait } from '@testing-library/dom';
-import { cleanup, render } from '@testing-library/react/pure';
+import { render } from '@testing-library/react';
 import {
   HelloWorldEmbeddable,
   HelloWorldEmbeddableFactoryDefinition,
@@ -29,8 +29,6 @@ import { EmbeddableRenderer } from './embeddable_renderer';
 import { embeddablePluginMock } from '../../mocks';
 
 describe('<EmbeddableRenderer/>', () => {
-  afterEach(cleanup);
-
   test('Render embeddable', () => {
     const embeddable = new HelloWorldEmbeddable({ id: 'hello' });
     const { getByTestId } = render(<EmbeddableRenderer embeddable={embeddable} />);

src/plugins/embeddable/public/lib/embeddables/error_embeddable.test.tsx

@@ -17,13 +17,10 @@
  * under the License.
  */
 import React from 'react';
-import { wait } from '@testing-library/dom';
-import { cleanup, render } from '@testing-library/react/pure';
+import { wait, render } from '@testing-library/react';
 import { ErrorEmbeddable } from './error_embeddable';
 import { EmbeddableRoot } from './embeddable_root';
 
-afterEach(cleanup);
-
 test('ErrorEmbeddable renders an embeddable', async () => {
   const embeddable = new ErrorEmbeddable('some error occurred', { id: '123', title: 'Error' });
   const { getByTestId, getByText } = render(<EmbeddableRoot embeddable={embeddable} />);

src/plugins/vis_type_markdown/public/markdown_vis_controller.test.tsx

@@ -18,12 +18,9 @@
  */
 
 import React from 'react';
-import { wait } from '@testing-library/dom';
-import { render, cleanup } from '@testing-library/react/pure';
+import { wait, render } from '@testing-library/react';
 import MarkdownVisComponent from './markdown_vis_controller';
 
-afterEach(cleanup);
-
 describe('markdown vis controller', () => {
   it('should set html from markdown params', async () => {
     const vis = {

x-pack/plugins/dashboard_enhanced/public/services/drilldowns/actions/flyout_edit_drilldown/menu_item.test.tsx

@@ -5,14 +5,12 @@
  */
 
 import React from 'react';
-import { render, cleanup, act } from '@testing-library/react/pure';
+import { render, act } from '@testing-library/react';
 import { MenuItem } from './menu_item';
 import { createStateContainer } from '../../../../../../../../src/plugins/kibana_utils/public';
 import { UiActionsEnhancedDynamicActionManager as DynamicActionManager } from '../../../../../../ui_actions_enhanced/public';
 import { EnhancedEmbeddable } from '../../../../../../embeddable_enhanced/public';
 
-afterEach(cleanup);
-
 test('<MenuItem/>', () => {
   const state = createStateContainer<{ events: object[] }>({ events: [] });
   const { getByText, queryByText } = render(

x-pack/plugins/ui_actions_enhanced/public/components/action_wizard/action_wizard.test.tsx

@@ -5,7 +5,7 @@
  */
 
 import React from 'react';
-import { cleanup, fireEvent, render } from '@testing-library/react/pure';
+import { fireEvent, render } from '@testing-library/react';
 import { TEST_SUBJ_ACTION_FACTORY_ITEM, TEST_SUBJ_SELECTED_ACTION_FACTORY } from './action_wizard';
 import {
   dashboardFactory,
@@ -17,10 +17,6 @@ import {
 import { ActionFactory } from '../../dynamic_actions';
 import { licensingMock } from '../../../../licensing/public/mocks';
 
-// TODO: afterEach is not available for it globally during setup
-// https://github.com/elastic/kibana/issues/59469
-afterEach(cleanup);
-
 test('Pick and configure action', () => {
   const screen = render(<Demo actionFactories={[dashboardFactory, urlFactory]} />);
 

x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/connected_flyout_manage_drilldowns/connected_flyout_manage_drilldowns.test.tsx

@@ -5,7 +5,7 @@
  */
 
 import React from 'react';
-import { cleanup, fireEvent, render, wait } from '@testing-library/react/pure';
+import { fireEvent, render, wait, cleanup } from '@testing-library/react';
 import { createFlyoutManageDrilldowns } from './connected_flyout_manage_drilldowns';
 import {
   mockGetTriggerInfo,
@@ -30,9 +30,6 @@ const FlyoutManageDrilldowns = createFlyoutManageDrilldowns({
   getTrigger: mockGetTriggerInfo,
 });
 
-// https://github.com/elastic/kibana/issues/59469
-afterEach(cleanup);
-
 beforeEach(() => {
   storage.clear();
   mockDynamicActionManager.state.set({ ...mockDynamicActionManager.state.get(), events: [] });

x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/flyout_frame/flyout_frame.test.tsx

@@ -6,11 +6,9 @@
 
 import React from 'react';
 import { render } from 'react-dom';
-import { render as renderTestingLibrary, fireEvent, cleanup } from '@testing-library/react/pure';
+import { render as renderTestingLibrary, fireEvent } from '@testing-library/react';
 import { FlyoutFrame } from './index';
 
-afterEach(cleanup);
-
 describe('<FlyoutFrame>', () => {
   test('renders without crashing', () => {
     const div = document.createElement('div');

x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/form_drilldown_wizard/form_drilldown_wizard.test.tsx

@@ -7,12 +7,10 @@
 import React from 'react';
 import { render } from 'react-dom';
 import { FormDrilldownWizard } from './form_drilldown_wizard';
-import { render as renderTestingLibrary, fireEvent, cleanup } from '@testing-library/react/pure';
+import { render as renderTestingLibrary, fireEvent } from '@testing-library/react';
 import { txtNameOfDrilldown } from './i18n';
 import { Trigger, TriggerId } from '../../../../../../../src/plugins/ui_actions/public';
 
-afterEach(cleanup);
-
 const otherProps = {
   actionFactoryContext: { triggers: [] as TriggerId[] },
   supportedTriggers: [

x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/list_manage_drilldowns/list_manage_drilldowns.test.tsx

@@ -5,17 +5,13 @@
  */
 
 import React from 'react';
-import { cleanup, fireEvent, render } from '@testing-library/react/pure';
+import { fireEvent, render } from '@testing-library/react';
 import {
   DrilldownListItem,
   ListManageDrilldowns,
   TEST_SUBJ_DRILLDOWN_ITEM,
 } from './list_manage_drilldowns';
 
-// TODO: for some reason global cleanup from RTL doesn't work
-// afterEach is not available for it globally during setup
-afterEach(cleanup);
-
 const drilldowns: DrilldownListItem[] = [
   { id: '1', actionName: 'Dashboard', drilldownName: 'Drilldown 1' },
   { id: '2', actionName: 'Dashboard', drilldownName: 'Drilldown 2' },

x-pack/plugins/ui_actions_enhanced/public/drilldowns/url_drilldown/components/url_drilldown_collect_config/url_drilldown_collect_config.test.tsx

@@ -5,11 +5,9 @@
  */
 
 import { Demo } from './test_samples/demo';
-import { cleanup, fireEvent, render } from '@testing-library/react/pure';
+import { fireEvent, render } from '@testing-library/react';
 import React from 'react';
 
-afterEach(cleanup);
-
 test('configure valid URL template', () => {
   const screen = render(<Demo />);