Frontend Unit Test Generator Skill

Frontend Unit Test Generator

An intelligent assistant for creating and managing unit tests in frontend projects. This skill automatically detects your project's testing setup and generates appropriate, framework-consistent test code.

Quick Start

Installation

npm install

Basic Usage

Generate tests for any file or component:

node scripts/detect-test-framework.js /path/to/project
node scripts/generate-test.js src/components/Button.js

Core Capabilities

Framework Detection

Automatically identifies your project's testing stack:

Test Frameworks: Jest, Vitest, Mocha, Jasmine
Assertion Libraries: Expect, Chai, Should
Testing Tools: Testing Library, Sinon, Cypress
Configuration Files: jest.config.js, vitest.config.ts, mocha.opts
Test Structure: tests/, test/, tests/, *.test.js patterns

Smart Test Generation

Component Tests: React, Vue, Angular with Testing Library
Function Tests: Pure functions, async functions, API calls
Mock Generation: API mocks, module mocks, time mocks
Edge Cases: Null/undefined handling, error scenarios
Coverage Analysis: Identifies untested code paths

Framework Consistency

Maintains your project's existing testing patterns:

Same assertion style (expect vs assert)
Consistent file organization
Compatible test descriptions
Proper mock patterns

Usage Examples

1. Detect Project Testing Setup

const TestFrameworkDetector = require('./scripts/detect-test-framework');

const detector = new TestFrameworkDetector('./my-project');
const analysis = detector.detect();

console.log(analysis);
// Output: Frameworks, utilities, config files, recommendations

2. Generate Test for Component

const TestGenerator = require('./scripts/generate-test');

const generator = new TestGenerator('./my-project', {
  framework: 'jest',
  react: true
});

const result = generator.generateForFile('src/components/Button.jsx');
// Returns: { testPath, testContent, analysis }

3. Setup Testing for New Project

const TestConfigGenerator = require('./scripts/setup-test-config');

const config = new TestConfigGenerator('./my-project', 'jest', {
  react: true,
  typescript: true,
  coverage: true
});

const files = config.writeConfigs(); // Creates config files
const deps = config.getDependencies(); // Returns required packages

Interactive Test Creation

For Existing Projects

Analyze Project: Run framework detection first
Select File: Choose file/component to test
Generate Tests: Auto-generate consistent test code
Review & Customize: Add specific test cases
Run Tests: Verify tests pass

For New Projects

Framework Selection: Choose based on project needs
- See framework-selection.md
Setup Configuration: Generate config files
Install Dependencies: Add required packages
Create First Tests: Start with critical components

Generated Test Patterns

React Component Tests

describe('Button', () => {
  it('renders without crashing', () => {
    render(<Button />);
    expect(screen.getByRole('button')).toBeInTheDocument();
  });

  it('handles click events', async () => {
    const handleClick = jest.fn();
    render(<Button onClick={handleClick} />);

    await userEvent.click(screen.getByRole('button'));
    expect(handleClick).toHaveBeenCalled();
  });
});

Vue Component Tests

describe('Button', () => {
  it('renders without crashing', () => {
    const wrapper = mount(Button);
    expect(wrapper.exists()).toBe(true);
  });

  it('emits click event', async () => {
    const wrapper = mount(Button);
    await wrapper.trigger('click');

    expect(wrapper.emitted('click')).toBeTruthy();
  });
});

Function Tests

describe('formatCurrency', () => {
  it('formats numbers correctly', () => {
    expect(formatCurrency(1234.56)).toBe('$1,234.56');
  });

  it('handles edge cases', () => {
    expect(formatCurrency(null)).toBe('$0.00');
    expect(formatCurrency(0)).toBe('$0.00');
  });
});

Configuration Options

TestGenerator Options

{
  framework: 'jest' | 'vitest' | 'mocha',  // Test framework
  assertionStyle: 'expect' | 'assert',     // Assertion style
  includeMocks: true,                      // Include mock generation
  testType: 'unit' | 'integration' | 'e2e', // Test type
  coverage: true,                          // Include coverage
  environment: 'jsdom' | 'node'            // Test environment
}

Best Practices

Test Organization

Co-location: Keep tests near source files
Naming: Use .test.js or .spec.js suffix
Structure: Group related tests in describe blocks
Documentation: Add meaningful test descriptions

Test Quality

AAA Pattern: Arrange, Act, Assert
Single Responsibility: One assertion per test
Descriptive Names: What behavior is being tested
Edge Cases: Test null, undefined, errors

Integration Examples

Create React App

# Already has Jest configured
node scripts/generate-test.js src/components/Button.jsx

Vite + Vue

# Setup Vitest
node scripts/setup-test-config.js vitest '{"vue": true}'
# Generate tests
node scripts/generate-test.js src/components/Button.vue

Existing Mocha Project

# Detect setup
node scripts/detect-test-framework.js .
# Add new tests
node scripts/generate-test.js src/utils/format.js '{"framework": "mocha"}'

Resources

scripts/

Executable Node.js scripts for test generation and configuration:

detect-test-framework.js - Analyzes existing testing setup
generate-test.js - Creates test files from source code
setup-test-config.js - Generates testing configuration files

references/

Comprehensive documentation and guides:

test-patterns.md - Testing patterns and best practices
framework-selection.md - Framework comparison and selection guide

assets/

Template files for common testing scenarios:

react-component.template.test.jsx - React component test template
vue-component.template.test.js - Vue component test template

Agent Skills: Frontend Unit Test Generator

Skill Files