frontend-testing

SKILL.md

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

Covers component rendering, props validation, user interactions, edge cases, and async operations with Vitest 4.0.16 and React Testing Library 16.0

Enforces incremental, one-file-at-a-time testing workflow for multi-file directories; process by complexity (utilities → hooks → simple components → complex components → integration)

Requires integration-first approach: import real project components directly, mock only external APIs and next/navigation; use NuqsTestingAdapter for URL state hooks

Includes semantic query patterns, AAA structure (Arrange-Act-Assert), and black-box testing principles; targets 100% function and statement coverage per file

Dify Frontend Testing Skill

This skill enables Codex to generate high-quality, comprehensive frontend tests for the Dify project following established conventions and best practices.

⚠️ Authoritative Source: This skill is derived from web/docs/test.md. Use Vitest mock/timer APIs (vi.*).

When to Apply This Skill

Apply this skill when the user:

Asks to write tests for a component, hook, or utility

Asks to review existing tests for completeness

Mentions Vitest, React Testing Library, RTL, or spec files

Requests test coverage improvement

Uses pnpm analyze-component output as context

Mentions testing, unit tests, or integration tests for frontend code

Wants to understand testing patterns in the Dify codebase

Do NOT apply when: