testing-strategy_skill

Overview

This skill provides a comprehensive testing strategy for JavaScript web apps using Vitest for unit and integration tests and Playwright for end-to-end (E2E) tests. It defines coverage targets, test organization, CI integration, and practical best practices to keep tests fast, reliable, and maintainable. Use it to establish a repeatable testing workflow across new and existing projects.

How this skill works

The strategy prescribes a testing pyramid distribution (70% unit, 20% integration, 10% E2E) and config examples for Vitest and Playwright. It includes setup commands, sample tests, coverage thresholds, and CI job examples to run tests and upload reports. It also describes naming conventions, directory layout, mocking guidelines, and debugging tips to make test suites robust and actionable.

When to use it

• Setting up testing for a new project
• Adding or changing features that need verification
• Improving or enforcing test coverage targets
• Investigating flaky tests and test failures
• Automating tests in CI/CD pipelines

Best practices

• Follow the AAA pattern: Arrange, Act, Assert for clarity
• Prefer many fast unit tests; mock external dependencies
• Keep tests focused—ideally one assertion per behavioral test
• Co-locate unit tests next to components and separate E2E in an e2e/ folder
• Use coverage thresholds (minimum 80% lines/functions, 75% branches) and enforce in CI
• Run quick unit tests pre-commit and full suites in CI before deploy

Example use cases

• Write Vitest unit tests for components and utilities with jsdom environment
• Create integration tests that mock APIs to assert component interactions
• Implement Playwright E2E tests for critical user flows like signup, checkout, and auth
• Add GitHub Actions jobs to run coverage, upload reports, and execute Playwright in CI
• Adopt TDD or pragmatic test-after workflows depending on team cadence