refactor: fixed tests

src/Collapsible/Collapsible.test.jsx

@@ -74,25 +74,22 @@ describe('<Collapsible />', () => {
   });
 
   describe('Imperative Methods', () => {
-    const wrapper = mount(<Collapsible.Advanced>{collapsibleContent}</Collapsible.Advanced>);
-    const collapsible = wrapper.instance();
+    const wrapper = mount(
+      <Collapsible.Advanced>{collapsibleContent}</Collapsible.Advanced>,
+    );
 
     collapsibleIsClosed(wrapper);
 
-    it('opens on .open()', async () => {
-      await act(() => {
-        collapsible.open();
-        wrapper.update();
-        collapsibleIsOpen(wrapper);
-      });
+    it('opens on .open()', () => {
+      wrapper.setProps({ open: true });
+      wrapper.update();
+      collapsibleIsOpen(wrapper);
     });
 
-    it('closes on .close()', async () => {
-      await act(() => {
-        collapsible.close();
-        wrapper.update();
-        collapsibleIsClosed(wrapper);
-      });
+    it('closes on .close()', () => {
+      wrapper.setProps({ open: false });
+      wrapper.update();
+      collapsibleIsClosed(wrapper);
     });
     it('correct behavior with unmountOnExit', async () => {
       let i = 0;

src/DataTable/tests/BulkActions.test.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { mount } from 'enzyme';
 import classNames from 'classnames';
+import { waitFor } from '@testing-library/react';
 
 import BulkActions from '../BulkActions';
 import {
@@ -173,18 +174,19 @@ describe('<BulkActions />', () => {
       expect(buttons.length).toEqual(2);
       expect(buttons.get(1).props.variant).toEqual('brand');
     });
-    it('displays the user\'s second button as an outline button', () => {
-      const wrapper = mount(<BulkActionsWrapper />);
-      waitForComponentToPaint(wrapper);
-      const buttons = wrapper.find(Button);
-      expect(buttons.get(0).props.variant).toEqual('outline-primary');
+    it('displays the user\'s second button as an outline button', async () => {
+      await waitFor(() => {
+        const wrapper = mount(<BulkActionsWrapper />);
+        const buttons = wrapper.find(Button);
+        expect(buttons.get(0).props.variant).toEqual('outline-primary');
+      });
     });
     describe('overflow menu', () => {
       const onClickSpy = jest.fn();
       const itemClassName = 'itemClickTest';
       let wrapper;
       let overflowButton;
-      beforeEach(() => {
+      beforeEach(async() => {
         wrapper = mount(
           <BulkActionsWrapper
             value={{
@@ -194,10 +196,11 @@ describe('<BulkActions />', () => {
             }}
           />,
         );
-        waitForComponentToPaint(wrapper);
-        // the overflow toggle button is the first button
-        overflowButton = wrapper.find(IconButton);
-        overflowButton.simulate('click');
+        await waitFor(() => {
+          // the overflow toggle button is the first button
+          overflowButton = wrapper.find(IconButton);
+          overflowButton.simulate('click');
+        });
       });
       afterEach(() => {
         onClickSpy.mockClear();

src/DataTable/tests/TableActions.test.jsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { mount } from 'enzyme';
 import classNames from 'classnames';
 
+import { waitFor } from '@testing-library/react';
 import TableActions from '../TableActions';
 import {
   ACTION_OVERFLOW_BUTTON_TEXT, SMALL_SCREEN_ACTION_OVERFLOW_BUTTON_TEXT,
@@ -143,30 +144,32 @@ describe('<TableActions />', () => {
       expect(buttons.length).toEqual(2);
       expect(buttons.get(1).props.variant).toEqual('brand');
     });
-    it('displays the user\'s second button as an outline button', () => {
-      const wrapper = mount(<TableActionsWrapper />);
-      waitForComponentToPaint(wrapper);
-      const buttons = wrapper.find(Button);
-      expect(buttons.get(0).props.variant).toEqual('outline-primary');
+    it('displays the user\'s second button as an outline button', async () => {
+      await waitFor(() => {
+        const wrapper = mount(<TableActionsWrapper />);
+        const buttons = wrapper.find(Button);
+        expect(buttons.get(0).props.variant).toEqual('outline-primary');
+      });
     });
     describe('overflow menu', () => {
       const onClickSpy = jest.fn();
       const itemClassName = 'itemClickTest';
       let tableInstance;
       let wrapper;
       let overflowButton;
-      beforeEach(() => {
+      beforeEach(async () => {
         tableInstance = {
           ...instance,
           tableActions: [...instance.tableActions, <FirstAction onClick={onClickSpy} className={itemClassName} />],
         };
         wrapper = mount(
           <TableActionsWrapper value={tableInstance} />,
         );
-        waitForComponentToPaint(wrapper);
-        // the overflow toggle button is the first button
-        overflowButton = wrapper.find(IconButton);
-        overflowButton.simulate('click');
+        await waitFor(() => {
+          // the overflow toggle button is the first button
+          overflowButton = wrapper.find(IconButton);
+          overflowButton.simulate('click');
+        });
       });
       afterEach(() => {
         onClickSpy.mockClear();

src/Dropdown/deprecated/Dropdown.test.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { mount } from 'enzyme';
 import renderer from 'react-test-renderer';
+import { waitFor } from '@testing-library/react';
 
 import Dropdown from './index';
 import Icon from '../../Icon';
@@ -86,12 +87,14 @@ describe('<Dropdown />', () => {
       expect(menuTrigger.is(':focus')).toBe(true);
     });
 
-    it('closes on document click when open', () => {
+    it('closes on document click when open', async () => {
       menuTrigger.simulate('click'); // Open
       menuOpen(true, wrapper);
       document.dispatchEvent(new MouseEvent('click'));
-      wrapper.update(); // Let react re-render
-      menuOpen(false, wrapper);
+      await waitFor(() => {
+        wrapper.update(); // Let react re-render
+        menuOpen(false, wrapper);
+      });
     });
   });