test-writer
Create and maintain tests for the Raamattu Nyt monorepo using Vitest and React Testing Library.Use when:- Writing new tests for hooks, components, or utility functions- Analyzing recent git commits to identify code needing tests- Reviewing existing tests for correctness and coverage- Creating mocks for Supabase, auth, or other dependencies- Debugging test failures or flaky testsTriggers: "write tests", "test this", "add tests", "need tests for", "analyze test coverage", "fix failing tests", "mock this", "review tests"
When & Why to Use This Skill
This Claude skill automates the creation and maintenance of comprehensive test suites for React monorepos using Vitest and React Testing Library. It streamlines the software development lifecycle by generating high-quality unit and integration tests for hooks, components, and utility functions, ensuring robust code coverage and reliability through advanced mocking and debugging capabilities.
Use Cases
- Automated Test Generation: Rapidly creating .test.ts and .test.tsx files for new React components and hooks, following project-specific conventions and structures.
- Regression Analysis: Analyzing recent git commits to identify modified code that lacks sufficient test coverage and proactively generating the necessary test cases.
- Dependency Mocking: Simplifying the setup of complex mocks for external services like Supabase, authentication providers, and React Query to ensure isolated and predictable test environments.
- Test Maintenance and Debugging: Identifying the root causes of flaky or failing tests and refactoring existing test suites to improve performance and maintainability.
| name | test-writer |
|---|---|
| description | | |
| Triggers | "write tests", "test this", "add tests", "need tests for", "analyze test coverage", "fix failing tests", "mock this", "review tests" |
Test Writer
Write and maintain tests for the Raamattu Nyt monorepo.
Context Files (Read First)
For structure and conventions, read from Docs/context/:
Docs/context/repo-structure.md- Where test files goDocs/context/conventions.md- Naming patterns
Quick Start
# Run all tests
npm test
# Run with coverage
npm run test:coverage
# Run specific test file
npx vitest run path/to/file.test.ts
Test File Conventions
- Place tests adjacent to source:
useHook.ts→useHook.test.ts - Use
.test.tsfor pure logic,.test.tsxfor React components/hooks - Name:
describe("ComponentName")ordescribe("hookName")
Standard Test Structure
import { describe, expect, it, vi, beforeEach } from "vitest";
// Mocks BEFORE imports (hoisted)
vi.mock("@/integrations/supabase/client", () => ({
supabase: { rpc: vi.fn() }
}));
// Import module under test AFTER mocks
import { myFunction } from "./myModule";
describe("myFunction", () => {
beforeEach(() => {
vi.clearAllMocks();
});
it("does expected behavior", () => {
expect(myFunction()).toBe(expected);
});
});
Hook Testing Pattern
import { renderHook, waitFor } from "@testing-library/react";
// Wrapper for context providers
const wrapper = ({ children }) => (
<AuthProvider>{children}</AuthProvider>
);
it("returns initial state", () => {
const { result } = renderHook(() => useMyHook(), { wrapper });
expect(result.current.loading).toBe(true);
});
it("updates on async action", async () => {
const { result } = renderHook(() => useMyHook(), { wrapper });
await waitFor(() => {
expect(result.current.data).toBeDefined();
});
});
Common Mocks
See references/mocks.md for reusable mock patterns:
- Supabase client (RPC, auth, schema queries)
- useAuth hook
- React Query
- localStorage
Workflow
Identify what to test
- Use
code-wizardskill to find the file/function - Check git log for recent changes:
git log --oneline -20
- Use
Check existing tests
- Find tests:
Glob pattern: **/*.test.{ts,tsx} - Read related test files for patterns
- Find tests:
Write tests covering
- Happy path (normal operation)
- Error cases (API failures, invalid input)
- Edge cases (empty arrays, null, undefined)
- Loading states for async operations
Run and verify
npx vitest run path/to/file.test.ts
Test Quality Checklist
- Tests are independent (no shared state between tests)
- Mocks are cleared in
beforeEach - Async operations use
waitFornot arbitrary delays - Error scenarios are tested
- Edge cases covered (null, empty, boundary values)
Related Skills
| Situation | Delegate To |
|---|---|
| Find code to test | code-wizard |
| Debug test failures | systematic-debugging |
| CI test failures | ci-doctor |
| Lint errors in tests | lint-fixer |