# Frontend Test Infrastructure & Generation

> Reference for step-07-tests.md — Vitest + Testing Library + MSW setup and component test generation.

## 1. Check Frontend Test Infrastructure

Verify that the frontend project has Vitest + Testing Library configured:

```bash
# Check if vitest.config.ts exists in the web/frontend project
ls {WebProjectPath}/vitest.config.ts 2>/dev/null
```

If NOT found, deploy the test infrastructure:

### Install packages

```bash
cd {WebProjectPath}
npm install -D vitest @testing-library/react @testing-library/jest-dom @testing-library/user-event jsdom msw
```

### Copy infrastructure files from SmartStack templates

| Template Source | Destination |
|----------------|-------------|
| `templates/project/test-frontend/vitest.config.ts` | `{WebProjectPath}/vitest.config.ts` |
| `templates/project/test-frontend/setup.ts` | `{WebProjectPath}/src/test/setup.ts` |
| `templates/project/test-frontend/test-utils.tsx` | `{WebProjectPath}/src/test/test-utils.tsx` |
| `templates/project/test-frontend/msw/server.ts` | `{WebProjectPath}/src/test/msw/server.ts` |
| `templates/project/test-frontend/msw/handlers.ts` | `{WebProjectPath}/src/test/msw/handlers.ts` |

### Add test scripts to `package.json` (if missing)

```json
{
  "scripts": {
    "test": "vitest run",
    "test:watch": "vitest",
    "test:coverage": "vitest run --coverage"
  }
}
```

## 2. Generate Frontend Tests

```
Tool: mcp__smartstack__scaffold_frontend_tests
Args:
  name: "{entity_name}"
  components: ["all"]
  apiRoute: "/api/{entity_code}"
```

This generates:
- `src/pages/{application}/__tests__/{EntityName}Page.test.tsx` - Page rendering, loading, error states
- `src/pages/{application}/__tests__/{EntityName}ListView.test.tsx` - List display, pagination, view toggle
- `src/pages/{application}/__tests__/{EntityName}DetailPage.test.tsx` - Detail view, tabs, back navigation
- `src/hooks/__tests__/use{EntityName}Preferences.test.ts` - Preference get/set
- `src/services/api/__tests__/{entityName}Api.test.ts` - API client calls with MSW

## 3. Run Frontend Tests (BLOCKING)

```bash
cd {WebProjectPath}
npx vitest run --reporter=default
```

**ALL frontend tests MUST pass.** If tests fail:
1. Read the failure output carefully
2. Fix the failing tests or the components they test
3. Re-run until all tests pass
4. Do NOT proceed to the next step until all tests are green
