React Test Builder

A Visual Studio Code extension that automatically generates test cases for React components using Jest and React Testing Library.

Features

• Generate test files for React components with a single click
• Supports both JavaScript and TypeScript React components
• Creates comprehensive test cases using Jest and React Testing Library
• Automatically detects component props and generates relevant test cases
• Integrates with VS Code's testing framework

Requirements

• Visual Studio Code 1.100.0 or higher
• React project with Jest and React Testing Library installed

Installation

1. Open VS Code
2. Go to the Extensions view (Ctrl+Shift+X / Cmd+Shift+X)
3. Search for "React Test Builder"
4. Click Install

Usage

1. Open a React component file (.jsx, .tsx, .js, or .ts)
2. Right-click in the editor or use the Command Palette (Ctrl+Shift+P / Cmd+Shift+P)
3. Select "Generate Test for React Component"
4. A new test file will be created in the same directory as your component

Generated Test Structure

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

describe('YourComponent', () => {
    it('renders without crashing', () => {
        render(<YourComponent />);
        expect(screen.getByTestId('yourcomponent-container')).toBeInTheDocument();
    });

    it('matches snapshot', () => {
        const { asFragment } = render(<YourComponent />);
        expect(asFragment()).toMatchSnapshot();
    });

    // Example: Test with custom props
    it('renders with a custom name prop', () => {
        render(<YourComponent name="TestName" />);
        expect(screen.getByText(/TestName/i)).toBeInTheDocument();
    });

    it('calls onClick handler when button is clicked', () => {
        const handleClick = jest.fn();
        render(<YourComponent onClick={handleClick} />);
        fireEvent.click(screen.getByRole('button'));
        expect(handleClick).toHaveBeenCalledTimes(1);
    });
});

Extension Settings

This extension contributes the following settings:

• testgenerator.geminiApiKey: Your Google Gemini API Key for test generation.
• testgenerator.openAIApiKey: Your OpenAI API Key for test generation. Required for GPT models.
• testgenerator.anthropicApiKey: Your Anthropic API Key for test generation. Required for Claude models.
• testgenerator.favoriteAgent: Select your preferred AI model for generating tests.

Known Issues

• Currently supports basic AI-powered test generation.
• Complex component patterns may require manual test case adjustments.

Release Notes

0.0.1

Initial release of React Test Builder:

• AI-powered test file generation.
• Support for JavaScript and TypeScript React components.
• Integration with Jest and React Testing Library.
• Configurable AI agent selection (Gemini, OpenAI GPT, Anthropic Claude).

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

This project is licensed under the MIT License - see the LICENSE file for details.