/‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾\
 / E2E Tests (few) \ → Cypress, Playwright
 /‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾\
 / Integration Tests (some) \ → React Testing Library
 /‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾\
 / Unit Tests (many) \ → Jest
 /‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾\

npm install --save-dev jest jest-environment-jsdom @testing-library/react @testing-library/jest-dom @testing-library/user-event

// jest.config.ts
import type { Config } from 'jest';
import nextJest from 'next/jest.js';

const createJestConfig = nextJest({ dir: './' });

const config: Config = {
 testEnvironment: 'jsdom',
 setupFilesAfterFramework: ['<rootDir>/jest.setup.ts'],
 moduleNameMapper: {
 '^@/(.*)$': '<rootDir>/$1', // Resolve @ path aliases
 },
};

export default createJestConfig(config);

// jest.setup.ts
import '@testing-library/jest-dom';
// This gives you matchers like .toBeInTheDocument(), .toHaveTextContent() etc.

{"scripts":{"test":"jest","test:watch":"jest --watch","test:coverage":"jest --coverage"}}

npm test

// components/Greeting.tsx
interface Props {
 name: string;
 isLoggedIn: boolean;
}

export default function Greeting({ name, isLoggedIn }: Props) {
 if (!isLoggedIn) {
 return <p>Please log in to continue.</p>;
 }
 return <h1>Welcome back, {name}!</h1>;
}

// components/Greeting.test.tsx
import { render, screen } from '@testing-library/react';
import Greeting from './Greeting';

describe('Greeting', () => {
 it('shows a welcome message when the user is logged in', () => {
 render(<Greeting name="Kushang" isLoggedIn={true} />);

 expect(screen.getByText('Welcome back, Kushang!')).toBeInTheDocument();
 });

 it('shows a login prompt when the user is not logged in', () => {
 render(<Greeting name="Kushang" isLoggedIn={false} />);

 expect(screen.getByText('Please log in to continue.')).toBeInTheDocument();
 });

 it('does not show the welcome message when logged out', () => {
 render(<Greeting name="Kushang" isLoggedIn={false} />);

 expect(screen.queryByText(/Welcome back/)).not.toBeInTheDocument();
 });
});

// components/Counter.tsx
import { useState } from 'react';

export default function Counter() {
 const [count, setCount] = useState(0);

 return (
 <div>
 <p>Count: {count}</p>
 <button onClick={() => setCount(count + 1)}>Increment</button>
 <button onClick={() => setCount(0)}>Reset</button>
 </div>
 );
}

// components/Counter.test.tsx
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import Counter from './Counter';

describe('Counter', () => {
 it('starts at zero', () => {
 render(<Counter />);
 expect(screen.getByText('Count: 0')).toBeInTheDocument();
 });

 it('increments the count when the button is clicked', async () => {
 const user = userEvent.setup();
 render(<Counter />);

 await user.click(screen.getByRole('button', { name: 'Increment' }));
 expect(screen.getByText('Count: 1')).toBeInTheDocument();

 await user.click(screen.getByRole('button', { name: 'Increment' }));
 expect(screen.getByText('Count: 2')).toBeInTheDocument();
 });

 it('resets the count to zero', async () => {
 const user = userEvent.setup();
 render(<Counter />);

 await user.click(screen.getByRole('button', { name: 'Increment' }));
 await user.click(screen.getByRole('button', { name: 'Increment' }));
 await user.click(screen.getByRole('button', { name: 'Reset' }));

 expect(screen.getByText('Count: 0')).toBeInTheDocument();
 });
});

// components/LoginForm.tsx
import { useState } from 'react';

interface Props {
 onSubmit: (email: string, password: string) => void;
}

export default function LoginForm({ onSubmit }: Props) {
 const [email, setEmail] = useState('');
 const [password, setPassword] = useState('');
 const [error, setError] = useState('');

 const handleSubmit = (e: React.FormEvent) => {
 e.preventDefault();

 if (!email || !password) {
 setError('Both fields are required.');
 return;
 }

 onSubmit(email, password);
 };

 return (
 <form onSubmit={handleSubmit}>
 <label htmlFor="email">Email</label>
 <input
 id="email"
 type="email"
 value={email}
 onChange={(e) => setEmail(e.target.value)}
 />

 <label htmlFor="password">Password</label>
 <input
 id="password"
 type="password"
 value={password}
 onChange={(e) => setPassword(e.target.value)}
 />

 {error && <p role="alert">{error}</p>}

 <button type="submit">Log In</button>
 </form>
 );
}

// components/LoginForm.test.tsx
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import LoginForm from './LoginForm';

describe('LoginForm', () => {
 it('calls onSubmit with email and password when the form is valid', async () => {
 const user = userEvent.setup();
 const onSubmit = jest.fn(); // Mock function — tracks calls
 render(<LoginForm onSubmit={onSubmit} />);

 await user.type(screen.getByLabelText('Email'), 'hello@example.com');
 await user.type(screen.getByLabelText('Password'), 'secret123');
 await user.click(screen.getByRole('button', { name: 'Log In' }));

 expect(onSubmit).toHaveBeenCalledWith('hello@example.com', 'secret123');
 expect(onSubmit).toHaveBeenCalledTimes(1);
 });

 it('shows an error message when fields are empty', async () => {
 const user = userEvent.setup();
 render(<LoginForm onSubmit={jest.fn()} />);

 await user.click(screen.getByRole('button', { name: 'Log In' }));

 expect(screen.getByRole('alert')).toHaveTextContent('Both fields are required.');
 });

 it('does not call onSubmit when fields are empty', async () => {
 const user = userEvent.setup();
 const onSubmit = jest.fn();
 render(<LoginForm onSubmit={onSubmit} />);

 await user.click(screen.getByRole('button', { name: 'Log In' }));

 expect(onSubmit).not.toHaveBeenCalled();
 });
});

// components/UserProfile.tsx
import { useEffect, useState } from 'react';

interface User {
 id: number;
 name: string;
 email: string;
}

export default function UserProfile({ userId }: { userId: number }) {
 const [user, setUser] = useState<User | null>(null);
 const [loading, setLoading] = useState(true);
 const [error, setError] = useState('');

 useEffect(() => {
 fetch(`/api/users/${userId}`)
 .then((r) => {
 if (!r.ok) throw new Error('Failed to load user.');
 return r.json();
 })
 .then((data) => { setUser(data); setLoading(false); })
 .catch((err) => { setError(err.message); setLoading(false); });
 }, [userId]);

 if (loading) return <p>Loading profile...</p>;
 if (error) return <p role="alert">{error}</p>;

 return (
 <div>
 <h2>{user?.name}</h2>
 <p>{user?.email}</p>
 </div>
 );
}

// components/UserProfile.test.tsx
import { render, screen, waitFor } from '@testing-library/react';
import UserProfile from './UserProfile';

// Mock the global fetch API
global.fetch = jest.fn();

const mockUser = { id: 1, name: 'Kushang Tailor', email: 'kushang@example.com' };

describe('UserProfile', () => {
 afterEach(() => jest.clearAllMocks()); // Clean up between tests

 it('shows a loading state first', () => {
 (fetch as jest.Mock).mockResolvedValueOnce({
 ok: true,
 json: async () => mockUser,
 });

 render(<UserProfile userId={1} />);
 expect(screen.getByText('Loading profile...')).toBeInTheDocument();
 });

 it('shows the user name and email after loading', async () => {
 (fetch as jest.Mock).mockResolvedValueOnce({
 ok: true,
 json: async () => mockUser,
 });

 render(<UserProfile userId={1} />);

 await waitFor(() => {
 expect(screen.getByText('Kushang Tailor')).toBeInTheDocument();
 expect(screen.getByText('kushang@example.com')).toBeInTheDocument();
 });
 });

 it('shows an error message when the API fails', async () => {
 (fetch as jest.Mock).mockResolvedValueOnce({ ok: false });

 render(<UserProfile userId={1} />);

 await waitFor(() => {
 expect(screen.getByRole('alert')).toHaveTextContent('Failed to load user.');
 });
 });
});

// hooks/useCounter.ts
import { useState } from 'react';

export function useCounter(initial = 0) {
 const [count, setCount] = useState(initial);

 return {
 count,
 increment: () => setCount((c) => c + 1),
 decrement: () => setCount((c) => c - 1),
 reset: () => setCount(initial),
 };
}

// hooks/useCounter.test.ts
import { renderHook, act } from '@testing-library/react';
import { useCounter } from './useCounter';

describe('useCounter', () => {
 it('starts with the initial value', () => {
 const { result } = renderHook(() => useCounter(10));
 expect(result.current.count).toBe(10);
 });

 it('increments the count', () => {
 const { result } = renderHook(() => useCounter());

 act(() => result.current.increment());

 expect(result.current.count).toBe(1);
 });

 it('decrements the count', () => {
 const { result } = renderHook(() => useCounter(5));

 act(() => result.current.decrement());

 expect(result.current.count).toBe(4);
 });

 it('resets to the initial value', () => {
 const { result } = renderHook(() => useCounter(3));

 act(() => result.current.increment());
 act(() => result.current.increment());
 act(() => result.current.reset());

 expect(result.current.count).toBe(3);
 });
});

Select any component in the tree → see:
├─ Props (current values)
├─ State (useState values)
├─ Hooks (all hook values in order)
└─ Rendered by (parent chain)

1. Open React DevTools → Profiler tab
2. Click ● Record
3. Interact with the slow part of your app
4. Click ■ Stop
5. Look for wide bars (slow renders) and grey bars (unnecessary renders)

// components/ErrorBoundary.tsx
import { Component, ReactNode } from 'react';

interface Props {
 children: ReactNode;
 fallback?: ReactNode;
}

interface State {
 hasError: boolean;
 error: Error | null;
}

export class ErrorBoundary extends Component<Props, State> {
 constructor(props: Props) {
 super(props);
 this.state = { hasError: false, error: null };
 }

 static getDerivedStateFromError(error: Error): State {
 return { hasError: true, error };
 }

 componentDidCatch(error: Error, info: React.ErrorInfo) {
 // Send to your error tracking service (Sentry, Datadog, etc.)
 console.error('Caught by ErrorBoundary:', error, info.componentStack);
 }

 render() {
 if (this.state.hasError) {
 return (
 this.props.fallback ?? (
 <div className="error-state">
 <h2>Something went wrong.</h2>
 <p>We're looking into it — try refreshing the page.</p>
 <button onClick={() => this.setState({ hasError: false, error: null })}>
 Try Again
 </button>
 </div>
 )
 );
 }

 return this.props.children;
 }
}

// app/dashboard/page.tsx
import { ErrorBoundary } from '@/components/ErrorBoundary';
import { SalesChart } from '@/components/SalesChart';
import { RecentOrders } from '@/components/RecentOrders';

export default function DashboardPage() {
 return (
 <div className="dashboard">
 {/* If SalesChart crashes, only this section shows an error */}
 <ErrorBoundary fallback={<p>Chart unavailable — try again later.</p>}>
 <SalesChart />
 </ErrorBoundary>

 {/* RecentOrders is unaffected by SalesChart crashing */}
 <ErrorBoundary fallback={<p>Orders unavailable — try again later.</p>}>
 <RecentOrders />
 </ErrorBoundary>
 </div>
 );
}

// Priority 1: Accessible roles (best — mirrors what screen readers see)
screen.getByRole('button', { name: 'Submit' })
screen.getByRole('heading', { name: 'Welcome' })
screen.getByRole('textbox', { name: 'Email' })

// Priority 2: Labels (great for form fields)
screen.getByLabelText('Email Address')

// Priority 3: Placeholder (acceptable for inputs)
screen.getByPlaceholderText('Search...')

// Priority 4: Text content (good for readable text)
screen.getByText('Loading...')

// Priority 5: Test IDs (last resort — add data-testid only if nothing else works)
screen.getByTestId('product-card')

□ Check the browser console — is there an error message?
□ Check the Network tab — did the API call succeed? What did it return?
□ Add a console.log right before the broken code
□ Open React DevTools → Components → check the props and state
□ Is the component re-rendering when it shouldn't? (Highlight updates)
□ Is it an async timing issue? (Add a debugger statement in the useEffect)
□ Are you mutating state directly? (Should always use setState)
□ Is a dependency array in useEffect missing something?
□ Did a prop change shape or become undefined?
□ Is the issue only in production? (Check .env variables)