# Testing Components

> Teaches React Testing Library patterns for React 19 components. Use when writing component tests, testing interactions, or testing with Server Actions. Use when this capability is needed.

- Skill: `tomevault-io/testing-components` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add tomevault-io/testing-components`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/testing-components/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: tomevault-io (https://skillmd.com/u/tomevault-io)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tomevault-io/testing-components

---


# Testing React 19 Components

For Vitest test structure and mocking patterns (describe/test blocks, vi.fn(), assertions), see `vitest-4/skills/writing-vitest-tests/SKILL.md`.

## Basic Component Testing

```javascript
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import Button from './Button';

test('button renders and handles click', async () => {
  const handleClick = vi.fn();

  render(<Button onClick={handleClick}>Click me</Button>);

  const button = screen.getByRole('button', { name: /click me/i });
  expect(button).toBeInTheDocument();

  await userEvent.click(button);
  expect(handleClick).toHaveBeenCalledTimes(1);
});
```

## Testing Forms with useActionState

```javascript
import { render, screen, waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import ContactForm from './ContactForm';

vi.mock('./actions', () => ({
  submitContact: vi.fn(async (prev, formData) => {
    const email = formData.get('email');
    if (!email?.includes('@')) {
      return { error: 'Invalid email' };
    }
    return { success: true };
  }),
}));

test('form shows error for invalid email', async () => {
  render(<ContactForm />);

  await userEvent.type(screen.getByLabelText(/email/i), 'invalid');
  await userEvent.click(screen.getByRole('button', { name: /submit/i }));

  await waitFor(() => {
    expect(screen.getByText(/invalid email/i)).toBeInTheDocument();
  });
});

test('form succeeds with valid email', async () => {
  render(<ContactForm />);

  await userEvent.type(screen.getByLabelText(/email/i), 'test@example.com');
  await userEvent.click(screen.getByRole('button', { name: /submit/i }));

  await waitFor(() => {
    expect(screen.getByText(/success/i)).toBeInTheDocument();
  });
});
```

## Testing with Context

```javascript
import { render, screen } from '@testing-library/react';
import { UserProvider } from './UserContext';
import UserProfile from './UserProfile';

test('displays user name from context', () => {
  const user = { name: 'Alice', email: 'alice@example.com' };

  render(
    <UserProvider value={user}>
      <UserProfile />
    </UserProvider>
  );

  expect(screen.getByText('Alice')).toBeInTheDocument();
});
```

For comprehensive testing patterns, see: React Testing Library documentation.

---
> Converted and distributed by [TomeVault](https://tomevault.io/claim/djankies) — claim your Tome and manage your conversions.
<!-- tomevault:4.0:skill_md:2026-04-16 -->