skills.rest
LeandroBenjaminL
LeandroBenjaminLCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

frontend-testing

Automate frontend testing with Vitest and Playwright for unit, integration, and E2E tests.

Updated May 9, 2026
Search Tags:#vitest#testing#react#javascript#playwright
One-click install
npx skills add https://github.com/LeandroBenjaminL/lend-ai --skill frontend-testing-leandrobenjaminl
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-testing
Source: https://github.com/LeandroBenjaminL/lend-ai/tree/main/skills/frontend-testing
Command: npx skills add https://github.com/LeandroBenjaminL/lend-ai --skill frontend-testing-leandrobenjaminl

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires vitest, playwright, and includes scripts (resource) components.

What problem does it solve?

Frontend testing can be time-consuming and complex. This Skill streamlines the process with Vitest and Playwright, allowing you to efficiently write and run tests for your components, hooks, or E2E.

Core Features & Use Cases

  • Unit and Integration Testing: Supports unit and integration tests for components and hooks with Vitest.
  • End-to-End Testing: Executes End-to-End (E2E) tests using Playwright.
  • Mocking and Simulation: Facilitates API and service mocking.
  • Cobertura: Ensures at least 80% coverage for critical code lines.

Quick Start

Run tests for your React component using the frontend-testing skill: run-test frontend-testing "ComponentName.test.tsx" --type unit.

Frequently Asked Questions about frontend-testing

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

FAQPage Schema
How do I automate frontend testing for React components with Vitest and Playwright?▼

Automate frontend testing by using Vitest for unit and integration tests on React components and hooks, and Playwright for end-to-end testing. This combination streamlines workflows and validates component behavior efficiently.

What is the best way to unit test React hooks using Vitest?▼

The best way to unit test React hooks using Vitest is to leverage the Skill's automated testing workflows, which provide built-in capabilities for unit tests and mocking. This ensures your hooks are validated quickly and reliably.

How do I mock API services for JavaScript end-to-end testing?▼

Mock API services for JavaScript end-to-end testing by utilizing the built-in mocking and simulation features provided by the testing workflow. This allows you to isolate components and simulate API interactions during your Playwright E2E test runs.

Does this testing workflow enforce a specific code coverage threshold?▼

Yes, the testing workflow enforces a code coverage threshold by ensuring at least 80% coverage for critical code lines. This guarantees that your most important React and JavaScript logic is thoroughly validated by your Vitest tests.

Can I run both unit tests and E2E tests in the same JavaScript project?▼

Yes, you can run both unit and E2E tests in the same JavaScript project because the workflow integrates Vitest and Playwright. This allows you to execute component-level tests and browser-driven end-to-end tests seamlessly within a single environment.

Related Skills

Explore More Software Engineering Skills→
yuheitomiyuheitomi

set-up-biome

Configure Biome and Shadcn/UI preferences in React projects with pnpm.

Community
Advanced
cffrankcffrank

test-analyzer

Parse Vitest JSON output to generate test quality metrics and reports.

Community
Advanced
ngxtmngxtm

React Tooling

Analyze React application performance, debug hooks, and optimize builds.

Community
Intermediate
eleva-labseleva-labs

test

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

Official
Intermediate