aiskillstore Testing Fundamentals Review
"If you can't test it, you don't understand it. Tests are proof of understanding."
When to Apply
Activate this skill when:
- Reviewing test files (*.test.ts, *.spec.ts, *.test.js)
- Junior asks about testing strategy
- Completing a feature without tests
- Discussing coverage or test quality
The Testing Pyramid
▲
╱ ╲ E2E (10%)
╱ ╲ Playwright - Full user flows
╱─────╲
╱ ╲ Integration (20%)
╱ ╲ Vitest + RTL - Component interactions
╱───────────╲
╱ ╲ Unit (70%)
╱ ╲ Vitest - Functions, utils, logic
─────────────────
- Unit Tests (70%): Fast, isolated, test one thing
- Integration Tests (20%): Components working together
- E2E Tests (10%): Critical user journeys only
Stack-Specific Framework Guide
| Stack | Unit/Integration | E2E |
|---|---|---|
| Vite + React | Vitest + React Testing Library | Playwright |
| Create React App | Jest + RTL | Playwright |
| Next.js | Vitest or Jest + RTL | Playwright |
| Node.js | Vitest (native ESM) | - |
| Python | pytest | - |
| Go | go test | - |
Why Vitest for Vite?
- 10-20x faster than Jest in watch mode
- Native ESM support
- Same config as Vite (vite.config.ts)
- Compatible with Jest API
What to Test (The 3 Questions)
- Happy Path: Does it work when everything goes right?
- Edge Cases: What happens with empty, null, max values?
- Error States: Does it fail gracefully?
Good Tests Check:
- Component renders without crashing
- User interactions work (click, type, submit)
- Error states display correctly
- Loading states appear and disappear
- Data flows correctly through the component
Bad Tests Check:
- Implementation details (internal state, method calls)
- Styling or CSS classes
- Third-party library internals
- Snapshot tests of large components (brittle)
Common Mistakes (Anti-Patterns)
1. Testing Implementation, Not Behavior
// ❌ BAD: Testing internal state
expect(component.state.isLoading).toBe(true);
// ✅ GOOD: Testing what user sees
expect(screen.getByText('Loading...')).toBeInTheDocument();
2. Over-Mocking
// ❌ BAD: Mock everything
jest.mock('./utils');
jest.mock('./api');
jest.mock('./hooks');
// What are you even testing at this point?
// ✅ GOOD: Mock only external boundaries
vi.mock('./api'); // Mock the API, test the rest
3. Testing Third-Party Libraries
// ❌ BAD: Testing that React Query works
expect(useQuery).toHaveBeenCalledWith('users');
// ✅ GOOD: Testing YOUR code's behavior
await waitFor(() => {
expect(screen.getByText('User Name')).toBeInTheDocument();
});
4. Brittle Selectors
// ❌ BAD: Breaks if you change CSS
screen.getByClassName('btn-primary-large-blue');
// ✅ GOOD: Semantic and stable
screen.getByRole('button', { name: 'Submit' });
5. Testing Everything
// ❌ BAD: 100% coverage goal
// Results in tests that exist just for coverage
// ✅ GOOD: Strategic coverage
// Test critical paths, edge cases, complex logic
Socratic Questions
Ask these instead of giving answers:
- Strategy: "What's the most critical user flow that needs testing?"
- Coverage: "If this test passes but the feature is broken, how would you know?"
- Edge Cases: "What inputs could break this? Empty? Null? 10,000 items?"
- Isolation: "Are you testing YOUR code or a library's code?"
- Value: "Would this test catch a real bug?"
Test Structure (AAA Pattern)
describe('LoginForm', () => {
it('shows error when password is too short', async () => {
// Arrange
render(<LoginForm />);
// Act
await userEvent.type(screen.getByLabelText('Password'), '123');
await userEvent.click(screen.getByRole('button', { name: 'Login' }));
// Assert
expect(screen.getByText('Password must be at least 8 characters')).toBeInTheDocument();
});
});
Red Flags to Call Out
| Flag | Question |
|---|---|
| No tests for feature | "What tests prove this works?" |
| Only happy path tested | "What if the API fails? What if input is empty?" |
| Mocking everything | "What are you actually testing here?" |
| Testing implementation | "Would this test break if you refactored but behavior stayed the same?" |
| getByClassName usage | "Is there a more semantic way to select this element?" |
| Large snapshot tests | "Will you actually review this diff when it changes?" |
MCP Usage
Context7 - Framework Docs
Fetch: Vitest documentation
Fetch: React Testing Library queries
Fetch: Playwright best practices
Octocode - Real Examples
Search: "vitest react testing library" in popular repos
Search: "playwright e2e test login" for E2E patterns
Test Naming Convention
// Pattern: it('should [expected behavior] when [condition]')
it('should display error message when password is invalid')
it('should redirect to dashboard when login succeeds')
it('should disable submit button when form is submitting')
Interview Gold
"I implemented comprehensive testing with 85% coverage focusing on critical user flows. I used Vitest for unit tests, React Testing Library for component integration tests, and Playwright for E2E tests covering login, checkout, and payment flows."
Tests are interview talking points. Every test you write is proof you understand the code.