🎭 Mocking with Jest

Learn to mock dependencies in tests.

Mock Functions

test('calls callback', () => {
  const handleClick = jest.fn();
  render(<Button onClick={handleClick} />);
  
  userEvent.click(screen.getByRole('button'));
  
  expect(handleClick).toHaveBeenCalled();
});

Tracking Calls

test('tracks function calls', () => {
  const mockFn = jest.fn();
  
  mockFn(1);
  mockFn(2);
  
  expect(mockFn).toHaveBeenCalledTimes(2);
  expect(mockFn).toHaveBeenCalledWith(1);
  expect(mockFn).toHaveBeenLastCalledWith(2);
});

Mock Return Values

test('uses mock return value', () => {
  const mockFn = jest.fn().mockReturnValue(42);
  expect(mockFn()).toBe(42);
});

Mocking Modules

jest.mock('./api');
import { fetchUser } from './api';

test('uses mocked API', async () => {
  fetchUser.mockResolvedValue({ id: 1, name: 'Alice' });
  
  render(<UserProfile userId={1} />);
  
  const name = await screen.findByText('Alice');
  expect(name).toBeInTheDocument();
});

Mocking Timers

test('calls callback after delay', () => {
  jest.useFakeTimers();
  const callback = jest.fn();
  
  setTimeout(callback, 1000);
  jest.runAllTimers();
  
  expect(callback).toHaveBeenCalled();
});

✅ Key Takeaways

• Use **jest.fn()** to create mock functions

• Track **calls** and **arguments**

• Use **mockReturnValue()** for return values

• Mock **modules** with **jest.mock()**

• Use **jest.useFakeTimers()** for timing