skills/designing-tests/SKILL.md
Designs and implements testing strategies for any codebase. Use when adding tests, improving coverage, setting up testing infrastructure, debugging test failures, or when asked about unit tests, integration tests, or E2E testing.
npx skillsauth add cloudai-x/claude-workflow designing-testsInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
Copy this checklist and track progress:
Test Implementation Progress:
- [ ] Step 1: Identify what to test
- [ ] Step 2: Select appropriate test type
- [ ] Step 3: Write tests following templates
- [ ] Step 4: Run tests and verify passing
- [ ] Step 5: Check coverage meets targets
- [ ] Step 6: Fix any failing tests
Apply the testing pyramid for balanced coverage:
/\
/ \ E2E Tests (10%)
/----\ - Critical user journeys
/ \ - Slow but comprehensive
/--------\ Integration Tests (20%)
/ \ - Component interactions
/------------\ - API contracts
/ \ Unit Tests (70%)
/________________\ - Fast, isolated
- Business logic focus
| Type | Recommended | Alternative | | ----------- | --------------- | ---------------- | | Unit | Vitest | Jest | | Integration | Vitest + MSW | Jest + SuperTest | | E2E | Playwright | Cypress | | Component | Testing Library | Enzyme |
| Type | Recommended | Alternative | | ----------- | --------------------------- | ----------------- | | Unit | pytest | unittest | | Integration | pytest + httpx | pytest + requests | | E2E | Playwright | Selenium | | API | pytest + FastAPI TestClient | - |
| Type | Recommended | | ----------- | ------------------ | | Unit | testing + testify | | Integration | testing + httptest | | E2E | testing + chromedp |
describe("[Unit] ComponentName", () => {
describe("methodName", () => {
it("should [expected behavior] when [condition]", () => {
// Arrange
const input = createTestInput();
// Act
const result = methodName(input);
// Assert
expect(result).toEqual(expectedOutput);
});
it("should throw error when [invalid condition]", () => {
expect(() => methodName(invalidInput)).toThrow(ExpectedError);
});
});
});
describe("[Integration] API /users", () => {
beforeAll(async () => {
await setupTestDatabase();
});
afterAll(async () => {
await teardownTestDatabase();
});
it("should create user and return 201", async () => {
const response = await request(app)
.post("/users")
.send({ name: "Test", email: "[email protected]" });
expect(response.status).toBe(201);
expect(response.body.id).toBeDefined();
});
});
describe("[E2E] User Registration Flow", () => {
it("should complete registration successfully", async ({ page }) => {
await page.goto("/register");
await page.fill('[data-testid="email"]', "[email protected]");
await page.fill('[data-testid="password"]', "SecurePass123!");
await page.click('[data-testid="submit"]');
await expect(page.locator(".welcome-message")).toBeVisible();
await expect(page).toHaveURL("/dashboard");
});
});
{
"coverageThreshold": {
"global": {
"branches": 80,
"functions": 80,
"lines": 80,
"statements": 80
},
"src/core/": {
"branches": 95,
"functions": 95
}
}
}
// factories/user.js
export const userFactory = (overrides = {}) => ({
id: faker.string.uuid(),
name: faker.person.fullName(),
email: faker.internet.email(),
createdAt: new Date(),
...overrides,
});
// Usage
const admin = userFactory({ role: "admin" });
// fixtures/users.json
{
"validUser": { "name": "Test", "email": "[email protected]" },
"invalidUser": { "name": "", "email": "invalid" }
}
// API mocking with MSW
import { http, HttpResponse } from "msw";
export const handlers = [
http.get("/api/users", () => {
return HttpResponse.json([{ id: 1, name: "John" }]);
}),
];
// Time mocking
vi.useFakeTimers();
vi.setSystemTime(new Date("2024-01-01"));
After writing tests, run this validation:
Test Validation:
- [ ] All tests pass: `npm test`
- [ ] Coverage meets thresholds: `npm test -- --coverage`
- [ ] No flaky tests (run multiple times)
- [ ] Tests are independent (order doesn't matter)
- [ ] Test names clearly describe behavior
If any tests fail, fix them before proceeding. If coverage is below target, add more tests for uncovered code paths.
# Run tests
npm test
# Run with coverage
npm test -- --coverage
# Run specific test file
npm test -- path/to/test.spec.ts
# Run in watch mode during development
npm test -- --watch
development
Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", "check my site against best practices", or "web interface guidelines".
development
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.
development
Implements authentication, authorization, encryption, secrets management, and security hardening patterns. Use when designing auth flows, managing secrets, configuring CORS, implementing rate limiting, or when asked about JWT, OAuth, password hashing, API keys, RBAC, or security best practices.
tools
Patterns for parallel subagent execution using Task tool with run_in_background. Use when coordinating multiple independent tasks, spawning dynamic subagents, or implementing features that can be parallelized.