| name | React Testing |
|---|---|
| description | Testing strategies with RTL and Jest/Vitest. |
| metadata | {"labels": ["react", "testing", "jest", "vitest"], "triggers": {"files": ["**/*.test.tsx", "**/*.spec.tsx"], "keywords": ["render", "screen", "userEvent", "expect"]}} |
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) overfireEvent. - 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, avoidwaitForif possible.
Code
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();
});