TestGen AI

✨ Features

• 🤖 AI-Powered Generation - Uses GPT-4 or GPT-3.5-turbo to generate intelligent, contextualized tests
• 🔍 Smart Code Analysis - Automatically detects React components, hooks, and utility functions that need testing
• ⚡ Zero Configuration - Works out of the box with basic templates, AI optional
• 🎯 Intelligent Detection - Distinguishes between components, hooks, and functions automatically
• 📁 Path Alias Support - Resolves TypeScript path aliases from tsconfig.json
• 🚫 Smart Filtering - Ignores service hooks (useQuery/useMutation wrappers)
• 🔄 Batch Processing - Generate tests for entire projects, individual files, or staged files
• ▶️ Run Tests - Execute tests directly from VS Code/Cursor with one command
• 📦 Git Integration - Generate and run tests for staged files before committing

🚀 Quick Start

Installation

From Marketplace:

1. Open VS Code or Cursor
2. Press Cmd+Shift+X (Mac) or Ctrl+Shift+X (Windows/Linux)
3. Search for TestGen AI
4. Click Install

Or install via command:

code --install-extension RoinerCamacho.testgen-ai

First Use

1. Open a TypeScript/TSX file (component, hook, or utility function)
2. Press Cmd+Shift+P (or Ctrl+Shift+P)
3. Type: TestGen: Generate test for current file
4. Done! Your test file is generated and opened automatically
5. Run the test: TestGen: Run test for current file

Configure AI (Optional)

For AI-powered test generation:

1. Get your OpenAI API key from platform.openai.com/api-keys
2. Open Settings (Cmd+,)
3. Search for testgen
4. Enter your API key in testgen.openaiApiKey

Or add to settings.json:

{
  "testgen.openaiApiKey": "sk-your-key-here",
  "testgen.model": "gpt-4",
  "testgen.testCommand": "npm test"
}

📖 Usage

Workflow Example

Complete workflow with Git integration:

1. Make changes to your code
2. Stage files: git add src/components/Button.tsx
3. Generate tests: TestGen: Generate tests for staged files
4. Run tests: TestGen: Run tests for staged files
5. Commit if all tests pass ✅

Commands

Generate Tests

Run Tests

Examples

Example 1: React Hook

Input (src/hooks/useBoolean.ts):

import { useState } from 'react'

export const useBoolean = (initialValue = false) => {
  const [value, setValue] = useState(initialValue)
  const setTrue = () => setValue(true)
  const setFalse = () => setValue(false)
  const toggle = () => setValue((v) => !v)
  return { value, setValue, setTrue, setFalse, toggle }
}

Generated Output (__test__/src/hooks/useBoolean.test.ts):

import { act, renderHook } from '@testing-library/react-hooks'
import { useBoolean } from '@hooks/useBoolean'

describe('useBoolean', () => {
  it('should return initial state', () => {
    const { result } = renderHook(() => useBoolean(false))
    expect(result.current.value).toBe(false)
  })

  it('should set value to true', () => {
    const { result } = renderHook(() => useBoolean())
    act(() => {
      result.current.setTrue()
    })
    expect(result.current.value).toBe(true)
  })

  // ... more comprehensive tests generated by AI
})

Example 2: React Component

Input (src/components/Button.tsx):

import React from 'react'

interface ButtonProps {
  label: string
  onClick: () => void
  disabled?: boolean
}

export const Button: React.FC<ButtonProps> = ({ label, onClick, disabled = false }) => {
  return (
    <button onClick={onClick} disabled={disabled}>
      {label}
    </button>
  )
}

Generated Output (__test__/src/components/Button.test.tsx):

import { render, screen, fireEvent } from '@testing-library/react'
import { Button } from '@components/Button'

describe('Button', () => {
  it('should render correctly', () => {
    const mockOnClick = jest.fn()
    render(<Button label="Click me" onClick={mockOnClick} />)
    expect(screen.getByText('Click me')).toBeInTheDocument()
  })

  it('should handle click events', () => {
    const mockOnClick = jest.fn()
    render(<Button label="Click me" onClick={mockOnClick} />)
    fireEvent.click(screen.getByText('Click me'))
    expect(mockOnClick).toHaveBeenCalledTimes(1)
  })

  // ... more comprehensive tests generated by AI
})

⚙️ Configuration

🎯 What Gets Tested?

✅ Detected & Tested

• React Components (functional and class components)
• React Hooks with state (useState, useReducer)
• Hooks with side effects (useEffect)
• Hooks with business logic
• Utility Functions in utils/ or funcs/ folders
• Pure Functions with defined types

❌ Ignored

• Service hooks (simple useQuery/useMutation wrappers)
• Hooks without business logic
• Non-exported functions
• Non-exported components

🛠️ Requirements

• VS Code 1.74+ or Cursor
• TypeScript project with tsconfig.json
• Node.js 18+ (for development)
• OpenAI API Key (optional, for AI generation)

📚 Documentation

• Installation Guide - Detailed installation instructions
• Quick Start - Get started in 5 minutes
• Troubleshooting - Common issues and solutions
• Publishing Guide - How to publish updates
• Update Guide - Version management

🐛 Troubleshooting

For more help, see the Troubleshooting Guide.

🤝 Contributing

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

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

📄 License

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

🙏 Acknowledgments

• OpenAI for the GPT API
• ts-morph for TypeScript analysis
• VS Code team for the excellent extension API