react-testinglisted
Install: claude install-skill aiskillstore/marketplace
# React Testing (Web)
## Problem Statement
React testing requires understanding component rendering, user interactions, and async state management. This skill covers Jest with React Testing Library patterns for web applications.
---
## Pattern: Zustand Store Testing
**Problem:** Store state persists between tests, causing flaky tests.
```typescript
import { useAppStore } from '@/stores/appStore';
const initialState = {
items: [],
loading: false,
error: null,
};
describe('App Store', () => {
// Reset store before each test
beforeEach(() => {
useAppStore.setState(initialState, true); // true = replace entire state
});
it('adds item to store', async () => {
const store = useAppStore.getState();
await store.addItem({ id: '1', name: 'Test' });
expect(useAppStore.getState().items).toHaveLength(1);
});
it('handles loading state', async () => {
const store = useAppStore.getState();
const loadPromise = store.fetchItems();
expect(useAppStore.getState().loading).toBe(true);
await loadPromise;
expect(useAppStore.getState().loading).toBe(false);
});
});
```
**Key points:**
- Use `setState(initialState, true)` to replace (not merge) state
- Get fresh state with `getState()` after async operations
- Don't rely on component re-renders in store tests
---
## Pattern: Async Store Operations
**Problem:** Testing async Zustand actions with proper waiting.
```typescript
import { act, waitFor } from '@testing-library/react';