waits for specific test assertions

user-interviews · Apr 5, 2024 · 7eb5933 · 7eb5933
1 parent 478e12e
commit 7eb5933
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 20 deletions.
diff --git a/src/Drawer/Drawer.test.jsx b/src/Drawer/Drawer.test.jsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import propTypes from 'prop-types';
 
-import { render, screen } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 import Drawer from './Drawer';
@@ -188,14 +188,15 @@ describe('Drawer', () => {
         expect(elements.drawerOverlay.get().classList).toContain('DrawerBackgroundOverlay--active');
       });
 
-      it('calls onRequestClose when pressing ESC key', () => {
+      it('calls onRequestClose when pressing ESC key', async () => {
         const onRequestClose = jest.fn();
 
         render(<SetupDrawerWithChildren visible onRequestClose={onRequestClose} />);
 
         userEvent.keyboard('{Escape}');
-
-        expect(onRequestClose).toHaveBeenCalled();
+        await waitFor(() => {
+          expect(onRequestClose).toHaveBeenCalled();
+        });
       });
 
       it('body tag has Drawer--open', () => {
@@ -233,15 +234,16 @@ describe('Drawer', () => {
       });
 
       describe('when user clicks on drawerOne toggle visibility button', () => {
-        it('body tag does not have Drawer--open after click', () => {
+        it('body tag does not have Drawer--open after click', async () => {
           const { container } = render(<SetupMultipleDrawers drawerOneVisibleDefault />);
           const body = container.closest('body');
 
           expect(body.classList).toContain('Drawer--open');
 
           userEvent.click(elements.drawerOneToggleVisibilityButton.get());
-
-          expect(body.classList).not.toContain('Drawer--open');
+          await waitFor(() => {
+            expect(body.classList).not.toContain('Drawer--open');
+          });
         });
       });
     });
@@ -255,15 +257,16 @@ describe('Drawer', () => {
       });
 
       describe('when user clicks on drawerOne toggle visibility button', () => {
-        it('body tag has Drawer--open after click', () => {
+        it('body tag has Drawer--open after click', async () => {
           const { container } = render(<SetupMultipleDrawers />);
           const body = container.closest('body');
 
           expect(body.classList).not.toContain('Drawer--open');
 
           userEvent.click(elements.drawerOneToggleVisibilityButton.get());
-
-          expect(body.classList).toContain('Drawer--open');
+          await waitFor(() => {
+            expect(body.classList).toContain('Drawer--open');
+          });
         });
       });
     });

diff --git a/src/Drawer/DrawerFooter.test.jsx b/src/Drawer/DrawerFooter.test.jsx
@@ -1,4 +1,4 @@
-import { render, screen } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
 import React from 'react';
 import userEvent from '@testing-library/user-event';
 import { DrawerFooter } from './index';
@@ -9,7 +9,7 @@ describe('DrawerFooter', () => {
   );
 
   describe('primary action button', () => {
-    it('calls the onPrimaryAction callback when clicked', () => {
+    it('calls the onPrimaryAction callback when clicked', async () => {
       const onPrimaryActionMock = jest.fn();
 
       renderDrawerFooter({
@@ -19,7 +19,9 @@ describe('DrawerFooter', () => {
 
       userEvent.click(screen.getByRole('button', { name: 'Primary Action' }));
 
-      expect(onPrimaryActionMock).toHaveBeenCalled();
+      await waitFor(() => {
+        expect(onPrimaryActionMock).toHaveBeenCalled();
+      });
     });
   });
 });
diff --git a/src/Tabs/Tabs.test.tsx b/src/Tabs/Tabs.test.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, screen } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 import { Tab, Tabs } from './index';
@@ -64,7 +64,7 @@ describe('Tabs', () => {
       expect(screen.getByText(tabTwoContent)).not.toHaveClass('active');
     });
 
-    it('shows the tab content when clicked', () => {
+    it('shows the tab content when clicked', async () => {
       renderTabs(uncontrolledProps);
 
       expect(screen.getByText(tabOneContent)).toHaveClass('active');
@@ -73,8 +73,9 @@ describe('Tabs', () => {
       const tabTwoButton = screen.getByRole('tab', { name: tabTwoTitle });
 
       userEvent.click(tabTwoButton);
-
-      expect(tabTwoButton).toHaveClass('active');
+      await waitFor(() => {
+        expect(tabTwoButton).toHaveClass('active');
+      });
 
       expect(screen.getByText(tabOneContent)).not.toHaveClass('active');
       expect(screen.getByText(tabTwoContent)).toHaveClass('active');
@@ -93,7 +94,7 @@ describe('Tabs', () => {
       expect(screen.getByText(tabTwoContent)).not.toHaveClass('active');
     });
 
-    it('shows the tab content when clicked', () => {
+    it('shows the tab content when clicked', async () => {
       renderTabs(controlledProps);
 
       expect(screen.getByText(tabOneContent)).toHaveClass('active');
@@ -102,8 +103,9 @@ describe('Tabs', () => {
       const tabTwoButton = screen.getByRole('tab', { name: tabTwoTitle });
 
       userEvent.click(tabTwoButton);
-
-      expect(onSelectMock).toHaveBeenCalled();
+      await waitFor(() => {
+        expect(onSelectMock).toHaveBeenCalled();
+      });
     });
   });
 });