Wrap methods which affect UI by act in tests

* timers (such as advanceTimersByTime) * clicks Signed-off-by: Taylor Smock <[email protected]>
hotosm · May 31, 2023 · a0e5402 · a0e5402
1 parent 56663d1
commit a0e5402
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 15 deletions.
diff --git a/frontend/src/components/taskSelection/tests/action.test.js b/frontend/src/components/taskSelection/tests/action.test.js
@@ -1,5 +1,5 @@
 import '@testing-library/jest-dom';
-import { screen, waitFor, within } from '@testing-library/react';
+import { act, screen, waitFor, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 import { getProjectSummary } from '../../../network/tests/mockData/projects';
@@ -72,18 +72,18 @@ describe('Task Map Action', () => {
 });
 
 describe('Session Expire Dialogs', () => {
-  beforeEach(() => {
-    jest.useFakeTimers();
+  beforeEach(async () => {
+    await act(() => jest.useFakeTimers());
   });
 
-  afterEach(() => {
-    jest.runOnlyPendingTimers();
+  afterEach(async () => {
+    await act(() => jest.runOnlyPendingTimers());
     jest.useRealTimers();
   });
 
   it('should display modal to notify user session about to expire', async () => {
     setup();
-    jest.advanceTimersByTime(6900000);
+    await act(() => jest.advanceTimersByTime(6900000));
     const extendSessionDialog = screen.getByRole('dialog');
     expect(within(extendSessionDialog).getByRole('heading')).toHaveTextContent(
       messages.sessionAboutToExpireTitle.defaultMessage,
@@ -92,7 +92,7 @@ describe('Session Expire Dialogs', () => {
 
   it('should display modal to notify user session has ended', async () => {
     setup();
-    jest.advanceTimersByTime(7200000);
+    await act(() => jest.advanceTimersByTime(7200000));
     const extendSessionDialog = screen.getByRole('dialog');
     expect(within(extendSessionDialog).getByRole('heading')).toHaveTextContent(
       messages.sessionExpiredTitle.defaultMessage,

diff --git a/frontend/src/components/tests/dropdown.test.js b/frontend/src/components/tests/dropdown.test.js
@@ -4,6 +4,7 @@ import TestRenderer from 'react-test-renderer';
 
 import { CustomButton } from '../button';
 import { Dropdown } from '../dropdown';
+import { act } from '@testing-library/react';
 
 export const createTestDropdown = (options) => {
   const testElement = TestRenderer.create(
@@ -40,10 +41,12 @@ test('dropdown-content is not rendered before the user clicks on the button', ()
 
 test('dropdown-content disappear after click on option', () => {
   const elementInstance = createTestDropdown([{ label: 'English' }, { label: 'Portuguese (pt)' }]);
-  elementInstance.findByType(CustomButton).props.onClick();
-  elementInstance
-    .findAllByProps({ className: 'pa3 nowrap bg-animate bg-white hover-bg-tan' })[0]
-    .children[0].props.onClick();
+  act(() => elementInstance.findByType(CustomButton).props.onClick());
+  act(() =>
+    elementInstance
+      .findAllByProps({ className: 'pa3 nowrap bg-animate bg-white hover-bg-tan' })[0]
+      .children[0].props.onClick(),
+  );
   // dropdown-content should disappear after selecting an option
   expect(() =>
     elementInstance.findByProps({
@@ -62,7 +65,7 @@ test('dropdown behaviour with href props', () => {
     { label: 'B', href: 'http://b.co' },
     { label: 'C', href: 'http://c.co' },
   ]);
-  elementInstance.findByType(CustomButton).props.onClick();
+  act(() => elementInstance.findByType(CustomButton).props.onClick());
   // dropdown-content must be rendered after the click
   expect(
     elementInstance.findByProps({
@@ -99,7 +102,7 @@ test('dropdown behaviour with multi enabled', () => {
     </MemoryRouter>,
   );
   const elementInstance = testElement.root;
-  elementInstance.findByType(CustomButton).props.onClick();
+  act(() => elementInstance.findByType(CustomButton).props.onClick());
   // dropdown-content must be rendered after the click
   expect(
     elementInstance.findByProps({
@@ -132,7 +135,7 @@ test('dropdown with toTop enabled should have bottom-3 class', () => {
     </MemoryRouter>,
   );
   const elementInstance = testElement.root;
-  elementInstance.findByType(CustomButton).props.onClick();
+  act(() => elementInstance.findByType(CustomButton).props.onClick());
   // dropdown-content must be rendered after the click
   expect(
     elementInstance.findByProps({
@@ -169,7 +172,7 @@ test('dropdown with more than 9 options has "h5 overflow-y-scroll" classes', ()
     </MemoryRouter>,
   );
   const elementInstance = testElement.root;
-  elementInstance.findByType(CustomButton).props.onClick();
+  act(() => elementInstance.findByType(CustomButton).props.onClick());
   // dropdown-content must be rendered after the click
   expect(
     elementInstance.findByProps({