Test React components with RTL and Jest/Vitest. Use when writing React component tests with React Testing Library, Jest, or Vitest. (triggers: **/*.test.tsx, **/*.spec.tsx, render, screen, userEvent, expect)
Reliable tests focusing on user behavior.
getByRole / findByRole to test accessibility. Use data-testid only as a fallback for complex UI.userEvent (async) instead of fireEvent to better simulate browser events (e.g., await user.click(element)).await screen.findBy* for elements that appear later. Use waitFor(() => ...) for complex non-element updates.state or props. Ensure 100% of P0 flows are covered.framer-motion, react-router) or heavy assets to speed up tests.jest-axe.component.state.findBy, avoid waitFor if possible.See references/REFERENCE.md for MSW API mocking, Context testing, form testing, and React Router patterns.
test('submits form', async () => {
const user = userEvent.setup();
render(<LoginForm />);
await user.type(screen.getByLabelText(/email/i), '[email protected]');
await user.click(screen.getByRole('button', { name: /login/i }));
expect(await screen.findByText(/welcome/i)).toBeInTheDocument();
});