React Testing with Vitest: Component Tests That Catch Real Bugs

TL;DR

Vitest has eaten Jest's lunch — it's faster, works with Vite natively, and has better TypeScript support out of the box. This skill gives your AI agent the patterns to write React component tests that test behavior, not implementation — the kind that catch real bugs and don't break when you refactor.

**Bottom line:** If your agent is touching React code, it needs to know how to write tests the right way. This skill is the blueprint.

10-Second Pitch

• **Behavior-focused** — Tests what users see and do, not internal state
• **MSW for realistic mocks** — Mock HTTP at the network level, not the function level
• **Fast by default** — Vitest runs tests in parallel with zero config
• **RTL selectors** — getByRole, getByLabelText — the accessible way to query elements
• **Coverage that matters** — Branch coverage, not vanity line coverage

Setup Directions

Step 1 — Install Dependencies

npm install -D vitest @testing-library/react @testing-library/user-event jsdom @vitejs/plugin-react

Step 2 — Configure Vitest

// vitest.config.js

import { defineConfig } from 'vitest/config';

import react from '@vitejs/plugin-react';

export default defineConfig({

plugins: [react()],

test: {

environment: 'jsdom',

globals: true,

setupFiles: ['./src/test/setup.js']

}

});

Step 3 — Write Your First Component Test

import { render, screen, userEvent } from '@testing-library/react';

import { describe, it, expect, vi } from 'vitest';

import { LoginForm } from './LoginForm';

describe('LoginForm', () => {

it('submits email and password on submit', async () => {

const onSubmit = vi.fn();

render(<LoginForm onSubmit={onSubmit} />);

await userEvent.type(screen.getByLabelText(/email/i), 'test@example.com');

await userEvent.type(screen.getByLabelText(/password/i), 'secret123');

await userEvent.click(screen.getByRole('button', { name: /sign in/i }));

expect(onSubmit).toHaveBeenCalledWith({

email: 'test@example.com',

password: 'secret123'

});

});

});

Pros / Cons

Verdict & Sign-Off

Vitest + RTL is the modern React testing stack. Your AI agent should be writing tests like this by default — they're faster to write, more realistic, and catch the bugs that matter.