| name | frontend-testing-workflow |
| description | Use when writing or fixing Jest, Testing Library, Playwright, or visual tests. |
Frontend Testing Workflow
Unit Tests
- Client tests use Jest with jsdom and Testing Library.
- Server tests cover Apollo local mock behavior in the node environment.
- Mirror source ownership under
tests/unit/.
- Test behavior through the public UI or exported API.
- Mock network and service boundaries intentionally; do not test mock internals.
Playwright
- Use accessible locators first: role, label, text, and test IDs where needed.
- Keep setup state explicit.
- Use Mockoon-backed responses from
docker-compose.test.yml.
- Prefer page helpers only when they remove real duplication.
Visual Tests
- Run visual checks for intentional layout changes.
- Inspect diffs before accepting snapshots.
- Use
make test-visual-update only when the new rendering is correct.
Commands
make test-unit-client
make test-unit-server
make test-e2e
make test-e2e-ui
make test-visual
make test-visual-update
Finish with:
make format
make lint
Related Guides
Before applying this skill, confirm the active task against
../AI-AGENT-GUIDE.md and
../SKILL-DECISION-GUIDE.md so every relevant
skill is consulted.
Line Length Disclosure
Before presenting changes, check changed text files for lines longer than 100 characters.
If any exist, tell the user each path:line and measured character count.
Treat this as disclosure, not failure, unless a project gate fails.
Supporting Files
