test-frontend-unit

Guide frontend unit and component tests across React, Vue, Svelte, and Angular.

2|Updated Mar 1, 2026

Search Tags:#vitest #frontend #hooks #mocking #unit-testing #testing-library #component-testing

Ready to run

npx skills add https://github.com/nholder88/ai-agent-workflows --skill test-frontend-unit-nholder88

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: test-frontend-unit
Source: https://github.com/nholder88/ai-agent-workflows/tree/main/skills/test-frontend-unit
Command: npx skills add https://github.com/nholder88/ai-agent-workflows --skill test-frontend-unit-nholder88

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Frontend unit and component testing for React, Vue, Svelte, Angular, and similar frameworks. It covers component rendering, props, events, hooks, composables, stores, utilities, mocking, and snapshot/visual testing. USE FOR: component tests, hook tests, store tests, utility tests, client-side routing tests, API client mocking. DO NOT USE FOR: backend unit tests (test-backend-unit), E2E/UI tests (test-e2e-ui), Playwright BDD scenarios (test-e2e-ui).

Core Features & Use Cases

Framework-agnostic testing guidelines across React, Vue, Svelte, Angular, and similar frameworks.
Supports test runners (Vitest primary, Jest when project uses it) and common libraries like @testing-library for components.
Covers test patterns: Component tests, Hook/composable tests, Store/state tests, Utility tests, and Mocking strategies.

Quick Start

Point me at a component, hook, store, or utility and I will generate a complete unit test suite.

Frequently Asked Questions about test-frontend-unit

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

FAQPage Schema

How do I write frontend component tests for React, Vue, Svelte, and Angular?▼

Frontend hook tests validate custom hooks or composables by testing state logic and effects in isolation. This generates framework-agnostic hook test suites that mock external dependencies and assert state transitions.

Can I use Vitest for testing instead of Jest?▼

Vitest is the primary test runner for frontend unit testing, while Jest is supported if the project already uses it. Both runners integrate with @testing-library to execute component and hook tests.

What is the best way to mock API clients and external modules in unit tests?▼

Mocking API clients and external modules isolates components and hooks from backend dependencies during frontend unit testing. This provides mock implementations and spies to assert interaction behavior without real network calls.

Does this cover testing client-side routing and state stores?▼

Client-side routing and state store tests are covered to verify navigation flows and state mutations across frameworks. This produces test patterns that assert store state changes and route transitions accurately.

When should I not use this approach for testing my application?▼

Avoid frontend unit testing for backend unit tests, E2E/UI tests, or Playwright BDD scenarios. Use it exclusively for component, hook, store, and utility tests on the client side.