skills.rest
marquesfelip
marquesfelipCOMMUNITY
Explore all skills by this author →
GitHub

frontend-testing-strategy

Develop frontend testing strategies for React, Vue, and Angular applications.

Updated Mar 29, 2026
Search Tags:#testing#frontend#strategy#unit-testing#integration-testing#e2e-testing#component-testing
One-click install
npx skills add https://github.com/marquesfelip/agents-and-skills --skill frontend-testing-strategy
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-testing-strategy
Source: https://github.com/marquesfelip/agents-and-skills/tree/main/skills/frontend-testing-strategy
Command: npx skills add https://github.com/marquesfelip/agents-and-skills --skill frontend-testing-strategy

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Frontend teams struggle to ensure UI correctness, accessibility, and maintainability across components, leading to flaky tests and missed regressions.

Core Features & Use Cases

  • Map the frontend test pyramid (unit, component, integration, E2E, visual) and apply best-practices.
  • Provide guidelines for unit tests (pure logic, hooks, reducers) and component tests with Testing Library.
  • Define integration and E2E strategies, mocking APIs (MSW) and ensuring accessible, deterministic tests.

Quick Start

Map your frontend test strategy and implement unit, component, and integration tests following the guide in this skill.

Frequently Asked Questions about frontend-testing-strategy

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
What is the best way to structure a frontend testing strategy for React, Vue, or Angular?▼

Component testing with Testing Library should avoid DOM-influencing implementation details and instead enforce accessible querying, ensuring tests remain deterministic and focus on user interactions rather than internal code structure.

How do I mock API interactions in frontend integration tests without creating flaky tests?▼

Mocking API interactions in frontend integration tests requires using MSW to intercept network requests, ensuring deterministic behavior by isolating component state management and user interactions from external backend dependencies.

How do I write unit tests for pure logic, hooks, and reducers in a frontend application?▼

Unit tests for pure logic, hooks, and reducers should be written using Jest or Vitest to validate state management transitions and business logic independently of DOM rendering and component integration layers.

Does this frontend testing strategy work with both Jest and Vitest for component testing?▼

Yes, the frontend testing strategy applies to React, Vue, and Angular applications using Jest, Vitest, Testing Library, and Playwright, coordinating unit, component, integration, visual, and accessibility testing across these tools.

Why does my frontend testing strategy produce flaky tests and miss UI regressions?▼

Flaky tests and missed regressions occur when frontend testing lacks a layered pyramid structure, uses implementation details in queries, or fails to mock APIs with MSW, causing non-deterministic behavior and poor coverage.

Related Skills

Explore More Software Engineering Skills→
eleva-labseleva-labs

test

Set up and run frontend tests with Jest, Vitest, Playwright, or Cypress.

Official
Intermediate
hidonguyenhidonguyen

ck:test

Execute unit, integration, e2e, and UI tests across JavaScript/TypeScript, Python, Go, Rust, and Flutter projects.

Community
Advanced
nguyenpv1980-wqnguyenpv1980-wq
2

vitest-unit-component-engineer

Write Vitest unit and component tests with environment selection and deterministic mocks.

Community
Advanced
cdalsoniiicdalsoniii

UI Testing Strategy

Design layered UI testing plans for frontend applications with tool recommendations.

Community
Intermediate