How to Generate Dify Frontend Tests with frontend-testing
Writing frontend test code from scratch is time-consuming. Choosing the right testing strategy based on component complexity adds another layer of decision-making.
This article explains how to efficiently generate tests using the frontend-testing skill with Vitest and React Testing Library from the Dify repository.
What This Skill Does
frontend-testing guides test generation for Dify frontend components:
- Test generation with Vitest 4.0 + React Testing Library 16.0
- Component complexity analysis (
pnpm analyze-component) - AAA pattern (Arrange-Act-Assert) test structure
- Black-box testing (test behavior, not implementation)
- Incremental workflow (simple → complex, one file at a time)
Suited for developers improving Dify frontend test coverage.
Installation
Prerequisites
- Claude Code installed
- Dify project source code
Install Command
claude mcp add github.com/langgenius/dify/tree/main/.claude/skills/frontend-testing
Usage
Running Tests
pnpm test # Run all tests
pnpm test path/to/file.spec.tsx # Individual file
pnpm test:coverage # Coverage report
Analyzing Complexity
pnpm analyze-component src/components/Button.tsx
Complexity scores determine strategy: 0-25 (test directly), 26-50 (consider minor refactoring), 51+ (refactor recommended).
Test Structure
Tests follow the AAA pattern:
describe('ComponentName', () => {
beforeEach(() => {
vi.clearAllMocks()
})
describe('Rendering', () => { /* required */ })
describe('Props', () => { /* required */ })
describe('User Interactions', () => { /* conditional */ })
describe('Edge Cases', () => { /* required */ })
})
Coverage Goals
100% function/statement coverage, >95% branch/line coverage.
Important Considerations
Process Incrementally
Do not process multiple files at once. Write test → run → fix → next file. Never proceed until the current file passes.
Mock APIs Only, Not Components
Prioritize integration tests. Import real components; only mock APIs using nock 14.0.
Semantic Test Names
Use should <behavior> when <condition> format so test names alone explain what's being verified.
Summary
frontend-testing enables efficient Dify frontend test generation through complexity-based incremental workflows. Black-box testing with AAA patterns produces maintainable test code.