skills.rest
langgenius
langgeniusOFFICIAL
Explore all skills by this author →
Website𝕏@dify_aiGitHub

frontend-testing

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

152k|24.0k|Updated Apr 12, 2023
Search Tags:#automation#React#frontend#Vitest#RTL#generate#tests
One-click install
npx skills add https://github.com/langgenius/dify --skill frontend-testing-langgenius
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-testing
Source: https://github.com/langgenius/dify/tree/main/.claude/skills/frontend-testing
Command: npx skills add https://github.com/langgenius/dify --skill frontend-testing-langgenius

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill helps you generate high-quality Vitest + React Testing Library tests for Dify frontend components, hooks, and utilities, accelerating frontend QA and reducing manual test-writing time.

Core Features & Use Cases

  • Automatic test generation: Create unit and integration tests following Vitest + RTL conventions.
  • Test coverage guidance: Suggest coverage targets and patterns for components, hooks, and utilities.
  • Real-world workflow: Generate tests for a component and then review/modify the generated spec files with confidence.

Quick Start

Use the frontend-testing skill to generate tests for a given React component in the Dify frontend repo.

Frequently Asked Questions about frontend-testing

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

FAQPage Schema
How do I generate unit tests for React components using Vitest and React Testing Library?▼

Vitest + React Testing Library tests can be automatically generated for Dify frontend components, hooks, and utilities. The Skill creates spec files following project conventions, then you review and refine them using the pnpm analyze-component workflow to meet coverage goals incrementally.

Can I use Vitest and RTL to test React hooks and utilities in my frontend codebase?▼

Yes. Vitest and React Testing Library support unit and integration tests for hooks, utilities, and components. This Skill generates tests adhering to Vitest mock/timer patterns and RTL best practices, avoiding base component mocking and following Dify's defined testing workflow.

What's the workflow for writing and reviewing Vitest tests for frontend components?▼

Generate tests per file using this Skill, then analyze coverage with pnpm analyze-component and refine spec files incrementally. The workflow follows Dify project documentation, ensuring tests meet coverage targets while maintaining Vitest and RTL conventions.

How do I improve test coverage for existing React components and utilities?▼

Review existing spec files for completeness gaps and regenerate or augment tests using Vitest + RTL patterns. This Skill suggests coverage targets and generates tests aligned with Dify's testing standards to incrementally raise coverage.

What testing patterns should I follow when mocking in Vitest for React components?▼

Vitest mocking and timer usage must follow project conventions: avoid mocking base components and adhere to patterns in Dify's testing docs. This Skill applies these rules when generating tests for components, hooks, and utilities.

Related Skills

Explore More Software Engineering Skills→
mifunedevmifunedev
17

Test Frontend

Run Vitest and React Testing Library tests for React/Vite projects.

Official
Intermediate
ActiveInferenceInstituteActiveInferenceInstitute
30

gnn-report-generation

Generate HTML, Markdown, and JSON pipeline analysis reports from GNN outputs.

Community
Advanced
rnavarychrnavarych
14

role-frontend:build-tooling

Configure frontend builds with Vite, webpack 5, esbuild, and SWC, including monorepo management with Turborepo or Nx and linting via ESLint, Prettier, and Biome.

Community
Advanced
eleva-labseleva-labs

test

Set up and run frontend tests with Jest, Vitest, Playwright, or Cypress.

Official
Intermediate