Jest Generator Skill

Purpose

This skill generates Jest-based unit tests for JavaScript and TypeScript code, following Jest conventions, best practices, and project standards. It creates comprehensive test suites with proper mocking, describe blocks, and code organization.

When to Use

• Generate Jest tests for JavaScript/TypeScript modules

• Create test files for React components

• Add missing test coverage to existing JS/TS code

• Need Jest-specific patterns (mocks, spies, snapshots)

Test File Naming Convention

Source to Test Mapping:

• Source: src/components/Feature.tsx

• Test: src/components/Feature.test.tsx

• Pattern: <source_filename>.test.ts or <source_filename>.test.js

Examples:

• src/utils/validator.ts → src/utils/validator.test.ts

• src/models/User.ts → src/models/User.test.ts

• src/services/api.js → src/services/api.test.js

• src/components/Button.tsx → src/components/Button.test.tsx

Jest Test Generation Workflow

1. Analyze JavaScript/TypeScript Source Code

Read the source file:

Read the source to understand structure

cat src/components/Feature.tsx

Identify test targets:

• Exported functions to test

• Classes and methods

• React components (if applicable)

• Error conditions

• Edge cases

• Dependencies and imports

Output: List of functions/classes/components requiring tests

2. Generate Test File Structure

Create test file with proper naming:

/**

• Unit tests for [module name]
• Tests cover:
• • [Functionality 1]
• • [Functionality 2]
• • Error handling and edge cases */

import { functionToTest, ClassToTest, ComponentToTest } from './Feature'; import { mockDependency } from './mocks/dependency';

// Mock external dependencies jest.mock('./dependency'); jest.mock('external-library');

// ============================================================================ // Test Setup // ============================================================================

describe('ModuleName', () => { // Setup before each test beforeEach(() => { jest.clearAllMocks(); });

// Cleanup after each test afterEach(() => { jest.restoreAllMocks(); });

// ======================================================================== // Class Tests // ========================================================================

describe('ClassName', () => { let instance: ClassToTest;

beforeEach(() => {
  instance = new ClassToTest();
});

describe('constructor', () => {
  it('should initialize with valid parameters', () => {
    // Arrange & Act
    const instance = new ClassToTest({ param: 'value' });

    // Assert
    expect(instance.param).toBe('value');
    expect(instance.initialized).toBe(true);
  });

  it('should throw error with invalid parameters', () => {
    // Arrange
    const invalidParams = null;

    // Act & Assert
    expect(() => new ClassToTest(invalidParams)).toThrow('Invalid parameters');
  });
});

describe('method', () => {
  it('should return expected result with valid input', () => {
    // Arrange
    const input = { name: 'test', value: 123 };

    // Act
    const result = instance.method(input);

    // Assert
    expect(result.processed).toBe(true);
    expect(result.name).toBe('test');
    expect(result.value).toBe(123);
  });

  it('should throw error with invalid input', () => {
    // Arrange
    const invalidInput = null;

    // Act & Assert
    expect(() => instance.method(invalidInput)).toThrow('Invalid input');
  });

  it('should handle edge case with empty input', () => {
    // Arrange
    const emptyInput = {};

    // Act
    const result = instance.method(emptyInput);

    // Assert
    expect(result).toEqual({});
  });
});

});

// ======================================================================== // Function Tests // ========================================================================

describe('functionToTest', () => { it('should return expected result with valid input', () => { // Arrange const input = { key: 'value' }; const expected = { processed: true, key: 'value' };

  // Act
  const result = functionToTest(input);

  // Assert
  expect(result).toEqual(expected);
});

it('should handle null input', () => {
  // Arrange
  const input = null;

  // Act & Assert
  expect(() => functionToTest(input)).toThrow('Input cannot be null');
});

it('should handle undefined input', () => {
  // Arrange
  const input = undefined;

  // Act
  const result = functionToTest(input);

  // Assert
  expect(result).toBeUndefined();
});

});

// ======================================================================== // Tests with Mocks // ========================================================================

describe('functionWithDependency', () => { it('should call dependency with correct parameters', () => { // Arrange const input = { key: 'value' }; const mockDep = jest.fn().mockReturnValue({ status: 'success' });

  // Act
  const result = functionWithDependency(input, mockDep);

  // Assert
  expect(mockDep).toHaveBeenCalledWith(input);
  expect(mockDep).toHaveBeenCalledTimes(1);
  expect(result.status).toBe('success');
});

it('should handle dependency error', () => {
  // Arrange
  const input = { key: 'value' };
  const mockDep = jest.fn().mockRejectedValue(new Error('API error'));

  // Act & Assert
  await expect(functionWithDependency(input, mockDep))
    .rejects.toThrow('API error');
});

});

// ======================================================================== // Async Tests // ========================================================================

describe('asyncFunction', () => { it('should resolve with expected result', async () => { // Arrange const input = { key: 'value' };

  // Act
  const result = await asyncFunction(input);

  // Assert
  expect(result.success).toBe(true);
  expect(result.data).toEqual(input);
});

it('should reject with error on failure', async () => {
  // Arrange
  const invalidInput = null;

  // Act & Assert
  await expect(asyncFunction(invalidInput))
    .rejects.toThrow('Invalid input');
});

it('should handle timeout', async () => {
  // Arrange
  jest.useFakeTimers();
  const promise = asyncFunctionWithTimeout();

  // Act
  jest.advanceTimersByTime(5000);

  // Assert
  await expect(promise).rejects.toThrow('Timeout');
  jest.useRealTimers();
});

});

// ======================================================================== // Parametrized Tests (using test.each) // ========================================================================

describe('validation', () => { it.each([ ['valid@email.com', true], ['invalid.email', false], ['', false], [null, false], ['@no-user.com', false], ])('should validate email "%s" as %s', (email, expected) => { // Act const result = validateEmail(email);

  // Assert
  expect(result).toBe(expected);
});

});

describe('permissions', () => { it.each([ ['admin', 'all'], ['moderator', 'edit'], ['user', 'read'], ['guest', 'none'], ])('should return "%s" permission for %s user', (userType, expected) => { // Arrange const user = { type: userType };

  // Act
  const result = getPermissions(user);

  // Assert
  expect(result).toBe(expected);
});

}); });

Deliverable: Complete Jest test file

Jest-Specific Patterns

1. Mocking

Mock entire module:

jest.mock('./api', () => ({ fetchData: jest.fn(), postData: jest.fn(), }));

Mock specific function:

import { fetchData } from './api';

jest.mock('./api');

describe('Component', () => { it('should fetch data', async () => { // Arrange (fetchData as jest.Mock).mockResolvedValue({ data: 'test' });

// Act
const result = await getData();

// Assert
expect(result.data).toBe('test');

}); });

Mock with implementation:

const mockFn = jest.fn((x: number) => x * 2);

// Use the mock expect(mockFn(2)).toBe(4); expect(mockFn).toHaveBeenCalledWith(2);

Spy on method:

const obj = { method: () => 'original', };

const spy = jest.spyOn(obj, 'method').mockReturnValue('mocked');

expect(obj.method()).toBe('mocked'); expect(spy).toHaveBeenCalled();

spy.mockRestore(); // Restore original implementation

2. Async Testing

Testing promises:

it('should resolve with data', async () => { // Using async/await const result = await asyncFunction(); expect(result).toBeDefined(); });

it('should reject with error', async () => { // Using async/await with expect await expect(asyncFunction()).rejects.toThrow('Error'); });

it('should handle promise chain', () => { // Using .then() return asyncFunction().then(result => { expect(result).toBeDefined(); }); });

Testing async with done callback:

it('should complete async operation', (done) => { asyncOperation((result) => { expect(result).toBe('complete'); done(); }); });

3. Timers

Mock timers:

describe('with fake timers', () => { beforeEach(() => { jest.useFakeTimers(); });

afterEach(() => { jest.useRealTimers(); });

it('should execute after timeout', () => { const callback = jest.fn();

setTimeout(callback, 1000);

// Fast-forward time
jest.advanceTimersByTime(1000);

expect(callback).toHaveBeenCalled();

});

it('should run all timers', () => { const callback = jest.fn();

setTimeout(callback, 1000);
setTimeout(callback, 2000);

jest.runAllTimers();

expect(callback).toHaveBeenCalledTimes(2);

}); });

4. Snapshots

Snapshot testing:

it('should match snapshot', () => { const data = { name: 'test', value: 123, nested: { field: 'value', }, };

expect(data).toMatchSnapshot(); });

it('should match inline snapshot', () => { const result = formatData({ name: 'test' });

expect(result).toMatchInlineSnapshot( { "formatted": true, "name": "test", } ); });

5. Setup and Teardown

Test lifecycle hooks:

describe('TestSuite', () => { beforeAll(() => { // Runs once before all tests in this describe block });

afterAll(() => { // Runs once after all tests in this describe block });

beforeEach(() => { // Runs before each test in this describe block });

afterEach(() => { // Runs after each test in this describe block });

it('test 1', () => {}); it('test 2', () => {}); });

6. Matchers

Common Jest matchers:

// Equality expect(value).toBe(expected); // Strict equality (===) expect(value).toEqual(expected); // Deep equality expect(value).toStrictEqual(expected); // Strict deep equality

// Truthiness expect(value).toBeTruthy(); expect(value).toBeFalsy(); expect(value).toBeNull(); expect(value).toBeUndefined(); expect(value).toBeDefined();

// Numbers expect(value).toBeGreaterThan(3); expect(value).toBeGreaterThanOrEqual(3); expect(value).toBeLessThan(5); expect(value).toBeLessThanOrEqual(5); expect(value).toBeCloseTo(0.3, 5); // For floating point

// Strings expect(string).toMatch(/pattern/); expect(string).toContain('substring');

// Arrays and iterables expect(array).toContain(item); expect(array).toHaveLength(3); expect(array).toContainEqual(item);

// Objects expect(obj).toHaveProperty('key'); expect(obj).toHaveProperty('key', value); expect(obj).toMatchObject({ key: value });

// Functions expect(fn).toThrow(); expect(fn).toThrow('error message'); expect(fn).toThrow(ErrorClass);

// Promises await expect(promise).resolves.toBe(value); await expect(promise).rejects.toThrow();

// Mock functions expect(mockFn).toHaveBeenCalled(); expect(mockFn).toHaveBeenCalledTimes(2); expect(mockFn).toHaveBeenCalledWith(arg1, arg2); expect(mockFn).toHaveBeenLastCalledWith(arg);

React Component Testing

Basic Component Test

import React from 'react'; import { render, screen, fireEvent } from '@testing-library/react'; import '@testing-library/jest-dom'; import { Button } from './Button';

describe('Button', () => { it('should render with text', () => { // Arrange & Act render(<Button>Click me</Button>);

// Assert
expect(screen.getByText('Click me')).toBeInTheDocument();

});

it('should call onClick when clicked', () => { // Arrange const handleClick = jest.fn(); render(<Button onClick={handleClick}>Click me</Button>);

// Act
fireEvent.click(screen.getByText('Click me'));

// Assert
expect(handleClick).toHaveBeenCalledTimes(1);

});

it('should be disabled when disabled prop is true', () => { // Arrange & Act render(<Button disabled>Click me</Button>);

// Assert
expect(screen.getByText('Click me')).toBeDisabled();

}); });

Component with Hooks

import { renderHook, act } from '@testing-library/react'; import { useCounter } from './useCounter';

describe('useCounter', () => { it('should initialize with default value', () => { // Arrange & Act const { result } = renderHook(() => useCounter());

// Assert
expect(result.current.count).toBe(0);

});

it('should increment count', () => { // Arrange const { result } = renderHook(() => useCounter());

// Act
act(() => {
  result.current.increment();
});

// Assert
expect(result.current.count).toBe(1);

}); });

Running Jest

Basic commands:

Run all tests

npm test

or

jest

Run specific file

jest src/components/Feature.test.ts

Run tests matching pattern

jest Feature

Run with coverage

jest --coverage

Run in watch mode

jest --watch

Run with verbose output

jest --verbose

Update snapshots

jest --updateSnapshot

or

jest -u

Coverage commands:

Generate coverage report

jest --coverage

View HTML report

open coverage/lcov-report/index.html

Coverage with threshold

jest --coverage --coverageThreshold='{"global":{"branches":80,"functions":80,"lines":80,"statements":80}}'

Best Practices

• Use descriptive test names: should <expected> when <condition>

• Organize with describe blocks: Group related tests

• Use beforeEach/afterEach: Clean setup and teardown

• Mock external dependencies: Isolate unit under test

• Test user behavior: For components, test what users see/do

• Use test.each for similar tests: Reduce duplication

• Keep tests independent: No test depends on another

• Test edge cases: Null, undefined, empty values

• Test error conditions: Exceptions and rejections

• Use appropriate matchers: Choose the most specific matcher

TypeScript-Specific Considerations

Type-safe mocks:

import { MockedFunction } from 'jest-mock';

const mockFn: MockedFunction<typeof realFunction> = jest.fn();

Type assertions:

const mock = jest.fn() as jest.MockedFunction<typeof original>;

Generic mocks:

interface ApiResponse<T> { data: T; status: number; }

const mockApi = jest.fn<Promise<ApiResponse<User>>, [string]>();

Quality Checklist

Before marking tests complete:

• Test file properly named (<module>.test.ts )

• All exported functions/classes/components tested

• Happy path tests included

• Edge case tests included (null, undefined, empty)

• Error condition tests included

• External dependencies mocked

• Tests organized with describe blocks

• beforeEach/afterEach used for setup/cleanup

• Test names are descriptive

• All tests pass

• Coverage ≥ 80%

• No snapshot tests without purpose

• Tests run quickly

Integration with Testing Workflow

Input: JavaScript/TypeScript source file to test Process: Analyze → Generate structure → Write tests → Run & verify Output: Jest test file with ≥ 80% coverage Next Step: Integration testing or code review

Remember

• Follow naming convention: <source_file>.test.ts

• Use describe blocks for organization

• Mock external dependencies to isolate tests

• Test behavior, not implementation

• Use appropriate matchers for clarity

• Aim for 80%+ coverage

• Keep tests fast and independent

• For React: test what users see and do