frontend-testing

Generate Vitest and React Testing Library tests for Dify frontend components, hooks, and utilities.

Updated Feb 7, 2026

Search Tags:#vitest #testing #react #unit-testing #integration-testing #rtl

Ready to run

npx skills add https://github.com/akaiHuang/faw-creative-studio --skill frontend-testing-akaihuang

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: frontend-testing
Source: https://github.com/akaiHuang/faw-creative-studio/tree/main/.claude/skills/frontend-testing
Command: npx skills add https://github.com/akaiHuang/faw-creative-studio --skill frontend-testing-akaihuang

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) and assets (resource) components.

What problem does it solve?

Frontend testing can be time-consuming and error-prone; this skill generates high-quality Vitest + React Testing Library tests for Dify frontend components, hooks, and utilities, ensuring consistent coverage and adherence to project conventions.

Core Features & Use Cases

Generate unit and integration tests for components, hooks, and utilities using Vitest and RTL.
Follow Dify's testing patterns and best practices described in web/testing/testing.md, including async tests, mocks, and accessibility considerations.
Provide ready-to-run test templates and guidance to improve coverage and maintainability across the frontend codebase.

Quick Start

Generate Vitest + RTL tests for the specified frontend file following repository conventions.

Frequently Asked Questions about frontend-testing

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

FAQPage Schema

How do I generate Vitest and RTL tests for React components?▼

Generate Vitest and React Testing Library tests by targeting specific frontend components, hooks, or utilities. The skill outputs test templates covering unit tests, integration tests, and edge cases while adhering to project conventions.

What's the best way to mock i18n and routing in React Testing Library integration tests?▼

Mock i18n and routing in React Testing Library tests by applying the specific patterns established in the project guidelines. The skill automatically injects these routing and i18n mocks to ensure consistent integration test execution.

How do I improve frontend test coverage across a directory of utilities and hooks?▼

Improve frontend test coverage by running the skill across entire directories or single files. It identifies untested utilities and hooks, generating ready-to-run Vitest test templates that expand codebase coverage.

Does this frontend testing approach support TypeScript typing and async test patterns?▼

Yes, the frontend testing approach fully supports TypeScript typing and async test patterns. It leverages Vitest and RTL to handle asynchronous operations, mock functions, and accessibility checks defined by repository conventions.

Can I use this to write accessibility checks for React component unit tests?▼

Yes, you can use this to write accessibility checks for React component unit tests. The skill incorporates accessibility considerations into the generated Vitest and RTL test suites based on the project's testing guidelines.