skills.rest
YFGaia
YFGaiaOFFICIAL
Explore all skills by this author →
GitHub

frontend-testing

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

2.2k|448|Updated Dec 9, 2024
Search Tags:#workflow#vitest#testing#frontend#unit-tests#integration-tests#rtl
One-click install
npx skills add https://github.com/YFGaia/dify-plus --skill frontend-testing-yfgaia
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-testing
Source: https://github.com/YFGaia/dify-plus/tree/main/.agents/skills/frontend-testing
Command: npx skills add https://github.com/YFGaia/dify-plus --skill frontend-testing-yfgaia

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

The frontend testing skill helps generate comprehensive tests for Dify's React components, hooks, and utilities, reducing manual writing and ensuring consistent coverage.

Core Features & Use Cases

  • Generate unit tests for components, hooks, and utilities using Vitest and React Testing Library.
  • Review and improve existing tests, applying established patterns and conventions.
  • Provide templates and guidance for incremental, integration-focused testing workflows.

Quick Start

Provide a component or hook path and the skill will generate a complete Vitest + RTL test suite following the project's testing conventions.

Frequently Asked Questions about frontend-testing

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

FAQPage Schema
How do I generate Vitest and RTL tests for React components automatically?▼

Generate Vitest and RTL tests for React components by providing the component or hook path, and the skill outputs a complete test suite following project conventions and TypeScript standards.

Can I use this to review and improve existing frontend unit tests?▼

Review and improve existing frontend unit tests by applying established patterns and conventions, ensuring your current Vitest test suites meet coverage goals and project standards.

What is the best way to set up an incremental integration testing workflow for React?▼

Set up an incremental integration testing workflow for React by following the provided workflow references, which guide you through progressive test coverage using Vitest and React Testing Library.

Does this testing skill enforce TypeScript and proper mocks for frontend unit tests?▼

The testing skill enforces TypeScript and proper mocks for frontend unit tests, applying project conventions automatically to ensure generated Vitest and RTL test suites are robust and type-safe.

What limitations exist when auto-generating integration tests for React hooks and utilities?▼

When auto-generating integration tests for React hooks and utilities, limitations include needing exact component paths upfront and relying on existing project configurations to properly resolve testing dependencies and mocks.

Related Skills

Explore More Software Engineering Skills→
SjdjdiejdrirhdkjejSjdjdiejdrirhdkjej

regression-test-generator

Generate regression tests from bug reports and detected test frameworks.

Community
Advanced
langgeniuslanggenius
151.8k

frontend-testing

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

Official
Intermediate
SandroBeatzSandroBeatz

lint-check

Run ESLint and TypeScript type checking on a codebase.

Community
Intermediate
cenjiecenjie

frontend-testing

Implement frontend tests for React and Vue with Jest, Vitest, React Testing Library, and Cypress.

Community
Intermediate