Does it mock base components by default?

No, it follows an integration-first strategy where real project components and base components are imported directly, while only external APIs and complex navigation are mocked.

What testing frameworks does this skill support?

This skill is specifically optimized for Vitest and React Testing Library (RTL) within the Dify project ecosystem.

Can I test multiple files at once?

The skill utilizes an incremental approach—writing, running, and fixing one test file at a time—to ensure each file passes before proceeding to the next.

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

No, this skill focuses on unit and integration tests. For E2E testing, you should use Playwright or Cypress workflows.

How does it handle complex components with many dependencies?

The skill follows a complexity-based order and will suggest refactoring components with high complexity scores or excessive line counts before generating tests.

Frontend Testing for Dify

Name: Frontend Testing for Dify
Author: pranowoaryawo-cyber

bypranowoaryawo-cyber

0•

セキュリティとテスト

Generates Vitest and React Testing Library tests for Dify frontend components, hooks, and utilities while ensuring high code coverage.

This skill streamlines the testing workflow for Dify's web environment by automating the creation of robust unit and integration tests. It enforces an incremental testing approach, ensuring high code coverage and reliability for components, hooks, and utility functions. By leveraging Vitest and React Testing Library, it helps developers maintain the AAA (Arrange-Act-Assert) pattern, handle complex mocking scenarios, and produce semantic, accessible tests that focus on observable user behavior rather than implementation details.

主な機能

010 GitHub stars

02Code complexity analysis and refactoring recommendations prior to test generation.

03Strict enforcement of AAA testing patterns and semantic query best practices.

04Automated Vitest and RTL test generation for React components and hooks.

05Incremental testing workflow for systematic processing of multi-file directories.

06Integrated mocking patterns for API services, Zustand stores, and Next.js navigation.

ユースケース

01Improving test coverage across entire frontend directories using a file-by-file verification approach.

02Generating comprehensive unit tests for new UI components to reach 100% function coverage.

03Reviewing existing test files for completeness, edge cases, and adherence to Dify's testing standards.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add pranowoaryawo-cyber/code frontend-testing

For use in Claude.ai and ChatGPT

主な機能

010 GitHub stars

02Code complexity analysis and refactoring recommendations prior to test generation.

03Strict enforcement of AAA testing patterns and semantic query best practices.

04Automated Vitest and RTL test generation for React components and hooks.

05Incremental testing workflow for systematic processing of multi-file directories.

06Integrated mocking patterns for API services, Zustand stores, and Next.js navigation.

ユースケース

01Improving test coverage across entire frontend directories using a file-by-file verification approach.

02Generating comprehensive unit tests for new UI components to reach 100% function coverage.

03Reviewing existing test files for completeness, edge cases, and adherence to Dify's testing standards.