Frontend Testing Guide#

tests/
├── setup.ts # happy-dom global injection (--preload)
├── test-utils.tsx # Provider wrappers and render helpers
├── README.md # This file
├── components/ # Component unit tests
├── pages/ # Page integration tests (routing, API)
├── hooks/ # Custom hook tests
├── stores/ # Zustand store tests
├── mocks/ # Mock utilities
│ ├── fetch.ts # Global fetch mock
│ └── websocket.ts # Global WebSocket mock
├── fixtures/ # Test data factories
│ └── api-responses.ts # Mock API response factories
└── utils/ # Test helpers
    └── store-reset.ts # Zustand store reset utilities

# All frontend tests
bun --filter frontend test

# Specific test file
bun test --preload ./tests/setup.ts tests/pages/login.test.tsx

# Repeat for stability check
bun --filter frontend test --repeat 3

import { renderWithProviders, screen } from '../test-utils';

renderWithProviders(<MyComponent />);
expect(screen.getByText('Hello')).toBeDefined();

import { renderWithRouter, screen } from '../test-utils';

renderWithRouter([
  { path: '/login', element: <LoginPage /> },
  { path: '/select-project', element: <div>Select Project</div> },
  { path: '/', element: <div>Dashboard</div> },
], { initialRoute: '/login' });

import { mockFetch, restoreFetch } from '../mocks/fetch';
import { mockDashboardStats } from '../fixtures/api-responses';

let fetchMock: ReturnType<typeof mockFetch>;

beforeEach(() => {
  fetchMock = mockFetch({
    '/dashboard/stats': { status: 200, body: mockDashboardStats() },
  });
});

afterEach(() => {
  restoreFetch(fetchMock);
});

import { cleanupAll } from '../test-utils';

afterEach(cleanupAll);

import { cleanup } from '@testing-library/react';
import { resetAllStores } from '../utils/store-reset';

afterEach(() => {
  cleanup();
  resetAllStores();
});

import { installMockWebSocket } from '../mocks/websocket';

let wsMock: ReturnType<typeof installMockWebSocket>;

beforeEach(() => {
  wsMock = installMockWebSocket();
});

afterEach(() => {
  wsMock.restore();
});

it('receives events', () => {
  // ... render component that creates WebSocket ...
  const ws = wsMock.instances[0];
  ws.simulateOpen();
  ws.simulateMessage({ type: 'crack_result', projectId: 1, data: {} });
});

import { useFakeTimers, useRealTimers } from 'bun:test';

beforeEach(() => useFakeTimers());
afterEach(() => useRealTimers());

it('reconnects with backoff', () => {
  // ... trigger disconnect ...
  advanceTimersByTime(1000); // First reconnect
  advanceTimersByTime(2000); // Second reconnect (exponential)
});

import { useAuthStore } from '../../src/stores/auth';
import { useUiStore } from '../../src/stores/ui';

useAuthStore.setState({
  user: { id: 1, email: 'admin@hashhive.local', name: 'Admin', projects: [] },
  isAuthenticated: true,
  isLoading: false,
});

useUiStore.setState({ selectedProjectId: 1 });