frontend-testing

Generate and refine Vitest and React Testing Library tests for Dify frontend components.

Updated Oct 26, 2025
One-click install
npx skills add https://github.com/notbozho/defi-lending-dashboard --skill frontend-testing-notbozho
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: frontend-testing
Source: https://github.com/notbozho/defi-lending-dashboard/tree/main/.claude/skills/frontend-testing
Command: npx skills add https://github.com/notbozho/defi-lending-dashboard --skill frontend-testing-notbozho

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This skill helps teams generate, review, and maintain Vitest + React Testing Library tests for Dify frontend components, hooks, and utilities, reducing manual testing effort and boosting reliability.

Core Features & Use Cases

  • Integrated test workflow for unit and integration tests using Vitest and RTL.
  • Incremental testing guidance for multi-file directories with templates and references.
  • Enforces testing conventions and documentation references from web/testing/testing.md to maximize coverage and consistency.

Quick Start

Analyze the target file with pnpm analyze-component, then write and run the corresponding test file before proceeding to the next file.

Frequently Asked Questions about frontend-testing

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

FAQPage Schema
How do I automate Vitest and React Testing Library tests for frontend components?

To automate Vitest and React Testing Library tests, analyze the target file with pnpm analyze-component, then generate and run the corresponding test file using provided templates before proceeding to the next file.

What is the best way to write integration tests for multi-file frontend projects?

The best way to write integration tests for multi-file frontend projects is using incremental testing guidance with templates, ensuring real project components are used and specific mock patterns are enforced for reliable suites.

Does this frontend testing approach support both unit and integration tests?

Yes, this frontend testing approach supports both unit and integration tests, enforcing testing conventions from documentation to maximize coverage and consistency across hooks, utilities, and components.

Can I use this to enforce testing best practices and conventions across my project?

Yes, you can use this to enforce testing best practices by adhering to conventions from web/testing/testing.md, which guides incremental development and requires specific mock patterns for maintainable test suites.

Why do my frontend component tests fail when not using specific mock patterns?

Frontend component tests fail without specific mock patterns because the workflow requires them to ensure reliable, maintainable test suites, preventing inconsistencies when testing hooks and utilities.

When do I need coverage-focused tests for frontend hooks and utilities?

You need coverage-focused tests for frontend hooks and utilities when maximizing test coverage and consistency across a multi-file project, ensuring reliable behavior through enforced testing conventions.