Overview Version History Q & A Rating & Review
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
Open VS Code
Go to the Extensions view (Ctrl+Shift+X / Cmd+Shift+X)
Search for "React Test Builder"
Click Install
Usage
Open a React component file (.jsx
, .tsx
, .js
, or .ts
)
Right-click in the editor or use the Command Palette (Ctrl+Shift+P / Cmd+Shift+P)
Select "Generate Test for React Component"
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.