# react-testing

> Test React components with RTL and Jest/Vitest. Use when writing React component tests with React Testing Library, Jest, or Vitest.

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

---

# React Testing

## **Priority: P2 (MEDIUM)**


## Implementation Guidelines

- **Standards**: Use **React Testing Library (RTL)** with **Vitest or Jest**. Follow **Arrange-Act-Assert (AAA)** pattern.
- **Selection**: Prefer **`getByRole`** / **`findByRole`** to test accessibility. Use **`data-testid`** only as fallback for complex UI.
- **Interactions**: Use **`userEvent` (async)** instead of `fireEvent` to better simulate browser events (e.g., `await user.click(element)`).
- **Asynchrony**: Use **`await screen.findBy*`** for elements that appear later. Use **`waitFor(() => ...)`** for complex non-element updates.
- **Networking**: Mock all API calls with **Mock Service Worker (MSW)**. **Never call real APIs** in unit/integration tests.
- **Architecture**: **Test behavior**, not implementation. Avoid checking internal `state` or `props`. Ensure **100% of P0 flows** covered.
- **Mocks**: **Mock expensive third-party libraries** (e.g., `framer-motion`, `react-router`) or heavy assets to speed up tests.
- **Visuals**: Use **Snapshot testing** sparingly for stable, small UI components. **Manual a11y checks** with `jest-axe`.

## 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.

## References

See [references/REFERENCE.md](references/REFERENCE.md) for MSW API mocking, Context testing, form testing, and React Router patterns.

## 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();
});
```

## Canonical response anchors

When this skill applies, preserve the following domain terminology or equivalent concrete examples in the answer when relevant:
- findByText
- getByRole