React testing

Skill ComeOnOliver/skillshub/skills/HoangNguyen0403/agent-skills-standard/react-testing

🧠 The right skill, one API call. AI agent skills registry with token-efficient skill resolution. 5,000+ skills from 500+ top repos.

Install

npx -y skills add ComeOnOliver/skillshub --skill react-testing

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

What its author says it does

Copied from the file, not written here

Testing strategies 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)

SKILL.md

2.1 KB, as published. Nobody here has run it

React Testing

Priority: P2 (MAINTENANCE)

Reliable tests focusing on user behavior.

Implementation Guidelines

Standards: Use React Testing Library (RTL) with Vitest or Jest. Follow the Arrange-Act-Assert (AAA) pattern.
Selection: Prefer getByRole / findByRole to test accessibility. Use data-testid only as a 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 are 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 for MSW API mocking, Context testing, form testing, and React Router patterns.

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