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

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

For New Projects

1. •Framework Selection: Choose based on project needs
   • •See framework-selection.md
2. •Setup Configuration: Generate config files
3. •Install Dependencies: Add required packages
4. •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

Related skills: test-automation — E2E and Vitest automation for Angular/Firebase.