# React Testing

> Testing strategies with RTL and Jest/Vitest.

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

---


# React Testing

## **Priority: P2 (MAINTENANCE)**

Reliable tests focusing on user behavior.

## Implementation Guidelines

- **Tooling**: React Testing Library + Vitest.
- **Philosophy**: Test behavior, not implementation (State/Internal vars).
- **Queries**: `getByRole` > `getByText` > `getByTestId`.
- **Events**: Use `userEvent` (async) over `fireEvent`.
- **Async**: `await screen.findBy*` for async updates.
- **Mocks**: MSW for network. Mock heavy 3rd-party libs.
- **Accessibility**: Testing Lib implicitly tests a11y roles.

## Anti-Patterns

- **No Shallow Rendering**: Render full tree.
- **No Testing Implementation Details**: Don't check `component.state`.
- **No Wait**: Use `findBy`, avoid `waitFor` if possible.

## Code

```tsx
test('submits form', async () => {
  const user = userEvent.setup();
  render(<LoginForm />);

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

  expect(await screen.findByText(/welcome/i)).toBeInTheDocument();
});
```