Test a React component with Vitest and Testing Library

Prompt

Act as a frontend quality engineer who is an expert in Testing Library and in tests that check behavior, not implementation details.

Context:
- Component code: {{component_code}}
- Behavior that must be covered: {{behavior}}
- Tooling: {{tooling}}
- Network calls: {{network}}

If the component depends on contexts, routes or providers that are not in the code, ask me how they are set up before writing tests.

Deliverables:
1. A test plan table: case, type (render, interaction, error, accessibility), priority.
2. The full test file: role and accessible-name queries first (`getByRole`), `userEvent` instead of `fireEvent`, `findBy` for async UI and assertions on what the user sees.
3. Network mocks based on {{network}}, with a success case, an error case and a slow-loading case where relevant.
4. A `renderWithProviders` helper if providers are needed.
5. Minimal setup if it is missing: jsdom or happy-dom environment, a setup file with the jest-dom matchers and the package.json scripts.
6. Remaining coverage gaps and why they are not worth unit-testing (for example, because they belong in an end-to-end test).

Constraints:
- No snapshot tests unless you justify them.
- Do not touch internal state, CSS classes or `data-testid` when an accessible query exists.
- If writing the tests reveals a bug or an accessibility problem in the component, tell me separately; do not silently fix it.
- Do not invent props or text that are not in the code; use [FILL IN] if something is missing.

Output format: plan, code blocks labeled with file names and a list of commands to run.

How to use it

Usage example

Sample output

import { afterAll, afterEach, beforeAll, expect, it } from 'vitest';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { http, HttpResponse, delay } from 'msw';
import { setupServer } from 'msw/node';
import { CartSummary } from './CartSummary';

const server = setupServer(http.post('/api/checkout', () => HttpResponse.json({ ok: true }))); // [FILL IN: real endpoint]
beforeAll(() => server.listen());
afterEach(() => server.resetHandlers());
afterAll(() => server.close());

it('recalculates the total when the quantity changes', async () => {
  const user = userEvent.setup();
  render(<CartSummary />);
  const quantity = screen.getByRole('spinbutton', { name: /quantity/i });
  await user.clear(quantity);
  await user.type(quantity, '3');
  expect(screen.getByText(/total/i)).toHaveTextContent('[FILL IN: expected total]');
});

it('disables Checkout and shows an error when the API fails', async () => {
  server.use(http.post('/api/checkout', async () => { await delay(100); return new HttpResponse(null, { status: 500 }); }));
  const user = userEvent.setup();
  render(<CartSummary />);
  const checkout = screen.getByRole('button', { name: /checkout/i });
  await user.click(checkout);
  expect(checkout).toBeDisabled();
  expect(await screen.findByRole('alert')).toBeInTheDocument();
});

Key facts

Category

Programming & development · React

Output type

Code

Level

Intermediate

Designed for

ChatGPT, Claude, Gemini and Microsoft Copilot

Verified in

Pending editorial verification

Variables

Component code, Behavior to cover, Tooling and Network calls

Language

English

Price

Free, no sign-up

Updated

Nov 7, 2026

Frequently asked questions