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