perf(client): speed up test runs without reducing coverage

.gitignore

@@ -6,6 +6,7 @@
 .sentryclirc
 .swc/
 .turbo
+.vitest/
 .vscode
 app/
 coverage

CONTRIBUTING.md

@@ -5,7 +5,7 @@
 ### Prerequisites
 
 - [Git 2.10+](https://git-scm.com/downloads)
-- [NodeJS LTS](https://nodejs.org/en/)
+- [Node.js 24 LTS](https://nodejs.org/en/) (also used in CI)
 - [Podman](https://podman.io/docs/installation)
 - [podman-compose](https://github.com/containers/podman-compose)
 

client/README.md

@@ -97,6 +97,27 @@ modules/<Feature>/
 - Convert styled-jsx to CSS modules during touch-based changes.
 - Do not initiate large-scale rewrites without approval.
 
+## Unit Tests
+
+- Run all client tests: `npm test --workspace client`
+- Run tests with combined coverage: `npm run test:ci --workspace client`
+- Run DOM-free tests: `npm test --workspace client -- --project node`
+- Run component and browser API tests: `npm test --workspace client -- --project dom`
+
+The `nodeTests` list in `vitest.config.mts` selects audited DOM-free tests. Add a file only if its tests and runtime
+imports work without browser globals. All other tests use jsdom and `setupTests.ts`. Both projects retain file isolation
+and contribute to the same coverage report and thresholds.
+
+Retries are disabled so flaky tests fail on their first attempt. Fix the async wait or state cleanup before adding a
+test-specific retry. When checking one rendered state, group related assertions in one test to avoid repeated UI renders.
+Keep separate tests for different inputs and interactions.
+
+For a timing comparison, use the same worker count and coverage options before and after the change:
+
+```sh
+npm run test:ci --workspace client -- --maxWorkers=4
+```
+
 ## Enforcement (Planned)
 
 - ESLint boundary rules to prevent cross-module imports.

client/package.json

@@ -43,15 +43,15 @@
   },
   "devDependencies": {
     "@playwright/test": "^1.51.1",
-    "@testing-library/jest-dom": "6.1.4",
-    "@testing-library/react": "14.1.2",
-    "@testing-library/user-event": "14.5.1",
+    "@testing-library/dom": "10.4.1",
+    "@testing-library/jest-dom": "7.0.1",
+    "@testing-library/react": "16.3.3",
+    "@testing-library/user-event": "14.6.7",
     "@types/aws-lambda": "8.10.126",
     "@types/cookie": "0.5.4",
     "@types/react": "18.3.18",
     "@types/react-dom": "18.3.5",
     "eslint-plugin-testing-library": "7.16.0",
-    "jsdom": "^29.0.2",
     "mq-polyfill": "1.1.8"
   },
   "nextBundleAnalysis": {

client/src/__tests__/setupUser.ts

@@ -0,0 +1,25 @@
+import { act } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+type User = ReturnType<typeof userEvent.setup>;
+
+export function setupUser(...options: Parameters<typeof userEvent.setup>): User {
+  const user = userEvent.setup(...options);
+
+  return new Proxy(user, {
+    get(target, property, receiver) {
+      const value = Reflect.get(target, property, receiver);
+      if (typeof value !== 'function') {
+        return value;
+      }
+
+      return async (...args: unknown[]) => {
+        let result: unknown;
+        await act(async () => {
+          result = await Reflect.apply(value, target, args);
+        });
+        return result;
+      };
+    },
+  });
+}

client/src/components/Comment.test.tsx

@@ -2,8 +2,8 @@ import { render, screen } from '@testing-library/react';
 import { Comment } from './Comment';
 
 describe('Comment', () => {
-  it('renders author, datetime, content and children', () => {
-    render(
+  it('renders populated and omitted comment sections', () => {
+    const { container, rerender } = render(
       <Comment
         author="John Doe"
         avatar={<span data-testid="avatar">A</span>}
@@ -19,30 +19,22 @@ describe('Comment', () => {
     expect(screen.getByText('This is the comment body')).toBeInTheDocument();
     expect(screen.getByText('Nested reply')).toBeInTheDocument();
     expect(screen.getByTestId('avatar')).toBeInTheDocument();
-  });
 
-  it('does not render the avatar when not provided', () => {
-    render(<Comment content="No avatar here" />);
+    rerender(<Comment content="No avatar here" />);
 
     expect(screen.queryByTestId('avatar')).not.toBeInTheDocument();
     expect(screen.getByText('No avatar here')).toBeInTheDocument();
-  });
 
-  it('omits the header row when neither author nor datetime are provided', () => {
-    render(<Comment content="Only content" />);
+    rerender(<Comment content="Only content" />);
 
     expect(screen.getByText('Only content')).toBeInTheDocument();
     expect(screen.queryByText('2 hours ago')).not.toBeInTheDocument();
-  });
 
-  it('renders the header row when only datetime is provided', () => {
-    render(<Comment datetime="just now" />);
+    rerender(<Comment datetime="just now" />);
 
     expect(screen.getByText('just now')).toBeInTheDocument();
-  });
 
-  it('renders nothing in the body areas when content and children are absent', () => {
-    const { container } = render(<Comment author="Solo Author" />);
+    rerender(<Comment author="Solo Author" />);
 
     expect(screen.getByText('Solo Author')).toBeInTheDocument();
     // only the wrapper + author header should be present, no content/children divs