What problem does it solve?
This Skill prevents common mistakes that lead to unreliable, brittle, or misleading tests. It guides you away from testing mock behavior, polluting production code with test-only methods, and creating incomplete mocks, ensuring your tests provide genuine confidence.
Core Features & Use Cases
- Mock Behavior Prevention: Guides you to test actual component behavior, not just the existence or function of mocks, ensuring your tests are meaningful.
- Clean Production Code: Ensures test-only methods don't creep into your production codebase, maintaining strict separation of concerns and preventing accidental production calls.
- Effective Mocking: Teaches how to mock dependencies minimally and completely, avoiding silent failures due to partial mocks that hide structural assumptions.
- Use Case: When you're tempted to assert on a mock's internal state (e.g.,
expect(screen.getByTestId('sidebar-mock'))), this skill reminds you to instead test the real component's behavior, ensuring your tests provide genuine confidence in your application.
Quick Start
Example: Avoiding testing mock behavior
❌ BAD: Testing that the mock exists
test('renders sidebar', () => {
render(<Page />);
expect(screen.getByTestId('sidebar-mock')).toBeInTheDocument();
});
✅ GOOD: Test real component or don't mock it
test('renders sidebar', () => {
render(<Page />); # Don't mock sidebar if not necessary for isolation
expect(screen.getByRole('navigation')).toBeInTheDocument(); # Test real element
});
Gate Function:
BEFORE asserting on any mock element:
Ask: "Am I testing real component behavior or just mock existence?"
IF testing mock existence:
STOP - Delete the assertion or unmock the component
Test real behavior instead
