Dify Frontend Testing

Name: Dify Frontend Testing
Rating: 4.5 (1248 reviews)
Author: Dify

Security & Testing

125K downloads

by Dify

Generates high-quality Vitest and React Testing Library tests for Dify's frontend components, hooks, and utilities.

Installation

Install this skill using the Claude CLI:

claude skill install dify-frontend-testing

Usage

Once installed, this skill will automatically enhance your AI agent's capabilities in the security & testing domain.

Example prompt:

"Use the Dify Frontend Testing skill to help me with my project"

Use Cases & Examples

Component Testing

Generate comprehensive tests for React components with user interactions

Test a form component with validation and submission

import { render, screen, fireEvent } from '@testing-library/react';
import { LoginForm } from './LoginForm';

test('validates email format', () => {
  render(<LoginForm />);
  const emailInput = screen.getByLabelText('Email');
  fireEvent.change(emailInput, { target: { value: 'invalid' } });
  expect(screen.getByText('Invalid email')).toBeInTheDocument();
});

Hook Testing

Test custom React hooks with renderHook utility

Test a data fetching hook with loading and error states

Prerequisites & Requirements

Dependencies

Vitestv1.0+

React Testing Libraryv14.0+

TypeScriptv5.0+

Required

Optional

System Requirements

Node.js18.0+
Required for Vitest

Works Well With

Works

Webapp Testing

49K

Anthropic

Toolkit for interacting with and testing local web applications using Playwright. Supports verifying frontend functionality and debugging UI behavior.

Security & Testing

Use together for E2E and unit testing

Works

Playwright Automation

43K

lackeyjb

Enables Claude to write and execute any Playwright automation on-the-fly - from simple page tests to complex multi-step flows.

Browser Automation

Combine for comprehensive test coverage

Works

Webapp Testing

49K

Anthropic

Toolkit for interacting with and testing local web applications using Playwright. Supports verifying frontend functionality and debugging UI behavior.

Security & Testing

Use together for E2E and unit testing

Works

Playwright Automation

43K

lackeyjb

Enables Claude to write and execute any Playwright automation on-the-fly - from simple page tests to complex multi-step flows.

Browser Automation

Combine for comprehensive test coverage

Version History & Roadmap

Changelog

v2.0.0

Jan 10, 2024

•Added support for Vitest 1.0
•Improved test generation for hooks
•Enhanced accessibility testing patterns

Advanced Configuration

TEST_COVERAGE_THRESHOLD

Minimum code coverage percentage

Typenumber

Default80

Example

TEST_COVERAGE_THRESHOLD=90

Performance Metrics

Test Generation Time

0seconds

Test Success Rate

Improving

Declining

Stable

Troubleshooting Guide

Solution

Ensure vitest.config.ts includes proper path aliases

Code Example

// vitest.config.ts
export default defineConfig({
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src')
    }
  }
});

Documentation

For detailed documentation and advanced usage, visit the skill's repository or check the official Claude documentation.

Dify Frontend Testing

Installation

Usage

Use Cases & Examples

Component Testing

Hook Testing

Prerequisites & Requirements

Dependencies

System Requirements

Related Skills

Works Well With

Webapp Testing

Playwright Automation

Webapp Testing

Playwright Automation

Version History & Roadmap

Changelog

Advanced Configuration

TEST_COVERAGE_THRESHOLD

Performance Metrics

Test Generation Time

Test Success Rate

Troubleshooting Guide

Tests fail with 'Cannot find module' errors

Solution

Documentation

Use Cases & Examples

Component Testing

Hook Testing

Prerequisites & Requirements

Dependencies

System Requirements

Related Skills

Works Well With

Webapp Testing

Playwright Automation

Webapp Testing

Playwright Automation

Version History & Roadmap

Changelog

Advanced Configuration

TEST_COVERAGE_THRESHOLD

Performance Metrics

Test Generation Time

Test Success Rate

Troubleshooting Guide

Tests fail with 'Cannot find module' errors

Solution