Skip to main content

React Testing

Test your React applications with AI-powered remote browsers. No code installation required.

How It Works​

DebuggAI connects to your running React development server and tests it using remote browsers. Our AI agents understand React component behavior, state management, and user interactions.

Quick Setup​

1. Start Your React App​

npm start          # Create React App (port 3000)
npm run dev        # Vite (port 5173)

2. Create a Test​

  • Press Cmd+Alt+C in VS Code
  • Describe what to test: "Test the login form validation"
  • DebuggAI runs the test using remote browsers

3. Get Results​

  • Screenshots and recordings in VS Code Test Results panel
  • Pass/fail status with detailed analysis
  • AI insights about component behavior and user interactions

Common Test Examples​

Component Interactions​

"Test form validation shows errors for invalid inputs"
"Check modal opens when clicking the settings button"
"Verify search autocomplete works as user types"

State Management​

"Test shopping cart updates when adding products"
"Check theme switcher changes between light and dark mode"
"Verify user profile form saves changes correctly"

Navigation & Routing​

"Test navigation between different pages using React Router"
"Check protected routes redirect to login when not authenticated"
"Verify browser back button works correctly"

React Features Supported​

DebuggAI automatically handles:

  • React Hooks - Tests components using useState, useEffect, custom hooks
  • Context API - Tests components that consume React context
  • React Router - Handles client-side routing and navigation
  • State Management - Works with Redux, Zustand, or any state solution
  • UI Libraries - Supports Material-UI, Chakra UI, Ant Design, etc.
  • Modern React - Supports React 18+ features like Suspense and concurrent rendering

Build Tools Supported​

  • Create React App - Works out of the box with CRA
  • Vite - Full support for Vite development server
  • Custom Webpack - Any custom React build configuration
  • TypeScript - Full TypeScript React support

Troubleshooting​

Common Issues​

  • Port mismatch: Ensure extension is configured for your dev server port (3000 for CRA, 5173 for Vite)
  • Build vs dev: DebuggAI tests your running dev server, not build artifacts
  • Hot reloading: Tests work seamlessly with hot module replacement

Getting Help​

  • Check Troubleshooting Guide for common solutions
  • Review test results and screenshots for debugging hints
  • Contact support through debugg.ai if needed

CI with Debugg CLI​

Run React tests in CI using the Debugg CLI templates:

  • Pick the React/Vite snippet in Debugg CLI Workflows
  • For Vite, use pnpm preview --host --port 4173 and set TEST_URL=http://localhost:4173
  • For CRA, use pnpm build && serve -s build or npm start as appropriate
  • Store DEBUGGAI_API_KEY in repository secrets

Next: Explore Django Testing for backend web applications.