Frontend Testing Best Practices
This is a testing strategy that pushes you toward end-to-end tests and away from component unit tests. It's opinionated: default to E2E, only unit test pure functions, minimize mocking, and test user behavior instead of React component internals. The rules cover selector preferences (role over CSS), test structure (E2E tests go in e2e/tests/, unit tests colocate with source), and when to bail on mocks and write an E2E test instead. If you've been maintaining a sprawling component test suite that breaks on every refactor, this gives you permission to delete most of it. The tradeoff is you need a solid E2E setup, which means Playwright or similar actually working in your project.
- skills.sh installs
- 2.2K
- GitHub stars
- 92
- last updated
- Aug 21, 2026
Install
$ npx -y skills add sergiodxa/agent-skills --skill frontend-testing-best-practices --agent claude-codeInstalls into .claude/skills of the current project.
Files
Testing Best Practices
Guidelines for writing effective, maintainable tests that provide real confidence. Contains 6 rules focused on preferring E2E tests, minimizing mocking, and testing behavior over implementation.
Core Philosophy
- Prefer E2E tests over unit tests - Test the whole system, not isolated pieces
- Minimize mocking - If you need complex mocks, write an E2E test instead
- Test behavior, not implementation - Test what users see and do
- Avoid testing React components directly - Test them through E2E
When to Apply
Reference these guidelines when:
- Deciding what type of test to write
- Writing new E2E or unit tests
- Reviewing test code
- Refactoring tests
Rules Summary
Testing Strategy (CRITICAL)
prefer-e2e-tests - @rules/prefer-e2e-tests.md
Default to E2E tests. Only write unit tests for pure functions.
Sponsors
Agent CaffeineSponsoredClose your lid, come back to finished work
SnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthly
WaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthly
knobsSponsoredSee your site on any phone, any day, in any languageDetails
- Repository
- github.com/sergiodxa/agent-skills
- Categories
- Frontend Development, Testing & QA, Documentation, AI & Agent Building
More from sergiodxa/agent-skills
All 10- Owasp Security Check1.7K
- Frontend React Best Practices1.2K
- Frontend Accessibility Best Practices896
- Frontend Tailwind Best Practices465
- Frontend React Router Best Practices402
- Frontend Js Best Practices336
- Ruby On Rails Best Practices282
- Frontend Async Best Practices225
- Frontend Internationalization Best Practices193
Recommended
More Frontend Development
sentry-svelte-sdkgetsentry/sentry-for-aiFull Sentry SDK setup for Svelte and SvelteKit. Use when asked to "add Sentry to Svelte", "add Sentry to SvelteKit", "install @sentry/sveltekit", or configure e2.2Kskills.sh installs
react-2026patternsdev/skillsProvides a comprehensive guide to the modern React 2026 stack. Use when starting a new React project or modernizing an existing one with current frameworks, bui2.1Kskills.sh installs
design-taste-frontend-v1nexu-io/open-designThe original v1 taste-skill, preserved for projects depending on its exact behavior. The current default is `design-taste-frontend` (v2 experimental), which is 1.8Kskills.sh installs
adk-frontendbotpress/skillsGuidelines for building frontend applications that integrate with Botpress ADK bots - covering authentication, type generation, client setup, and calling bot ac1.7Kskills.sh installs