frontend-testing

The frontend-testing skill is designed to generate and review frontend tests for the Dify project using Vitest and React Testing Library (RTL). It helps developers create high-quality, convention-aligned test suites for frontend components, hooks, and utilities while reducing manual effort and improving test consistency. The skill is specifically intended for frontend testing workflows and follows the Dify testing conventions described in the referenced testing documentation, including the use of Vitest mocking and timer APIs (`vi.*`). It is not intended for backend testing with Python/pytest or end-to-end testing with Playwright and Cucumber.

Its main capabilities include generating test files for components, hooks, and utilities, reviewing existing tests for completeness, improving test coverage, and supporting spec-file creation and analysis workflows. The skill provides guidance on test structure, naming conventions, file placement, and recommended testing patterns such as rendering validation, props testing, user interaction testing, and edge-case handling. It also supports workflows involving `pnpm analyze-component` output and encourages best practices such as mocking external dependencies only, resetting mocks between tests, and using real project components and Zustand stores where appropriate.

This skill is particularly useful for frontend engineers working in the Dify codebase who need help writing or reviewing unit and integration tests. It is relevant when developers request help with Vitest, RTL, spec files, test coverage, or frontend testing patterns. Teams maintaining React-based frontend code can use it to standardize testing approaches, improve reliability, and accelerate test development while staying aligned with project-specific conventions.