Testing Strategies for Modern Web Applications

# Testing Strategies for Modern Web Applications Testing is crucial for building reliable applications. Let's explore different testing strategies and when to use each one. ## The Testing Pyramid ```text /\ / \ E2E Tests (Few) /____\ / \ Integration Tests (Some) /________\ / \ Unit Tests (Many) /____________\ ``` ## 1. Unit Testing Test individual functions and components in isolation. ### Testing Pure Functions ```typescript // sum.ts export function sum(a: number, b: number): number { return a + b; } // sum.test.ts import { describe, it, expect } from 'vitest'; import { sum } from './sum'; describe('sum', () => { it('adds two numbers correctly', () => { expect(sum(2, 3)).toBe(5); }); it('handles negative numbers', () => { expect(sum(-1, 1)).toBe(0); }); it('handles decimals', () => { expect(sum(0.1, 0.2)).toBeCloseTo(0.3); }); }); ``` ### Testing React Components ```typescript // Button.tsx interface ButtonProps { onClick: () => void; children: React.ReactNode; disabled?: boolean; } export function Button({ onClick, children, disabled }: ButtonProps) { return ( {children} ); } // Button.test.tsx import { render, screen, fireEvent } from '@testing-library/react'; import { describe, it, expect, vi } from 'vitest'; import { Button } from './Button'; describe('Button', () => { it('renders children correctly', () => { render( {}}>Click me ); expect(screen.getByText('Click me')).toBeInTheDocument(); }); it('calls onClick when clicked', () => { const handleClick = vi.fn(); render( Click me ); fireEvent.click(screen.getByText('Click me')); expect(handleClick).toHaveBeenCalledTimes(1); }); it('does not call onClick when disabled', () => { const handleClick = vi.fn(); render( Click me ); fireEvent.click(screen.getByText('Click me')); expect(handleClick).not.toHaveBeenCalled(); }); }); ``` ## 2. Integration Testing Test how multiple units work together. ```typescript // api.ts export async function fetchUser(id: string) { const response = await fetch(`/api/users/${id}`); if (!response.ok) throw new Error('User not found'); return response.json(); } export async function updateUser(id: string, data: any) { const response = await fetch(`/api/users/${id}`, { method: 'PATCH', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(data), }); return response.json(); } // UserProfile.tsx function UserProfile({ userId }: { userId: string }) { const [user, setUser] = useState(null); const [loading, setLoading] = useState(true); useEffect(() => { fetchUser(userId).then(data => { setUser(data); setLoading(false); }); }, [userId]); if (loading) return Loading... ; return Hello, {user.name}! ; } // UserProfile.test.tsx import { render, screen, waitFor } from '@testing-library/react'; import { rest } from 'msw'; import { setupServer } from 'msw/node'; import { UserProfile } from './UserProfile'; const server = setupServer( rest.get('/api/users/:id', (req, res, ctx) => { return res(ctx.json({ name: 'John Doe' })); }) ); beforeAll(() => server.listen()); afterEach(() => server.resetHandlers()); afterAll(() => server.close()); describe('UserProfile', () => { it('fetches and displays user data', async () => { render( ); expect(screen.getByText('Loading...')).toBeInTheDocument(); await waitFor(() => { expect(screen.getByText('Hello, John Doe!')).toBeInTheDocument(); }); }); it('handles API errors', async () => { server.use( rest.get('/api/users/:id', (req, res, ctx) => { return res(ctx.status(404)); }) ); render( ); await waitFor(() => { expect(screen.getByText('Error loading user')).toBeInTheDocument(); }); }); }); ``` ## 3. End-to-End Testing Test complete user workflows with Playwright or Cypress. ### Playwright Example ```typescript // e2e/login.spec.ts import { test, expect } from '@playwright/test'; test.describe('Login Flow', () => { test('successful login', async ({ page }) => { await page.goto('/login'); await page.fill('[name="email"]', 'user@example.com'); await page.fill('[name="password"]', 'password123'); await page.click('button[type="submit"]'); await expect(page).toHaveURL('/dashboard'); await expect(page.locator('h1')).toContainText('Welcome'); }); test('shows error for invalid credentials', async ({ page }) => { await page.goto('/login'); await page.fill('[name="email"]', 'wrong@example.com'); await page.fill('[name="password"]', 'wrongpassword'); await page.click('button[type="submit"]'); await expect(page.locator('.error')).toContainText('Invalid credentials'); }); test('validates required fields', async ({ page }) => { await page.goto('/login'); await page.click('button[type="submit"]'); await expect(page.locator('[name="email"]:invalid')).toBeVisible(); await expect(page.locator('[name="password"]:invalid')).toBeVisible(); }); }); ``` ### Cypress Example ```typescript // cypress/e2e/checkout.cy.ts describe('Checkout Flow', () => { beforeEach(() => { cy.visit('/products'); }); it('completes purchase', () => { // Add item to cart cy.get('[data-testid="product-1"]').click(); cy.get('button').contains('Add to Cart').click(); // Go to cart cy.get('[data-testid="cart-icon"]').click(); cy.url().should('include', '/cart'); // Proceed to checkout cy.get('button').contains('Checkout').click(); // Fill shipping info cy.get('[name="name"]').type('John Doe'); cy.get('[name="address"]').type('123 Main St'); cy.get('[name="city"]').type('Boston'); // Complete purchase cy.get('button').contains('Place Order').click(); // Verify success cy.get('.success-message').should('be.visible'); cy.url().should('include', '/order-confirmation'); }); }); ``` ## 4. Testing Hooks ```typescript // useCounter.ts import { useState } from 'react'; export function useCounter(initial = 0) { const [count, setCount] = useState(initial); const increment = () => setCount(c => c + 1); const decrement = () => setCount(c => c - 1); const reset = () => setCount(initial); return { count, increment, decrement, reset }; } // useCounter.test.ts import { renderHook, act } from '@testing-library/react'; import { useCounter } from './useCounter'; describe('useCounter', () => { it('initializes with default value', () => { const { result } = renderHook(() => useCounter()); expect(result.current.count).toBe(0); }); it('initializes with custom value', () => { const { result } = renderHook(() => useCounter(10)); expect(result.current.count).toBe(10); }); it('increments count', () => { const { result } = renderHook(() => useCounter()); act(() => { result.current.increment(); }); expect(result.current.count).toBe(1); }); it('resets to initial value', () => { const { result } = renderHook(() => useCounter(5)); act(() => { result.current.increment(); result.current.increment(); }); expect(result.current.count).toBe(7); act(() => { result.current.reset(); }); expect(result.current.count).toBe(5); }); }); ``` ## 5. Testing Async Code ```typescript // fetchData.ts export async function fetchData(url: string) { const response = await fetch(url); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } return response.json(); } // fetchData.test.ts import { describe, it, expect, vi } from 'vitest'; import { fetchData } from './fetchData'; global.fetch = vi.fn(); describe('fetchData', () => { it('fetches data successfully', async () => { const mockData = { id: 1, name: 'Test' }; (fetch as any).mockResolvedValueOnce({ ok: true, json: async () => mockData, }); const data = await fetchData('/api/test'); expect(data).toEqual(mockData); expect(fetch).toHaveBeenCalledWith('/api/test'); }); it('throws error on failed request', async () => { (fetch as any).mockResolvedValueOnce({ ok: false, status: 404, }); await expect(fetchData('/api/test')).rejects.toThrow('HTTP error! status: 404'); }); }); ``` ## Best Practices ### 1. Test Behavior, Not Implementation ```typescript // ❌ Testing implementation it('calls setState', () => { const wrapper = shallow( ); wrapper.instance().setState = jest.fn(); wrapper.find('button').simulate('click'); expect(wrapper.instance().setState).toHaveBeenCalled(); }); // ✅ Testing behavior it('increments count when button clicked', () => { render( ); const button = screen.getByRole('button'); fireEvent.click(button); expect(screen.getByText('Count: 1')).toBeInTheDocument(); }); ``` ### 2. Use Data Test IDs ```typescript // Component Submit // Test const button = screen.getByTestId('submit-button'); ``` ### 3. Avoid Testing Third-Party Code ```typescript // ❌ Don't test libraries it('axios works', async () => { const data = await axios.get('/api/data'); expect(data).toBeDefined(); }); // ✅ Test your code it('fetches user data', async () => { const user = await getUserById('123'); expect(user.name).toBe('John'); }); ``` ## Test Coverage ```bash # Run with coverage npm test -- --coverage # Coverage thresholds in package.json { "jest": { "coverageThreshold": { "global": { "branches": 80, "functions": 80, "lines": 80, "statements": 80 } } } } ``` ## Conclusion Good testing practices lead to more confident deploys and fewer bugs. Follow the testing pyramid, write clear tests, and make testing part of your development workflow. Happy testing! 🧪