Code Coverage Quick Reference

Run Code Coverage Locally

npm run test:coverage

Output:

• Runs all tests in src/**/*.{test,spec}.{js,jsx}
• Generates coverage reports in coverage/ directory
• Displays coverage percentages in terminal
• Creates HTML report at coverage/index.html

---

View Coverage Report in Browser

After running npm run test:coverage, view the interactive HTML report:

Option 1: Using npx http-server (recommended)

cd coverage
npx http-server

Then open the localhost URL shown (usually http://localhost:8080)

Option 2: Using Python

cd coverage
python3 -m http.server 8000

Then open http://localhost:8000 in your browser

Option 3: VS Code Live Server

1. Install "Live Server" extension
2. Right-click coverage/index.html
3. Select "Open with Live Server"

What the report shows:

• ✅ Line-by-line coverage (green = tested, red = untested)
• ✅ Coverage by file with statistics
• ✅ Clickable drill-down into each file
• ✅ Missing coverage details

---

What Gets Tested

Included:

• ✅ All .test.js and .spec.js files
• ✅ React components
• ✅ Utility functions
• ✅ Library code

Excluded:

• ❌ Storybook files (.stories.jsx)
• ❌ Build output (dist/)
• ❌ Dependencies (node_modules/)

---

Coverage Report

Terminal Output

Test Files  3 passed (3)
Tests  13 passed (13)

% Coverage report from v8
File       | % Stmts | % Branch | % Funcs | % Lines
-----------|---------|----------|---------|----------
All files  |   78.49 |    54.28 |      90 |   79.77
Icon.jsx   |      80 |       75 |     100 |     100

HTML Report

View detailed report:

open coverage/index.html
# or
firefox coverage/index.html

Shows:

• Line-by-line coverage
• Which lines aren't tested (red highlighting)
• Coverage trends

---

GitHub Actions

Coverage Workflow

Automatic runs on:

• Push to dev or main
• Pull requests to dev or main

Outputs:

• coverage/ artifact (30-day retention)
• PR comment with coverage summary
• Coverage badge

Access coverage:

1. Go to Actions tab
2. Select "Code Coverage Report" workflow
3. Click the run
4. Download coverage-report artifact

---

Coverage Thresholds

Current:

• Minimum: 50% (MVP phase)

Recommended by phase:

• Beta: 70%
• Production: 80%+

To adjust threshold:

Edit .github/workflows/coverage.yml:

- name: Check coverage thresholds
  run: |
    THRESHOLD=70  # Change this

---

Common Issues

Tests fail locally but pass in CI

Cause: Firebase credentials missing Fix: Copy .env.local.example to .env.local with dev credentials

"jsdom is not available" error

Fix: Make sure environment: 'jsdom' in vitest.config.js

Coverage showing 0%

Cause: No tests found or tests not running Fix: Check that tests have .test.js or .spec.js suffix

HTML report not generating

Cause: No passing tests Fix: Get at least one test passing first

---

Writing Tests

Basic Test

import { describe, it, expect } from 'vitest'
import { render } from '@testing-library/react'
import MyComponent from './MyComponent'

describe('MyComponent', () => {
  it('renders without crashing', () => {
    const { container } = render(<MyComponent />)
    expect(container).toBeTruthy()
  })
})

Test with User Interaction

import { render, screen } from '@testing-library/react'
import userEvent from '@testing-library/user-event'

it('handles button click', async () => {
  const user = userEvent.setup()
  render(<Button onClick={onClick} />)
  
  const button = screen.getByRole('button')
  await user.click(button)
  
  expect(onClick).toHaveBeenCalled()
})

---

Improving Coverage

Current Status

• Overall: ~79% statements covered
• Firebase: 64% (expected - mostly stubs)
• Components: 80%+
• Profile screens: 97%

Next Steps

1. Add tests for untested components

   • Focus on high-impact components first
   • Start with authentication screens

2. Increase branch coverage (currently 54%)

   • Add tests for error conditions
   • Test conditional logic

3. Mock Firebase properly

   • Create shared mocks for firebase.js
   • Use them across tests

---

Files

• Config: vitest.config.js
• Setup: test.setup.js
• Workflow: .github/workflows/coverage.yml
• Tests: src/**/*.test.js
• Reports: coverage/ (gitignored)

---

See Also

• Code Coverage Improvements Worklog
• Vitest Documentation
• Testing Library Docs