Fix use act warnings

andrewbaldwin44 · Dec 3, 2023 · 3faf1e0 · 3faf1e0
1 parent 0c7bed0
commit 3faf1e0
Show file tree

Hide file tree

Showing 8 changed files with 104 additions and 90 deletions.
diff --git a/locust/webui/src/components/StateButtons/tests/ResetButton.test.tsx b/locust/webui/src/components/StateButtons/tests/ResetButton.test.tsx
@@ -1,4 +1,4 @@
-import { fireEvent, waitFor } from '@testing-library/react';
+import { act, fireEvent } from '@testing-library/react';
 import { beforeAll, afterAll, describe, test, expect, vi } from 'vitest';
 
 import ResetButton from 'components/StateButtons/ResetButton';
@@ -18,11 +18,11 @@ describe('ResetButton', () => {
   test('should call resetStats on ResetButton click', async () => {
     const { getByText } = renderWithProvider(<ResetButton />);
 
-    fireEvent.click(getByText('Reset'));
-
-    await waitFor(() => {
-      expect(resetStats).toHaveBeenCalled();
-      expect(resetStats).toBeCalledWith('stats/reset');
+    act(() => {
+      fireEvent.click(getByText('Reset'));
     });
+
+    expect(resetStats).toHaveBeenCalled();
+    expect(resetStats).toBeCalledWith('stats/reset');
   });
 });
diff --git a/locust/webui/src/components/StateButtons/tests/StopButton.test.tsx b/locust/webui/src/components/StateButtons/tests/StopButton.test.tsx
@@ -1,4 +1,4 @@
-import { fireEvent, waitFor } from '@testing-library/react';
+import { act, fireEvent } from '@testing-library/react';
 import { beforeAll, afterAll, describe, test, expect, vi } from 'vitest';
 
 import StopButton from 'components/StateButtons/StopButton';
@@ -18,14 +18,15 @@ describe('StopButton', () => {
   test('should stop run on StopButton click', async () => {
     const { getByText, queryByText, rerender } = renderWithProvider(<StopButton />);
 
-    fireEvent.click(getByText('Stop'));
+    act(() => {
+      fireEvent.click(getByText('Stop'));
+    });
+
     expect(getByText('Loading')).toBeTruthy();
 
-    await waitFor(() => {
-      expect(resetStats).toHaveBeenCalled();
-      expect(resetStats).toBeCalledWith('stop');
-      rerender(<StopButton />);
-      expect(queryByText('Loading')).toBeFalsy();
-    });
+    expect(resetStats).toHaveBeenCalled();
+    expect(resetStats).toBeCalledWith('stop');
+    rerender(<StopButton />);
+    expect(queryByText('Loading')).toBeFalsy();
   });
 });
diff --git a/locust/webui/src/components/SwarmForm/tests/SwarmEditForm.test.tsx b/locust/webui/src/components/SwarmForm/tests/SwarmEditForm.test.tsx
@@ -1,4 +1,4 @@
-import { fireEvent, waitFor } from '@testing-library/react';
+import { act, fireEvent, waitFor } from '@testing-library/react';
 import { http } from 'msw';
 import { setupServer } from 'msw/node';
 import { afterEach, afterAll, beforeAll, describe, test, expect, vi } from 'vitest';
@@ -25,12 +25,16 @@ describe('SwarmEditForm', () => {
     const onSubmit = vi.fn();
     const { getByText, getByLabelText } = renderWithProvider(<SwarmEditForm onSubmit={onSubmit} />);
 
-    fireEvent.change(getByLabelText('Number of users (peak concurrency)'), {
-      target: { value: '5' },
-    });
-    fireEvent.change(getByLabelText('Ramp Up (users started/second)'), { target: { value: '10' } });
+    act(() => {
+      fireEvent.change(getByLabelText('Number of users (peak concurrency)'), {
+        target: { value: '5' },
+      });
+      fireEvent.change(getByLabelText('Ramp Up (users started/second)'), {
+        target: { value: '10' },
+      });
 
-    fireEvent.click(getByText('Update Swarm'));
+      fireEvent.click(getByText('Update Swarm'));
+    });
 
     await waitFor(async () => {
       expect(onSubmit).toHaveBeenCalled();

diff --git a/locust/webui/src/components/SwarmForm/tests/SwarmForm.test.tsx b/locust/webui/src/components/SwarmForm/tests/SwarmForm.test.tsx
@@ -1,4 +1,4 @@
-import { fireEvent, waitFor } from '@testing-library/react';
+import { act, fireEvent, waitFor } from '@testing-library/react';
 import { http } from 'msw';
 import { setupServer } from 'msw/node';
 import { afterEach, afterAll, beforeAll, describe, test, expect, vi } from 'vitest';
@@ -28,7 +28,9 @@ describe('SwarmForm', () => {
   test('should submit form data with default values on button click', async () => {
     const { getByText } = renderWithProvider(<SwarmForm />);
 
-    fireEvent.click(getByText('Start Swarm'));
+    act(() => {
+      fireEvent.click(getByText('Start Swarm'));
+    });
 
     await waitFor(async () => {
       const submittedData = startSwarm.mock.calls[0][0];
@@ -54,25 +56,28 @@ describe('SwarmForm', () => {
       },
     });
 
-    fireEvent.change(getByLabelText('User Classes'), {
-      target: { value: 'Class1' },
-    });
-    fireEvent.change(getByLabelText('Shape Class'), {
-      target: { value: 'Shape1' },
-    });
-    fireEvent.change(getByLabelText('Number of users (peak concurrency)'), {
-      target: { value: '15' },
-    });
-    fireEvent.change(getByLabelText('Ramp Up (users started/second)'), {
-      target: { value: '20' },
-    });
-    fireEvent.change(getByLabelText('Run time (e.g. 20, 20s, 3m, 2h, 1h20m, 3h30m10s, etc.)'), {
-      target: { value: '2h' },
-    });
-    fireEvent.change(getByLabelText('Host'), {
-      target: { value: 'https://localhost:5000' },
+    act(() => {
+      fireEvent.change(getByLabelText('User Classes'), {
+        target: { value: 'Class1' },
+      });
+      fireEvent.change(getByLabelText('Shape Class'), {
+        target: { value: 'Shape1' },
+      });
+      fireEvent.change(getByLabelText('Number of users (peak concurrency)'), {
+        target: { value: '15' },
+      });
+      fireEvent.change(getByLabelText('Ramp Up (users started/second)'), {
+        target: { value: '20' },
+      });
+      fireEvent.change(getByLabelText('Run time (e.g. 20, 20s, 3m, 2h, 1h20m, 3h30m10s, etc.)'), {
+        target: { value: '2h' },
+      });
+      fireEvent.change(getByLabelText('Host'), {
+        target: { value: 'https://localhost:5000' },
+      });
+
+      fireEvent.click(getByText('Start Swarm'));
     });
-    fireEvent.click(getByText('Start Swarm'));
 
     await waitFor(async () => {
       const submittedData = startSwarm.mock.calls[0][0];
@@ -117,9 +122,11 @@ describe('SwarmForm', () => {
       },
     });
 
-    fireEvent.click(getByText('Start Swarm'));
+    act(() => {
+      fireEvent.click(getByText('Start Swarm'));
+    });
 
-    await waitFor(async () => {
+    await waitFor(() => {
       const submittedData = startSwarm.mock.calls[0][0];
 
       if (submittedData) {
@@ -165,14 +172,16 @@ describe('SwarmForm', () => {
     const textField = getByLabelText(toTitleCase(customFieldName));
     const selectField = getByLabelText(toTitleCase(customChoiceFieldName));
 
-    fireEvent.change(textField, {
-      target: { value: 'Changed text value' },
-    });
-    fireEvent.change(selectField, {
-      target: { value: 'Option2' },
-    });
+    act(() => {
+      fireEvent.change(textField, {
+        target: { value: 'Changed text value' },
+      });
+      fireEvent.change(selectField, {
+        target: { value: 'Option2' },
+      });
 
-    fireEvent.click(getByText('Start Swarm'));
+      fireEvent.click(getByText('Start Swarm'));
+    });
 
     await waitFor(async () => {
       const submittedData = startSwarm.mock.calls[0][0];

diff --git a/locust/webui/src/components/Tabs/Tabs.test.tsx b/locust/webui/src/components/Tabs/Tabs.test.tsx
@@ -1,8 +1,9 @@
+import { act } from '@testing-library/react';
 import { test, describe, expect } from 'vitest';
 
 import Tabs from 'components/Tabs/Tabs';
 import { baseTabs, conditionalTabs } from 'components/Tabs/Tabs.constants';
-import { renderWithProvider, rerenderWithProvider } from 'test/testUtils';
+import { renderWithProvider } from 'test/testUtils';
 import { getUrlParams } from 'utils/url';
 
 describe('Tabs', () => {
@@ -45,14 +46,15 @@ describe('Tabs', () => {
   });
 
   test('appends the current tab to url query and url state and changes view on tab click', () => {
-    const { getByText, rerender, store } = renderWithProvider(<Tabs />);
+    const { getByText, store } = renderWithProvider(<Tabs />);
 
     const tabToSelect = baseTabs[2].title;
     const tabState = { tab: baseTabs[2].key };
     const tabElement = getByText(tabToSelect);
 
-    tabElement.click();
-    rerenderWithProvider(rerender, <Tabs />);
+    act(() => {
+      tabElement.click();
+    });
 
     expect(getUrlParams()).toEqual(tabState);
     expect(store.getState().url.query).toEqual(tabState);

diff --git a/locust/webui/src/hooks/tests/useSortByField.test.tsx b/locust/webui/src/hooks/tests/useSortByField.test.tsx
@@ -1,4 +1,4 @@
-import { render } from '@testing-library/react';
+import { act, render } from '@testing-library/react';
 import { describe, expect, test } from 'vitest';
 
 import useSortByField from 'hooks/useSortByField';
@@ -79,32 +79,32 @@ describe('useSortByField', () => {
   });
 
   test('should update the currentSortField and sort the stats by specified sortKey', () => {
-    const { getByTestId, rerender } = render(<MockHook />);
-
-    getByTestId('sortedByNumRequests').click();
+    const { getByTestId } = render(<MockHook />);
 
-    rerender(<MockHook />);
+    act(() => {
+      getByTestId('sortedByNumRequests').click();
+    });
 
     expect(getByTestId('sortedStats').textContent).toBe(
       JSON.stringify([mockStats[0], mockStats[1], mockStats[2]]),
     );
 
-    getByTestId('sortedByNumFailures').click();
-
-    rerender(<MockHook />);
+    act(() => {
+      getByTestId('sortedByNumFailures').click();
+    });
 
     expect(getByTestId('sortedStats').textContent).toBe(
       JSON.stringify([mockStats[2], mockStats[0], mockStats[1]]),
     );
   });
 
   test('should sort the stats in reverse on 2nd click', () => {
-    const { getByTestId, rerender } = render(<MockHook />);
-
-    getByTestId('sortedByNumRequests').click();
-    getByTestId('sortedByNumRequests').click();
+    const { getByTestId } = render(<MockHook />);
 
-    rerender(<MockHook />);
+    act(() => {
+      getByTestId('sortedByNumRequests').click();
+      getByTestId('sortedByNumRequests').click();
+    });
 
     expect(getByTestId('sortedStats').textContent).toBe(
       JSON.stringify([mockStats[2], mockStats[1], mockStats[0]]),
@@ -113,16 +113,16 @@ describe('useSortByField', () => {
   });
 
   test('should clear the currentSortField and sort the stats by defaultSortKey on 3rd click', () => {
-    const { getByTestId, rerender } = render(<MockHook />);
-
-    getByTestId('sortedByNumRequests').click();
-    getByTestId('sortedByNumRequests').click();
-
-    rerender(<MockHook />);
+    const { getByTestId } = render(<MockHook />);
 
-    getByTestId('sortedByNumRequests').click();
+    act(() => {
+      getByTestId('sortedByNumRequests').click();
+      getByTestId('sortedByNumRequests').click();
+    });
 
-    rerender(<MockHook />);
+    act(() => {
+      getByTestId('sortedByNumRequests').click();
+    });
 
     expect(getByTestId('sortedStats').textContent).toBe(JSON.stringify(mockStats));
     expect(getByTestId('currentSortField').textContent).toBe('');

diff --git a/locust/webui/src/hooks/tests/useSwarmUi.test.tsx b/locust/webui/src/hooks/tests/useSwarmUi.test.tsx
@@ -1,4 +1,4 @@
-import { waitFor } from '@testing-library/react';
+import { act, waitFor } from '@testing-library/react';
 import { http, HttpResponse } from 'msw';
 import { setupServer } from 'msw/node';
 import { beforeAll, afterEach, afterAll, describe, expect, test, vi } from 'vitest';
@@ -54,13 +54,21 @@ describe('useSwarmUi', () => {
       },
     });
 
-    store.dispatch(swarmActions.setSwarm({ state: SWARM_STATE.RUNNING }));
+    act(() => {
+      store.dispatch(swarmActions.setSwarm({ state: SWARM_STATE.RUNNING }));
+    });
+
+    vi.advanceTimersByTime(2000);
 
-    await vi.advanceTimersByTimeAsync(2000);
-    const testStartTime = new Date().toLocaleTimeString();
+    waitFor(() => {
+      const testStartTime = new Date().toLocaleTimeString();
 
-    expect((store.getState().ui.charts as ICharts).markers).toEqual([testStopTime, testStartTime]);
+      expect((store.getState().ui.charts as ICharts).markers).toEqual([
+        testStopTime,
+        testStartTime,
+      ]);
 
-    vi.useRealTimers();
+      vi.useRealTimers();
+    });
   });
 });
diff --git a/locust/webui/src/test/testUtils.tsx b/locust/webui/src/test/testUtils.tsx
@@ -22,13 +22,3 @@ export const renderWithProvider = (Component: React.ReactElement, initialState =
     store,
   };
 };
-
-export const rerenderWithProvider = (
-  rerender: (ui: React.ReactElement) => void,
-  Component: React.ReactElement,
-  initialState = {},
-) => {
-  const store = createStore(initialState);
-
-  rerender(<Provider store={store}>{Component}</Provider>);
-};