Agent skill
React Testing
Testing strategies with RTL and Jest/Vitest.
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/other/other/testing-hoangnguyen0403-agent-skills-standar-4
Metadata
Additional technical details for this skill
- labels
-
react testing jest vitest
- triggers
-
{ "files": [ "**/*.test.tsx", "**/*.spec.tsx" ], "keywords": [ "render", "screen", "userEvent", "expect" ] }
SKILL.md
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();
});
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
Didn't find tool you were looking for?