Provides testing patterns and debugging support for AiderDesk using Vitest and React Testing Library.
Install
mkdir -p .claude/skills/writing-tests && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/4125" && unzip -o skill.zip -d .claude/skills/writing-tests && rm skill.zipInstalls to .claude/skills/writing-tests
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
Write unit tests, component tests, and integration tests for AiderDesk using Vitest and React Testing Library. Use when creating new tests, adding test coverage, configuring mocks, setting up test files, or debugging failing tests.Key capabilities
- →Create unit tests for pure functions
- →Test React components for user interactions
- →Configure centralized mock factories
- →Debug failing assertions in tests
- →Organize test files by directory structure
How it works
It guides the creation of unit tests for logic, component tests for React components, and the configuration of mocks using Vitest and React Testing Library.
Inputs & outputs
When to use writing-tests
- →Write unit tests for utility functions
- →Create component tests with React Testing Library
- →Configure vitest mocks
About this skill
Writing Tests
Write effective tests using Vitest and React Testing Library.
Quick Start
Create a unit test in packages/common/__tests__/utils/math.test.ts:
import { describe, it, expect } from 'vitest';
import { add } from '../../utils/math';
describe('math utility', () => {
it('adds two numbers correctly', () => {
expect(add(1, 2)).toBe(3);
});
});
Run tests with npm run test.
Core Patterns
Unit Testing
Focus on pure functions and logic in src/main or packages/common. Use vi.mock() for dependencies.
Component Testing
Test React components in src/renderer. Focus on user interactions and props.
Mocking
Use centralized mock factories for consistent testing across components and contexts.
- references/mocking-guide.md - Mock factories and API patterns
Debugging Failing Tests
- Read the error output and identify the failing assertion
- Check mock setup — verify
vi.mock()paths and return values match expectations - For component tests, inspect rendered output with
screen.debug() - Run a single test in isolation:
npm run test:node -- --no-color -t "test name" - Verify coverage:
npm run test:coverageto confirm new code is tested
Advanced Usage
For detailed information:
- references/test-organization.md - Directory structure and naming
- references/running-tests.md - CLI commands and coverage
- references/best-practices.md - Principles and patterns
- references/test-patterns.md - Code templates
- assets/test-checklist.md - Pre-flight checklist
How it compares
This skill provides specific patterns and commands for AiderDesk projects, unlike general testing guides.
Compared to similar skills
writing-tests side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| writing-tests (this skill) | 1 | 4mo | No flags | Beginner |
| react-best-practices | 22 | 3mo | No flags | Intermediate |
| frontend-testing | 11 | 3mo | Review | Intermediate |
| feature-flags | 6 | 6mo | Review | Intermediate |
Try saying
Example prompts that trigger this skill in your AI assistant.
You might also like
react-best-practices
redpanda-data
Client-side React performance optimization patterns.
frontend-testing
langgenius
Generate Vitest + React Testing Library tests for Dify frontend components, hooks, and utilities. Triggers on testing, spec files, coverage, Vitest, RTL, unit tests, integration tests, or write/review test requests.
feature-flags
Use when feature flag tests fail, flags need updating, understanding @gate pragmas, debugging channel-specific test failures, or adding new flags to React.
senior-qa
alirezarezvani
This skill should be used when the user asks to "generate tests", "write unit tests", "analyze test coverage", "scaffold E2E tests", "set up Playwright", "configure Jest", "implement testing patterns", or "improve test quality". Use for React/Next.js testing with Jest, React Testing Library, and Playwright.
testing-patterns
davila7
Jest testing patterns, factory functions, mocking strategies, and TDD workflow. Use when writing unit tests, creating test factories, or following TDD red-green-refactor cycle.
react-component-performance
Dimillian
Analyze and optimize React component performance issues (slow renders, re-render thrash, laggy lists, expensive computations). Use when asked to profile or improve a React component, reduce re-renders, or speed up UI updates in React apps.