javascript-testing-patterns
Implement comprehensive testing strategies using Jest, Vitest, and Testing Library for unit tests, integration tests, and end-to-end testing with mocking, fixtures, and test-driven development. Use when writing JavaScript/TypeScript tests, setting up test infrastructure, or implementing TDD/BDD work
By wshobson · 18,660 installs
npx skills add wshobson/agents --skill javascript-testing-patterns
Source repository · Upstream listing
JavaScript Testing Patterns
Comprehensive guide for implementing robust testing strategies in JavaScript/TypeScript applications using modern testing frameworks and best practices.
When to Use This Skill
Setting up test infrastructure for new projects
Writing unit tests for functions and classes
Creating integration tests for APIs and services
Implementing end to end tests for user flows
Mocking external dependencies and APIs
Testing React, Vue, or other frontend components
Implementing test driven development (TDD)
Setting up continuous testing in CI/CD pipelines
Testing Frameworks
Jest Full Featured Testing Framework
Setup:
Vitest Fast, Vite Native Testing
Setup:
Unit Testing Patterns
Pattern 1: Testing Pure Functions
Pattern 2: Testing Classes
Pattern 3: Testing Async Functions
Mocking Patterns
Pattern 1: Mocking Modules
Pattern 2: Dependency Injection for Testing
Pattern 3: Spying on Functions
Integration Testing
Integration tests verify real database operations and HTTP endpoints using supertest and a test database instance. Always truncate tables in beforeEach and tear down in afterAll .
For full API integration test examples (supertest + PostgreSQL) and database repository integration tests, see [references/advanced testing patterns.md](references/advanced testing patterns.md).
Frontend Testing with Testing Library
Test React components by rendering them and querying by role, placeholder, or test ID. Test hooks with renderHook + act . Prefer semantic queries ( getByRole , getByPlaceholderText ) over data testid .
For complete React component test examples (UserForm, hooks with renderHook / act ), see [references/advanced testing patterns.md](references/advanced testing patterns.md).
Test Fixtures and Factories
Use @faker js/faker to generate realistic test data factories. Factories accept optional overrides so tests can set only the fields they care about:
For snapshot testing, coverage configuration, test organization patterns, promise testing, and timer mocking, see [references/advanced testing patterns.md](references/advanced testing patterns.md).
Best Practices
1. Follow AAA Pattern : Arrange, Act, Assert
2. One assertion per test : Or logically related assertions
3. Descriptive test names : Should describe what is being tested
4. Use beforeEach/afterEach : For setup and teardown
5. Mock external dependencies : Keep tests isolated
6. Test edge cases : Not just happy paths
7. Avoid implementation details : Test behavior, not implementation
8. Use test factories : For consistent test data
9. Keep tests fast : Mock slow operations
10. Write tests first (TDD) : When possible
11. Maintain test coverage : Aim for 80%+ coverage
12. Use TypeScript : For type safe tests
13. Test error handling : Not just success cases
14. Use data testid sparingly : Prefer semantic queries
15. Clean up after tests : Prevent test pollution