Claude-backed review of why some tests are slower since migrating to vitest. This simplifies things a lot.

Author: joncombe

.github/workflows/pr.yml

@@ -56,5 +56,13 @@ jobs:
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
 
+      - name: Restore Vitest cache
+        uses: actions/cache@v4
+        with:
+          path: node_modules/.vite
+          key: vitest-${{ runner.os }}-${{ hashFiles('pnpm-lock.yaml') }}-${{ hashFiles('vitest.config.ts', 'vite.config.base.ts') }}
+          restore-keys: |
+            vitest-${{ runner.os }}-${{ hashFiles('pnpm-lock.yaml') }}-
+
       - name: Run component tests
         run: pnpm test

__mocks__/react-router-dom.tsx

@@ -1,11 +1,12 @@
 import React, { PropsWithChildren } from 'react';
+import type { Mock } from 'vitest';
 
-export const navigateMock = vi.fn();
+export const navigateMock: Mock = vi.fn();
 
-export const useLocation = vi.fn();
-export const useRouteMatch = vi.fn();
-export const useNavigate = () => navigateMock;
-export const useParams = vi.fn();
+export const useLocation: Mock = vi.fn();
+export const useRouteMatch: Mock = vi.fn();
+export const useNavigate = (): Mock => navigateMock;
+export const useParams: Mock = vi.fn();
 export const withRouter = (children: React.ReactNode) => children;
 export const Route = ({
   path = 'index',

eslint.config.mjs

@@ -46,8 +46,7 @@ export default [
       globals: {
         ...globals.browser,
         ...globals.node,
-        ...globals.jest,
-        expect: true,
+        ...globals.vitest,
         __DEV__: true,
       },
 

jest.config.js

@@ -97,12 +97,6 @@
     "test:ui": "vitest --ui",
     "lint": "eslint --cache --ext=.ts --ext=.tsx src/"
   },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
-  },
   "browserslist": {
     "production": [
       ">0.2%",

package.json

@@ -33,21 +33,12 @@ const mockNodeStatus = (rows: [][]) => {
 };
 
 describe('ClusterHealthManager', () => {
-  beforeAll(() => {
-    server.listen();
-  });
-
   afterEach(() => {
-    server.resetHandlers();
     act(() => {
       useClusterHealthStore.setState({ clusterHealth: {} });
     });
   });
 
-  afterAll(() => {
-    server.close();
-  });
-
   describe('load', () => {
     it('populates the store with load data when nodes are available', async () => {
       setup();

src/components/ClusterHealthManager/ClusterHealthManager.test.tsx

@@ -1,5 +1,5 @@
 import CopyToClipboard, { CopyToClipboardProps } from './CopyToClipboard';
-import { expectAntdMessage, flushAntdPortals, render, screen } from 'test/testUtils';
+import { expectAntdMessage, render, screen, withAntdPortalCleanup } from 'test/testUtils';
 
 const defaultProps: CopyToClipboardProps = {
   textToCopy: 'example-string',
@@ -15,10 +15,6 @@ const setup = (props: Partial<CopyToClipboardProps> = {}) => {
 };
 
 describe('the CopyToClipboard component', () => {
-  afterEach(async () => {
-    await flushAntdPortals();
-  });
-
   it('displays the child contents', () => {
     setup();
 
@@ -32,6 +28,8 @@ describe('the CopyToClipboard component', () => {
   });
 
   describe('when the user clicks the button', () => {
+    withAntdPortalCleanup();
+
     it('copies the text to the clipboard', async () => {
       const { user } = setup();
       const writeTextMock = vi

src/components/CopyToClipboard/CopyToClipboard.test.tsx

@@ -1,20 +1,18 @@
-import { disableConsole, flushAntdPortals, render, screen, waitFor } from 'test/testUtils';
+import { disableConsole, render, screen, waitFor, withAntdPortalCleanup } from 'test/testUtils';
 import NotificationHandler from './NotificationHandler';
 import useSessionStore from 'state/session';
 
 const setup = () => render(<NotificationHandler />);
 
 describe('The NotificationHandler component', () => {
+  withAntdPortalCleanup();
+
   beforeAll(() => {
     // disabled the console here as the notifications code will be
     // refactored entirely in the near future
     disableConsole('error');
   });
 
-  afterEach(async () => {
-    await flushAntdPortals();
-  });
-
   it('renders nothing if there is no notification to show', () => {
     const { container } = setup();
 

src/components/NotificationHandler/NotificationHandler.test.tsx

@@ -1,18 +1,14 @@
 import { notification } from 'antd';
-import { actWithFakeTimers, disableConsole } from 'test/testUtils';
+import { actWithFakeTimers } from 'test/testUtils';
 import { infoNotification } from './notificationPresets';
 
 describe('the notification presets', () => {
-  const notificationSpy = vi.spyOn(notification, 'open');
-
-  beforeAll(() => {
-    // disabled the console here as the notifications code will be
-    // refactored entirely in the near future
-    disableConsole('error');
+  const notificationSpy = vi.spyOn(notification, 'open').mockImplementation(() => {
+    // Config-only tests — no portal render (avoids rc-motion act() warnings).
   });
 
   afterEach(() => {
-    notificationSpy.mockReset();
+    notificationSpy.mockClear();
   });
 
   afterAll(() => {

src/components/NotificationHandler/notificationPresets.test.tsx

@@ -7,7 +7,7 @@ import {
 } from 'test/__mocks__/query';
 import { useSchemaTreeMock } from 'test/__mocks__/useSchemaTreeMock';
 import { act } from 'react';
-import { flushAntdPortals, render, screen, waitFor, within } from 'test/testUtils';
+import { render, screen, waitFor, withAntdPortalCleanup, within } from 'test/testUtils';
 import SQLEditorSchemaTree from './SQLEditorSchemaTree';
 import { postFetch } from 'src/swr/jwt/useSchemaTree';
 
@@ -52,9 +52,8 @@ const setup = async () => {
 
 describe('The SQLEditorSchemaTree component', () => {
   beforeEach(() => { vi.useFakeTimers({ shouldAdvanceTime: true }); });
-  afterEach(async () => {
+  afterEach(() => {
     vi.useRealTimers();
-    await flushAntdPortals();
   });
 
   describe('the schemas', () => {
@@ -138,6 +137,8 @@ describe('The SQLEditorSchemaTree component', () => {
     });
 
     describe('the context menu', () => {
+      withAntdPortalCleanup();
+
       describe('the Copy SELECT button', () => {
         it('copies the SELECT statement', async () => {
           const schema = schemaTableColumns.find(