skills.rest
Kwondongkyun
KwondongkyunCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

frontend-unit-test

Enforce AAA-pattern unit tests colocated with React source files using Vitest.

Updated Aug 23, 2026
Search Tags:#vitest#frontend#react#hooks#mocking#unit-testing#testing-library
One-click install
npx skills add https://github.com/Kwondongkyun/claude-code-settings --skill frontend-unit-test
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-unit-test
Source: https://github.com/Kwondongkyun/claude-code-settings/tree/main/skills/frontend-unit-test
Command: npx skills add https://github.com/Kwondongkyun/claude-code-settings --skill frontend-unit-test

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill standardizes and enforces frontend unit testing practices, ensuring consistency across utilities, custom hooks, and pure logic, so teams write reliable tests.

Core Features & Use Cases

  • Enforces the Arrange-Act-Assert (AAA) testing pattern across tests.
  • Encourages colocated tests in the same directory as the source code and avoids separate tests directories.
  • Provides clear mocking guidelines that restrict mocking to external dependencies and support testing of custom hooks with renderHook, including provider-wrapped scenarios.
  • Supports asynchronous test patterns and common edge cases to improve test robustness.

Quick Start

Create tests that follow the AAA pattern in the same directory as the code under test and run Vitest to validate behavior.

Frequently Asked Questions about frontend-unit-test

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

FAQPage Schema
Why should I colocate Vitest unit tests with React source files instead of using a __tests__ directory?▼

Colocating Vitest unit tests with source files improves maintainability by keeping tests adjacent to the code under test. This approach avoids separate __tests__ directories, ensuring related logic and test cases evolve together within the same directory.

How do I test custom React hooks wrapped in providers using Vitest and Testing Library?▼

To test custom React hooks wrapped in providers, use the renderHook utility from Testing Library. This skill guides wrapping the hook with necessary providers during the test setup to properly validate provider-dependent hook logic in a Vitest environment.

Does this frontend unit testing approach enforce the Arrange-Act-Assert pattern?▼

Yes, this frontend unit testing approach enforces the Arrange-Act-Assert (AAA) pattern. It standardizes test structures by requiring distinct setup, execution, and assertion phases to ensure reliable and readable Vitest test cases for React codebases.

What are the mocking guidelines for frontend unit tests using Vitest?▼

Mocking guidelines for Vitest restrict mocking strictly to external dependencies. This prevents over-mocking internal logic, ensuring tests validate actual application behavior while safely isolating external modules during frontend unit testing.

Can I use .spec.ts naming conventions for frontend unit tests with this setup?▼

No, you should not use .spec.ts naming conventions for frontend unit tests. This configuration requires specific test file naming conventions, explicitly avoiding .spec.ts extensions to maintain consistency across the React codebase.

Related Skills

Explore More Software Engineering Skills→
fcalellfcalell

vitest

Run JavaScript/TypeScript unit and integration tests with Vitest, including mocked external dependencies and React hooks/API checks.

Community
Advanced
Sheldon-92Sheldon-92
3

Testing

Execute test suites and report failures with coverage metrics.

Community
Intermediate
bryanvillamilpragmabryanvillamilpragma
3

eslint-prettier-config

Set up ESLint and Prettier configurations for TypeScript and React projects.

Community
Advanced
anicca-labsanicca-labs

testing

Automate React Native component and hook testing with Jest and @testing-library/react-native.

Official
Intermediate