Web Testing

​

Testing stack

​

Vitest configs

​

Unit tests

​

Running tests

cd web

# Run all web tests
npm test

# Run with coverage
npm run test:coverage

# Run a specific web test file
npx vitest run src/components/ui/Button.test.tsx

# Run a root mobile lib test (root dependency set)
cd .. && npm run test:unit -- lib/navigation/__tests__/deepLinkBackStack.test.ts

# Run a specific test by name
npx vitest run -t "test name"

# Watch mode (web tests)
npx vitest

​

Test file location

components/
├── ui/
│   ├── Button.tsx
│   └── Button.test.tsx

​

Example unit test

import { render, screen, fireEvent } from '@testing-library/react';
import { vi } from 'vitest';
import { Button } from './Button';

describe('Button', () => {
  it('renders with text', () => {
    render(<Button>Click me</Button>);
    expect(screen.getByText('Click me')).toBeInTheDocument();
  });

  it('calls onClick when clicked', () => {
    const onClick = vi.fn();
    render(<Button onClick={onClick}>Click</Button>);

    fireEvent.click(screen.getByText('Click'));
    expect(onClick).toHaveBeenCalled();
  });

  it('is disabled when loading', () => {
    render(<Button loading>Submit</Button>);
    expect(screen.getByRole('button')).toBeDisabled();
  });
});

​

E2E tests

​

Running E2E tests

cd web

# Run all E2E tests
npm run test:e2e

# Run with UI mode
npm run test:e2e-ui

# Run in debug mode
npm run test:e2e-d

# Run specific test file
npm run test:e2e -- login.spec.ts

​

Test file location

automated-tests/
├── login.spec.ts
├── gigs.spec.ts
├── setlist.spec.ts
└── fixtures/
    └── test-data.ts

​

Example E2E test

import { test, expect } from '@playwright/test';

test.describe('Login', () => {
  test('should login with valid credentials', async ({ page }) => {
    await page.goto('/sign-in');

    await page.fill('[name="email"]', 'test@example.com');
    await page.fill('[name="password"]', 'password123');
    await page.click('button[type="submit"]');

    await expect(page).toHaveURL('/dashboard');
    await expect(page.getByText('Welcome')).toBeVisible();
  });

  test('should show error for invalid credentials', async ({ page }) => {
    await page.goto('/sign-in');

    await page.fill('[name="email"]', 'invalid@example.com');
    await page.fill('[name="password"]', 'wrong');
    await page.click('button[type="submit"]');

    await expect(page.getByText('Invalid credentials')).toBeVisible();
  });
});

​

Testing requirements for PRs

​

When to write tests

​

Test coverage goals

• Business logic and calculations
• API service methods
• Complex component interactions
• Error handling paths

​

PR screenshots

​

Capture screenshots

// Example: add a focused spec under automated-tests/ for PR visuals
import { test } from '@playwright/test';

test('capture dashboard screenshots', async ({ page }) => {
  await page.goto('/home');
  await page.screenshot({ path: 'automated-tests/screenshots/home.png', fullPage: true });
});

​

Run screenshot capture

npm run test:e2e -- path/to/your-screenshot.spec.ts --project=chromium

​

Add to PR description

## Screenshots

![Dashboard](https://github.com/soundchecklive/soundcheck-web/blob/BRANCH_NAME/screenshots/dashboard.png?raw=true)

​

Best practices

​

Unit tests

1. Test behavior, not implementation
   // Good
   expect(screen.getByText('Welcome')).toBeVisible();
   
   // Avoid
   expect(component.state.isLoggedIn).toBe(true);
   
2. Use data-testid sparingly
   • Prefer accessible queries: getByRole, getByText, getByLabelText
   • Use data-testid only when necessary
3. Mock at a boundary, not our own code. Mock the generated API client (through its generatedApiCore wrapper), third-party SDKs (Clerk, Stripe, Twilio, Sentry, PostHog, the AI gateway), native Expo and React Native modules, logger, config, and the clock. Let our own services, hooks and components run for real, so the test fails when they break.
   vi.mock('@/lib/services/generatedApiCore', () => ({
     default: { execute: vi.fn(), api_client: { v1EventsList: vi.fn() } },
   }));
   
   • Do not stub our own components and then assert that the stubs rendered. scripts/check-weak-tests.mjs (pre-commit and the Conventions job, both advisory) prints a new one as a MOCK line.
   • In api-events, test SQL and data rules with a *.integration.test.ts against real Postgres rather than a mocked prisma or db/*Crud module.
   • A test that only checks a mock was called with what the test passed in proves nothing. Keep it only when it pins a request shape the types do not.
4. Reset shared mocks with vi.resetAllMocks() in beforeEach, and set return values inside each test or after the reset. vi.clearAllMocks() keeps queued mockResolvedValueOnce values, which leak into the next test (pitfalls.mdx #22). Give a vi.mock factory its defaults as vi.fn<(...args: any[]) => any>(async () => value), not vi.fn().mockResolvedValue(value). The type argument keeps the loose type of a bare vi.fn(), so later mockResolvedValueOnce calls still type-check. A reset restores the function passed to vi.fn but wipes mockResolvedValue, and a lost default can pass by accident. A lost timezone default, for example, falls back to the machine’s zone and passes everywhere except UTC CI.

​

E2E tests

1. Use page objects for reusability
   class LoginPage {
     constructor(private page: Page) {}
   
     async login(email: string, password: string) {
       await this.page.fill('[name="email"]', email);
       await this.page.fill('[name="password"]', password);
       await this.page.click('button[type="submit"]');
     }
   }
   
2. Wait for stable state
   // Wait for loading to complete
   await page.waitForLoadState('networkidle');
   
   // Wait for specific element
   await page.waitForSelector('[data-testid="content"]');
   
3. Test critical user paths
   • Login/logout flow
   • Creating new records
   • Editing existing records
   • Error scenarios

​

Debugging tests

​

Vitest

# Run with verbose output
npx vitest run --reporter=verbose

# Run with coverage
npm run test:coverage

# Debug specific test
npx vitest --inspect-brk --no-file-parallelism

​

Playwright

# Debug mode with browser visible
npm run test:e2e-d

# Generate trace
npm run test:e2e -- --trace on

# View trace
npx playwright show-trace trace.zip

​

CI integration

​

Viewing results

• Check the Actions tab in GitHub
• Failed tests include screenshots and traces
• Coverage reports are generated for PRs