get rid of wrong act

elastic · Sep 24, 2020 · bb1e926 · bb1e926
1 parent 611b7ff
commit bb1e926
Show file tree

Hide file tree

Showing 13 changed files with 114 additions and 151 deletions.
diff --git a/x-pack/plugins/security_solution/public/cases/components/edit_connector/index.test.tsx b/x-pack/plugins/security_solution/public/cases/components/edit_connector/index.test.tsx
@@ -13,7 +13,7 @@ import { TestProviders } from '../../../common/mock';
 import { connectorsMock } from '../../containers/configure/mock';
 // we don't have the types for waitFor just yet, so using "as waitFor" until when we do
 import { wait as waitFor } from '@testing-library/react';
-import { act } from 'react-dom/test-utils';
+
 jest.mock(
   '../../../../../../../src/plugins/es_ui_shared/static/forms/hook_form_lib/hooks/use_form'
 );
@@ -67,10 +67,8 @@ describe('EditConnector ', () => {
 
     expect(wrapper.find(`[data-test-subj="edit-connectors-submit"]`).last().exists()).toBeTruthy();
 
-    await act(async () => {
-      wrapper.find(`[data-test-subj="edit-connectors-submit"]`).last().simulate('click');
-      await waitFor(() => expect(onSubmit.mock.calls[0][0]).toBe(sampleConnector));
-    });
+    wrapper.find(`[data-test-subj="edit-connectors-submit"]`).last().simulate('click');
+    await waitFor(() => expect(onSubmit.mock.calls[0][0]).toBe(sampleConnector));
   });
 
   it('Revert to initial external service on error', async () => {
@@ -90,12 +88,10 @@ describe('EditConnector ', () => {
 
     expect(wrapper.find(`[data-test-subj="edit-connectors-submit"]`).last().exists()).toBeTruthy();
 
-    await act(async () => {
-      wrapper.find(`[data-test-subj="edit-connectors-submit"]`).last().simulate('click');
-      await waitFor(() => {
-        wrapper.update();
-        expect(formHookMock.setFieldValue).toHaveBeenCalledWith('connector', 'none');
-      });
+    wrapper.find(`[data-test-subj="edit-connectors-submit"]`).last().simulate('click');
+    await waitFor(() => {
+      wrapper.update();
+      expect(formHookMock.setFieldValue).toHaveBeenCalledWith('connector', 'none');
     });
   });
 
@@ -114,15 +110,13 @@ describe('EditConnector ', () => {
     wrapper.find('button[data-test-subj="dropdown-connector-servicenow-2"]').simulate('click');
     wrapper.update();
 
-    await act(async () => {
-      wrapper.find(`[data-test-subj="edit-connectors-cancel"]`).last().simulate('click');
-      await waitFor(() => {
-        wrapper.update();
-        expect(formHookMock.setFieldValue).toBeCalledWith(
-          'connector',
-          defaultProps.selectedConnector
-        );
-      });
+    wrapper.find(`[data-test-subj="edit-connectors-cancel"]`).last().simulate('click');
+    await waitFor(() => {
+      wrapper.update();
+      expect(formHookMock.setFieldValue).toBeCalledWith(
+        'connector',
+        defaultProps.selectedConnector
+      );
     });
   });
 

diff --git a/x-pack/plugins/security_solution/public/cases/components/tag_list/index.test.tsx b/x-pack/plugins/security_solution/public/cases/components/tag_list/index.test.tsx
@@ -6,7 +6,6 @@
 
 import React from 'react';
 import { mount } from 'enzyme';
-import { act } from 'react-dom/test-utils';
 
 import { TagList } from '.';
 import { getFormMock } from '../__mock__/form';
@@ -76,10 +75,8 @@ describe('TagList ', () => {
       </TestProviders>
     );
     wrapper.find(`[data-test-subj="tag-list-edit-button"]`).last().simulate('click');
-    await act(async () => {
-      wrapper.find(`[data-test-subj="edit-tags-submit"]`).last().simulate('click');
-      await waitFor(() => expect(onSubmit).toBeCalledWith(sampleTags));
-    });
+    wrapper.find(`[data-test-subj="edit-tags-submit"]`).last().simulate('click');
+    await waitFor(() => expect(onSubmit).toBeCalledWith(sampleTags));
   });
 
   it('Tag options render with new tags added', () => {
@@ -94,7 +91,7 @@ describe('TagList ', () => {
     ).toEqual([{ label: 'coke' }, { label: 'pepsi' }, { label: 'rad' }, { label: 'dude' }]);
   });
 
-  it('Cancels on cancel', async () => {
+  it('Cancels on cancel', () => {
     const props = {
       ...defaultProps,
       tags: ['pepsi'],
@@ -107,14 +104,11 @@ describe('TagList ', () => {
 
     expect(wrapper.find(`[data-test-subj="tag-pepsi"]`).last().exists()).toBeTruthy();
     wrapper.find(`[data-test-subj="tag-list-edit-button"]`).last().simulate('click');
-    await act(async () => {
-      expect(wrapper.find(`[data-test-subj="tag-pepsi"]`).last().exists()).toBeFalsy();
-      wrapper.find(`[data-test-subj="edit-tags-cancel"]`).last().simulate('click');
-      await waitFor(() => {
-        wrapper.update();
-        expect(wrapper.find(`[data-test-subj="tag-pepsi"]`).last().exists()).toBeTruthy();
-      });
-    });
+
+    expect(wrapper.find(`[data-test-subj="tag-pepsi"]`).last().exists()).toBeFalsy();
+    wrapper.find(`[data-test-subj="edit-tags-cancel"]`).last().simulate('click');
+    wrapper.update();
+    expect(wrapper.find(`[data-test-subj="tag-pepsi"]`).last().exists()).toBeTruthy();
   });
 
   it('Renders disabled button', () => {

diff --git a/.../security_solution/public/common/components/exceptions/add_exception_modal/index.test.tsx b/.../security_solution/public/common/components/exceptions/add_exception_modal/index.test.tsx
@@ -8,7 +8,7 @@ import React from 'react';
 import { ThemeProvider } from 'styled-components';
 import { mount, ReactWrapper } from 'enzyme';
 import euiLightVars from '@elastic/eui/dist/eui_theme_light.json';
-import { act } from 'react-dom/test-utils';
+import { wait as waitFor } from '@testing-library/react';
 
 import { AddExceptionModal } from './';
 import { useCurrentUser } from '../../../../common/lib/kibana';
@@ -111,7 +111,7 @@ describe('When the add exception modal is opened', () => {
 
   describe('when there is no alert data passed to an endpoint list exception', () => {
     let wrapper: ReactWrapper;
-    beforeEach(() => {
+    beforeEach(async () => {
       wrapper = mount(
         <ThemeProvider theme={() => ({ eui: euiLightVars, darkMode: false })}>
           <AddExceptionModal
@@ -125,7 +125,7 @@ describe('When the add exception modal is opened', () => {
         </ThemeProvider>
       );
       const callProps = ExceptionBuilderComponent.mock.calls[0][0];
-      act(() => callProps.onChange({ exceptionItems: [] }));
+      await waitFor(() => callProps.onChange({ exceptionItems: [] }));
     });
     it('has the add exception button disabled', () => {
       expect(
@@ -147,7 +147,7 @@ describe('When the add exception modal is opened', () => {
 
   describe('when there is alert data passed to an endpoint list exception', () => {
     let wrapper: ReactWrapper;
-    beforeEach(() => {
+    beforeEach(async () => {
       const alertDataMock: { ecsData: Ecs; nonEcsData: TimelineNonEcsData[] } = {
         ecsData: { _id: 'test-id' },
         nonEcsData: [{ field: 'file.path', value: ['test/path'] }],
@@ -166,7 +166,9 @@ describe('When the add exception modal is opened', () => {
         </ThemeProvider>
       );
       const callProps = ExceptionBuilderComponent.mock.calls[0][0];
-      act(() => callProps.onChange({ exceptionItems: [...callProps.exceptionListItems] }));
+      await waitFor(() =>
+        callProps.onChange({ exceptionItems: [...callProps.exceptionListItems] })
+      );
     });
     it('has the add exception button enabled', () => {
       expect(
@@ -198,7 +200,7 @@ describe('When the add exception modal is opened', () => {
 
   describe('when there is alert data passed to a detection list exception', () => {
     let wrapper: ReactWrapper;
-    beforeEach(() => {
+    beforeEach(async () => {
       const alertDataMock: { ecsData: Ecs; nonEcsData: TimelineNonEcsData[] } = {
         ecsData: { _id: 'test-id' },
         nonEcsData: [{ field: 'file.path', value: ['test/path'] }],
@@ -217,7 +219,9 @@ describe('When the add exception modal is opened', () => {
         </ThemeProvider>
       );
       const callProps = ExceptionBuilderComponent.mock.calls[0][0];
-      act(() => callProps.onChange({ exceptionItems: [getExceptionListItemSchemaMock()] }));
+      await waitFor(() =>
+        callProps.onChange({ exceptionItems: [getExceptionListItemSchemaMock()] })
+      );
     });
     it('has the add exception button enabled', () => {
       expect(
@@ -250,7 +254,7 @@ describe('When the add exception modal is opened', () => {
       onChange: (props: { exceptionItems: ExceptionListItemSchema[] }) => void;
       exceptionListItems: ExceptionListItemSchema[];
     };
-    beforeEach(() => {
+    beforeEach(async () => {
       // Mocks the index patterns to contain the pre-populated endpoint fields so that the exception qualifies as bulk closable
       (useFetchIndex as jest.Mock).mockImplementation(() => [
         false,
@@ -285,7 +289,9 @@ describe('When the add exception modal is opened', () => {
         </ThemeProvider>
       );
       callProps = ExceptionBuilderComponent.mock.calls[0][0];
-      act(() => callProps.onChange({ exceptionItems: [...callProps.exceptionListItems] }));
+      await waitFor(() =>
+        callProps.onChange({ exceptionItems: [...callProps.exceptionListItems] })
+      );
     });
     it('has the add exception button enabled', () => {
       expect(
@@ -314,8 +320,8 @@ describe('When the add exception modal is opened', () => {
       ).not.toBeDisabled();
     });
     describe('when a "is in list" entry is added', () => {
-      it('should have the bulk close checkbox disabled', () => {
-        act(() =>
+      it('should have the bulk close checkbox disabled', async () => {
+        await waitFor(() =>
           callProps.onChange({
             exceptionItems: [
               ...callProps.exceptionListItems,

diff --git a/...security_solution/public/common/components/exceptions/edit_exception_modal/index.test.tsx b/...security_solution/public/common/components/exceptions/edit_exception_modal/index.test.tsx
@@ -9,7 +9,6 @@ import { wait as waitFor } from '@testing-library/react';
 import { ThemeProvider } from 'styled-components';
 import { mount, ReactWrapper } from 'enzyme';
 import euiLightVars from '@elastic/eui/dist/eui_theme_light.json';
-import { act } from 'react-dom/test-utils';
 
 import { EditExceptionModal } from './';
 import { useCurrentUser } from '../../../../common/lib/kibana';
@@ -118,7 +117,7 @@ describe('When the edit exception modal is opened', () => {
         );
         const callProps = ExceptionBuilderComponent.mock.calls[0][0];
         await waitFor(() => {
-          act(() => callProps.onChange({ exceptionItems: [...callProps.exceptionListItems] }));
+          callProps.onChange({ exceptionItems: [...callProps.exceptionListItems] });
         });
       });
       it('has the edit exception button enabled', () => {
@@ -163,7 +162,7 @@ describe('When the edit exception modal is opened', () => {
         );
         const callProps = ExceptionBuilderComponent.mock.calls[0][0];
         await waitFor(() => {
-          act(() => callProps.onChange({ exceptionItems: [...callProps.exceptionListItems] }));
+          callProps.onChange({ exceptionItems: [...callProps.exceptionListItems] });
         });
       });
       it('has the edit exception button enabled', () => {
@@ -209,7 +208,7 @@ describe('When the edit exception modal is opened', () => {
       );
       const callProps = ExceptionBuilderComponent.mock.calls[0][0];
       await waitFor(() => {
-        act(() => callProps.onChange({ exceptionItems: [...callProps.exceptionListItems] }));
+        callProps.onChange({ exceptionItems: [...callProps.exceptionListItems] });
       });
     });
     it('has the edit exception button enabled', () => {
@@ -251,7 +250,7 @@ describe('When the edit exception modal is opened', () => {
       );
       const callProps = ExceptionBuilderComponent.mock.calls[0][0];
       await waitFor(() => {
-        act(() => callProps.onChange({ exceptionItems: [...callProps.exceptionListItems] }));
+        callProps.onChange({ exceptionItems: [...callProps.exceptionListItems] });
       });
     });
     it('has the edit exception button disabled', () => {

diff --git a/x-pack/plugins/security_solution/public/common/components/sourcerer/index.test.tsx b/x-pack/plugins/security_solution/public/common/components/sourcerer/index.test.tsx
@@ -20,7 +20,6 @@ import {
 } from '../../mock';
 import { createStore, State } from '../../store';
 import { EuiComboBox, EuiComboBoxOptionOption } from '@elastic/eui';
-import { act } from 'react-dom/test-utils';
 import { wait as waitFor } from '@testing-library/react';
 
 const mockDispatch = jest.fn();
@@ -126,13 +125,11 @@ describe('Sourcerer component', () => {
     expect(true).toBeTruthy();
     wrapper.find(`[data-test-subj="sourcerer-trigger"]`).first().simulate('click');
 
-    await act(async () => {
+    await waitFor(() => {
       ((wrapper.find(EuiComboBox).props() as unknown) as {
         onChange: (a: EuiComboBoxOptionOption[]) => void;
       }).onChange([mockOptions[0], mockOptions[1]]);
-      await waitFor(() => {
-        wrapper.update();
-      });
+      wrapper.update();
     });
     wrapper.find(`[data-test-subj="add-index"]`).first().simulate('click');
 

diff --git a/...security_solution/public/detections/components/value_lists_management_modal/form.test.tsx b/...security_solution/public/detections/components/value_lists_management_modal/form.test.tsx
@@ -5,7 +5,7 @@
  */
 import React, { FormEvent } from 'react';
 import { mount, ReactWrapper } from 'enzyme';
-import { act } from 'react-dom/test-utils';
+import { wait as waitFor } from '@testing-library/react';
 
 import { TestProviders } from '../../../common/mock';
 import { ValueListsForm } from './form';
@@ -24,7 +24,7 @@ const mockSelectFile: <P>(container: ReactWrapper<P>, file: File) => Promise<voi
   file
 ) => {
   const fileChange = container.find('EuiFilePicker').prop('onChange');
-  act(() => {
+  await waitFor(() => {
     if (fileChange) {
       fileChange(({ item: () => file } as unknown) as FormEvent);
     }

diff --git a/...ecurity_solution/public/detections/components/value_lists_management_modal/modal.test.tsx b/...ecurity_solution/public/detections/components/value_lists_management_modal/modal.test.tsx
@@ -6,7 +6,7 @@
 
 import React from 'react';
 import { mount } from 'enzyme';
-import { act } from 'react-dom/test-utils';
+import { wait as waitFor } from '@testing-library/react';
 
 import { getListResponseMock } from '../../../../../lists/common/schemas/response/list_schema.mock';
 import { exportList, useDeleteList, useFindLists, ListSchema } from '../../../shared_imports';
@@ -46,7 +46,6 @@ describe('ValueListsModal', () => {
     );
 
     expect(container.find('EuiModal')).toHaveLength(0);
-    container.unmount();
   });
 
   it('renders modal if showModal is true', () => {
@@ -57,7 +56,6 @@ describe('ValueListsModal', () => {
     );
 
     expect(container.find('EuiModal')).toHaveLength(1);
-    container.unmount();
   });
 
   it('calls onClose when modal is closed', () => {
@@ -71,7 +69,6 @@ describe('ValueListsModal', () => {
     container.find('button[data-test-subj="value-lists-modal-close-action"]').simulate('click');
 
     expect(onClose).toHaveBeenCalled();
-    container.unmount();
   });
 
   it('renders ValueListsForm and an EuiTable', () => {
@@ -83,29 +80,27 @@ describe('ValueListsModal', () => {
 
     expect(container.find('ValueListsForm')).toHaveLength(1);
     expect(container.find('EuiBasicTable')).toHaveLength(1);
-    container.unmount();
   });
 
   describe('modal table actions', () => {
-    it('calls exportList when export is clicked', () => {
+    it('calls exportList when export is clicked', async () => {
       const container = mount(
         <TestProviders>
           <ValueListsModal showModal={true} onClose={jest.fn()} />
         </TestProviders>
       );
 
-      act(() => {
+      await waitFor(() => {
         container
           .find('button[data-test-subj="action-export-value-list"]')
           .first()
           .simulate('click');
-        container.unmount();
       });
 
       expect(exportList).toHaveBeenCalledWith(expect.objectContaining({ listId: 'some-list-id' }));
     });
 
-    it('calls deleteList when delete is clicked', () => {
+    it('calls deleteList when delete is clicked', async () => {
       const deleteListMock = jest.fn();
       (useDeleteList as jest.Mock).mockReturnValue({
         start: deleteListMock,
@@ -117,12 +112,11 @@ describe('ValueListsModal', () => {
         </TestProviders>
       );
 
-      act(() => {
+      await waitFor(() => {
         container
           .find('button[data-test-subj="action-delete-value-list"]')
           .first()
           .simulate('click');
-        container.unmount();
       });
 
       expect(deleteListMock).toHaveBeenCalledWith(expect.objectContaining({ id: 'some-list-id' }));