Use this skill when writing, reviewing, or deciding where to place tests in the Next.js frontend package. Covers which project (unit / integration / storybook) to use for a given scenario, what NOT to duplicate across projects, and file placement conventions for this package.
Installs into .claude/skills of the current project.
Are you the author of Testing?
Add the live security badge to your README. It updates with every re-scan.
[](https://www.skillsdirectory.com/skills/manakuro-testing)
---
name: testing
description: >
Use this skill when writing, reviewing, or deciding where to place tests
in the Next.js frontend package. Covers which project (unit / integration /
storybook) to use for a given scenario, what NOT to duplicate across
projects, and file placement conventions for this package.
---
# Testing skill
See `guidelines.md` for the full decision rules and examples.
## Quick reference
| Project | Pattern | Environment | Purpose |
|-------------|----------------------------|-------------|------------------------------------------------|
| unit | `*.unit.test.ts(x)` | happy-dom | Pure logic: utils, hooks, data transforms |
| integration | `*.integration.test.tsx` | happy-dom | User flows across components with MSW |
| storybook | `*.stories.tsx` | browser | Visual states, a11y, interaction per component |
## One-line decision rule
> "If this test fails, do I tell the **designer** or the **engineer**?"
> - Designer → **storybook**
> - Engineer → **unit** or **integration**
## File placement in this package
- Unit / integration tests → co-located with the component:
`src/components/Button/Button.unit.test.tsx`
- Stories → co-located with the component:
`src/components/Button/Button.stories.tsx`
- MSW handlers → `src/mocks/handlers/`
- Storybook config → `apps/nextjs/.storybook/`
- `vitest.config.ts` → monorepo root (not in this package)
For the full decision guide, do-not-duplicate rules, and code examples,
read `guidelines.md` in this directory.
