What testing frameworks does this skill support?

This skill is specifically optimized for Vitest and React Testing Library (RTL) using jsdom, specifically tailored for the Dify project's frontend architecture.

Does it support end-to-end (E2E) testing?

No, this skill is focused on unit and integration testing. It does not handle E2E frameworks like Playwright or Cypress, nor backend Python tests.

Does it handle complex components with many dependencies?

Yes, it follows an incremental approach that prioritizes simple utilities first, then hooks, and finally complex components, using a 'Write-Run-Verify' loop to ensure accuracy.

Can it help me reach 100% code coverage?

Yes, the skill is designed with coverage goals of 100% for functions and statements and over 95% for branches and lines for every file it processes.

How does it handle API calls and external services?

The skill follows a strict mocking strategy, mocking only external API services and navigation while using real project components for integration tests to maintain realism.

Dify Frontend Testing

Name: Dify Frontend Testing
Author: langgenius

bylanggenius

•

124,859

•

セキュリティとテスト

Generates high-quality Vitest and React Testing Library tests for Dify's frontend components, hooks, and utilities.

This skill empowers Claude to act as a specialized frontend QA expert for the Dify project, streamlining the creation and review of unit and integration tests. It strictly adheres to Dify's testing specifications, utilizing a structured, incremental workflow to ensure high code coverage and stability. By leveraging Vitest, React Testing Library, and the AAA (Arrange-Act-Assert) pattern, it helps developers maintain production-grade code quality through automated test generation, complexity analysis, and intelligent mocking of external dependencies.

主な機能

01Built-in support for Vitest mock, timer APIs, and nock

02Complexity-based prioritization for robust test suites

03Integration with Dify's component analysis and review tools

04Incremental testing workflow for complex, multi-file directories

05124,859 GitHub stars

06Automated test generation for React components, hooks, and utilities

ユースケース

01Generating comprehensive unit tests for new UI components

02Increasing test coverage for existing utility functions and custom hooks

03Reviewing and refactoring complex components based on testability

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add langgenius/dify frontend-testing

For use in Claude.ai and ChatGPT

Download Skill