test: Improve unit test stability when running locally (#10278)

* Remove calls to "act" to resolve "The current testing environment is not configured to support act" errors * Increase wait timeout to give time for Password input module to load * Clean up test warnings * Resolve RegEx global flag warnings * Remove act * Upgrade to Vitest 1.3.x
linode · Jun 5, 2024 · c2544d1 · c2544d1
1 parent a0c4520
commit c2544d1
Show file tree

Hide file tree

Showing 14 changed files with 222 additions and 215 deletions.
diff --git a/packages/api-v4/package.json b/packages/api-v4/package.json
@@ -67,7 +67,7 @@
     "lint-staged": "^13.2.2",
     "prettier": "~2.2.1",
     "tsup": "^7.2.0",
-    "vitest": "^1.0.1"
+    "vitest": "^1.3.1"
   },
   "lint-staged": {
     "*.{ts,tsx,js}": [

diff --git a/packages/manager/.changeset/pr-10278-tests-1710347078555.md b/packages/manager/.changeset/pr-10278-tests-1710347078555.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Tests
+---
+
+Improve unit test suite stability ([#10278](https://github.com/linode/manager/pull/10278))
diff --git a/packages/manager/package.json b/packages/manager/package.json
@@ -212,7 +212,7 @@
     "ts-node": "^10.9.2",
     "vite": "^5.1.7",
     "vite-plugin-svgr": "^3.2.0",
-    "vitest": "^1.2.0"
+    "vitest": "^1.3.1"
   },
   "browserslist": [
     ">1%",

diff --git a/packages/manager/src/features/Billing/BillingPanels/BillingSummary/BillingSummary.test.tsx b/packages/manager/src/features/Billing/BillingPanels/BillingSummary/BillingSummary.test.tsx
@@ -31,7 +31,7 @@ describe('BillingSummary', () => {
         <BillingSummary balance={0} balanceUninvoiced={5} paymentMethods={[]} />
       </PayPalScriptProvider>
     );
-    within(screen.getByTestId(accountBalanceText)).getByText(/no balance/gi);
+    within(screen.getByTestId(accountBalanceText)).getByText(/no balance/i);
     within(screen.getByTestId(accountBalanceValue)).getByText('$0.00');
   });
 
@@ -45,7 +45,7 @@ describe('BillingSummary', () => {
         />
       </PayPalScriptProvider>
     );
-    within(screen.getByTestId(accountBalanceText)).getByText(/credit/gi);
+    within(screen.getByTestId(accountBalanceText)).getByText(/credit/i);
     within(screen.getByTestId(accountBalanceValue)).getByText('$10.00');
   });
 
@@ -59,7 +59,7 @@ describe('BillingSummary', () => {
         />
       </PayPalScriptProvider>
     );
-    within(screen.getByTestId(accountBalanceText)).getByText(/Balance/gi);
+    within(screen.getByTestId(accountBalanceText)).getByText(/Balance/i);
     within(screen.getByTestId(accountBalanceValue)).getByText('$10.00');
   });
 

diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeSettings/ImageAndPassword.test.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeSettings/ImageAndPassword.test.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-
 import { profileFactory } from 'src/factories';
 import { accountUserFactory } from 'src/factories/accountUsers';
 import { grantsFactory } from 'src/factories/grants';
@@ -26,12 +25,15 @@ describe('ImageAndPassword', () => {
     expect(getByLabelText('Image')).toBeEnabled();
   });
   it('should render a password error if defined', async () => {
-    const passwordError = 'Unable to set password.';
+    const errorMessage = 'Unable to set password.';
     const { findByText } = renderWithTheme(
-      <ImageAndPassword {...props} passwordError={passwordError} />
+      <ImageAndPassword {...props} passwordError={errorMessage} />
     );
 
-    expect(await findByText(passwordError)).toBeVisible();
+    const passwordError = await findByText(errorMessage, undefined, {
+      timeout: 2500,
+    });
+    expect(passwordError).toBeVisible();
   });
   it('should render an SSH Keys section', async () => {
     const { getByText } = renderWithTheme(<ImageAndPassword {...props} />);

diff --git a/...c/features/LoadBalancers/LoadBalancerDetail/Certificates/CreateCertificateDrawer.test.tsx b/...c/features/LoadBalancers/LoadBalancerDetail/Certificates/CreateCertificateDrawer.test.tsx
@@ -7,28 +7,32 @@ import { renderWithTheme } from 'src/utilities/testHelpers';
 import { CreateCertificateDrawer } from './CreateCertificateDrawer';
 
 describe('CreateCertificateDrawer', () => {
-  it('should be submittable when form is filled out correctly', async () => {
-    const onClose = vi.fn();
-
-    const { getByLabelText, getByTestId } = renderWithTheme(
-      <CreateCertificateDrawer
-        loadbalancerId={0}
-        onClose={onClose}
-        open
-        type="downstream"
-      />
-    );
-
-    const labelInput = getByLabelText('Label');
-    const certInput = getByLabelText('TLS Certificate');
-    const keyInput = getByLabelText('Private Key');
-
-    await userEvent.type(labelInput, 'my-cert-0');
-    await userEvent.type(certInput, 'massive cert');
-    await userEvent.type(keyInput, 'massive key');
-
-    await userEvent.click(getByTestId('submit'));
-
-    await waitFor(() => expect(onClose).toBeCalled());
-  });
+  it(
+    'should be submittable when form is filled out correctly',
+    async () => {
+      const onClose = vi.fn();
+
+      const { getByLabelText, getByTestId } = renderWithTheme(
+        <CreateCertificateDrawer
+          loadbalancerId={0}
+          onClose={onClose}
+          open
+          type="downstream"
+        />
+      );
+
+      const labelInput = getByLabelText('Label');
+      const certInput = getByLabelText('TLS Certificate');
+      const keyInput = getByLabelText('Private Key');
+
+      await userEvent.type(labelInput, 'my-cert-0');
+      await userEvent.type(certInput, 'massive cert');
+      await userEvent.type(keyInput, 'massive key');
+
+      await userEvent.click(getByTestId('submit'));
+
+      await waitFor(() => expect(onClose).toBeCalled());
+    },
+    { timeout: 10000 }
+  );
 });
diff --git a/...src/features/LoadBalancers/LoadBalancerDetail/Certificates/EditCertificateDrawer.test.tsx b/...src/features/LoadBalancers/LoadBalancerDetail/Certificates/EditCertificateDrawer.test.tsx
@@ -1,4 +1,4 @@
-import { act, waitFor } from '@testing-library/react';
+import { waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import React from 'react';
 
@@ -82,10 +82,8 @@ describe('EditCertificateDrawer', () => {
     expect(labelInput).toHaveDisplayValue(mockCACertificate.label);
     expect(certInput).toHaveDisplayValue(mockCACertificate.certificate.trim());
 
-    await act(async () => {
-      await userEvent.type(labelInput, 'my-updated-cert-0');
-      await userEvent.click(getByTestId('submit'));
-    });
+    await userEvent.type(labelInput, 'my-updated-cert-0');
+    await userEvent.click(getByTestId('submit'));
 
     await waitFor(() => expect(onClose).toBeCalled());
   });
@@ -105,13 +103,10 @@ describe('EditCertificateDrawer', () => {
     const certInput = getByLabelText('TLS Certificate');
     const keyInput = getByLabelText('Private Key');
 
-    await act(async () => {
-      await userEvent.type(labelInput, 'my-cert-0');
-      await userEvent.type(certInput, 'massive cert');
-      await userEvent.type(keyInput, 'massive key');
-
-      await userEvent.click(getByTestId('submit'));
-    });
+    await userEvent.type(labelInput, 'my-cert-0');
+    await userEvent.type(certInput, 'massive cert');
+    await userEvent.type(keyInput, 'massive key');
+    await userEvent.click(getByTestId('submit'));
 
     await waitFor(() => expect(onClose).toBeCalled());
   });

diff --git a/packages/manager/src/features/Longview/LongviewDetail/DetailTabs/Disks/Graphs.test.tsx b/packages/manager/src/features/Longview/LongviewDetail/DetailTabs/Disks/Graphs.test.tsx
@@ -42,7 +42,7 @@ describe('UI', () => {
     expect(queryByTestId('space-graph')).toBeNull();
     expect(queryByTestId('diskio-graph')).toBeInTheDocument();
 
-    expect(getByText(/gather space and inode data/gim));
+    expect(getByText(/gather space and inode data/im));
   });
 
   it('should not render Disk I/O graph for OpenVZ Configs', () => {
@@ -55,7 +55,7 @@ describe('UI', () => {
     expect(queryByTestId('inodes-graph')).toBeInTheDocument();
     expect(queryByTestId('diskio-graph')).toBeNull();
 
-    expect(getByText(/gather Disk I\/O on OpenVZ Linodes/gim));
+    expect(getByText(/gather Disk I\/O on OpenVZ Linodes/im));
   });
 
   it('should render warning text for ChildOf Disks', () => {
@@ -68,7 +68,7 @@ describe('UI', () => {
     expect(queryByTestId('space-graph')).toBeNull();
     expect(queryByTestId('diskio-graph')).toBeNull();
 
-    expect(getByText(/doesn't gather data on this type of device/gim));
+    expect(getByText(/doesn't gather data on this type of device/im));
   });
 
   it('should render warning text for unmounted disks', () => {
@@ -81,6 +81,6 @@ describe('UI', () => {
     expect(queryByTestId('space-graph')).toBeNull();
     expect(queryByTestId('diskio-graph')).toBeInTheDocument();
 
-    expect(getByText(/gather Space and Inode data on unmounted disks/gim));
+    expect(getByText(/gather Space and Inode data on unmounted disks/im));
   });
 });
diff --git a/packages/manager/src/features/Longview/LongviewLanding/LongviewLanding.test.tsx b/packages/manager/src/features/Longview/LongviewLanding/LongviewLanding.test.tsx
@@ -107,9 +107,10 @@ describe('Longview clients list view', () => {
     expect(props.getLongviewClients).toHaveBeenCalledTimes(1);
   });
 
-  it('should have an Add Client button', () => {
-    const { queryByText } = renderWithTheme(<LongviewLanding {...props} />);
-    expect(queryByText('Add Client')).toBeInTheDocument();
+  it('should have an Add Client button', async () => {
+    const { findByText } = renderWithTheme(<LongviewLanding {...props} />);
+    const addButton = await findByText('Add Client');
+    expect(addButton).toBeInTheDocument();
   });
 
   it('should attempt to add a new client when the Add Client button is clicked', async () => {

diff --git a/packages/manager/src/features/PlacementGroups/PlacementGroupsDeleteModal.test.tsx b/packages/manager/src/features/PlacementGroups/PlacementGroupsDeleteModal.test.tsx
@@ -1,13 +1,11 @@
-import { act, fireEvent } from '@testing-library/react';
 import * as React from 'react';
 
+import { userEvent } from '@testing-library/user-event';
 import { linodeFactory, placementGroupFactory } from 'src/factories';
 import { renderWithTheme } from 'src/utilities/testHelpers';
 
 import { PlacementGroupsDeleteModal } from './PlacementGroupsDeleteModal';
 
-import type { RenderResult } from '@testing-library/react';
-
 const queryMocks = vi.hoisted(() => ({
   useDeletePlacementGroup: vi.fn().mockReturnValue({
     mutateAsync: vi.fn().mockResolvedValue({}),
@@ -31,36 +29,31 @@ const props = {
 
 describe('PlacementGroupsDeleteModal', () => {
   it('should render the right form elements', async () => {
-    let renderResult: RenderResult;
-    await act(async () => {
-      renderResult = renderWithTheme(
-        <PlacementGroupsDeleteModal
-          {...props}
-          linodes={[
-            linodeFactory.build({
-              id: 1,
-              label: 'test-linode',
-              region: 'us-east',
-            }),
-          ]}
-          selectedPlacementGroup={placementGroupFactory.build({
-            affinity_type: 'anti_affinity:local',
+    const { getByRole, getByTestId, getByText } = renderWithTheme(
+      <PlacementGroupsDeleteModal
+        {...props}
+        linodes={[
+          linodeFactory.build({
             id: 1,
-            label: 'PG-to-delete',
-            members: [
-              {
-                is_compliant: true,
-                linode_id: 1,
-              },
-            ],
+            label: 'test-linode',
             region: 'us-east',
-          })}
-          disableUnassignButton={false}
-        />
-      );
-    });
-
-    const { getByRole, getByTestId, getByText } = renderResult!;
+          }),
+        ]}
+        selectedPlacementGroup={placementGroupFactory.build({
+          affinity_type: 'anti_affinity:local',
+          id: 1,
+          label: 'PG-to-delete',
+          members: [
+            {
+              is_compliant: true,
+              linode_id: 1,
+            },
+          ],
+          region: 'us-east',
+        })}
+        disableUnassignButton={false}
+      />
+    );
 
     expect(
       getByRole('heading', {
@@ -80,41 +73,36 @@ describe('PlacementGroupsDeleteModal', () => {
   });
 
   it("should be enabled when there's no assigned linodes", async () => {
-    let renderResult: RenderResult;
-    await act(async () => {
-      renderResult = renderWithTheme(
-        <PlacementGroupsDeleteModal
-          {...props}
-          linodes={[
-            linodeFactory.build({
-              id: 1,
-              label: 'test-linode',
-              region: 'us-east',
-            }),
-          ]}
-          selectedPlacementGroup={placementGroupFactory.build({
-            affinity_type: 'anti_affinity:local',
+    const { getByRole, getByTestId } = renderWithTheme(
+      <PlacementGroupsDeleteModal
+        {...props}
+        linodes={[
+          linodeFactory.build({
             id: 1,
-            label: 'PG-to-delete',
-            members: [],
-          })}
-          disableUnassignButton={false}
-        />
-      );
-    });
-
-    const { getByRole, getByTestId } = renderResult!;
+            label: 'test-linode',
+            region: 'us-east',
+          }),
+        ]}
+        selectedPlacementGroup={placementGroupFactory.build({
+          affinity_type: 'anti_affinity:local',
+          id: 1,
+          label: 'PG-to-delete',
+          members: [],
+        })}
+        disableUnassignButton={false}
+      />
+    );
 
     const textField = getByTestId('textfield-input');
     const deleteButton = getByRole('button', { name: 'Delete' });
 
     expect(textField).toBeEnabled();
     expect(deleteButton).toBeDisabled();
 
-    fireEvent.change(textField, { target: { value: 'PG-to-delete' } });
+    await userEvent.type(textField, 'PG-to-delete');
 
     expect(deleteButton).toBeEnabled();
-    fireEvent.click(deleteButton);
+    await userEvent.click(deleteButton);
 
     expect(queryMocks.useDeletePlacementGroup).toHaveBeenCalled();
   });