React Testing Advanced

Advanced testing techniques.

Testing Custom Hooks

import { renderHook, act } from '@testing-library/react';

test('useCounter', () => {
  const { result } = renderHook(() => useCounter());

  expect(result.current.count).toBe(0);

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

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

Mocking API Calls

global.fetch = jest.fn(() =>
  Promise.resolve({
    json: () => Promise.resolve([{ id: 1, name: 'John' }])
  })
);

test('fetches users', async () => {
  render(<Users />);
  const user = await screen.findByText('John');
  expect(user).toBeInTheDocument();
});

Testing Context

test('uses theme context', () => {
  render(
    <ThemeProvider>
      <ThemedButton />
    </ThemeProvider>
  );

  const button = screen.getByRole('button');
  expect(button).toHaveClass('dark');
});

Snapshot Testing

test('matches snapshot', () => {
  const { container } = render(<Button>Click</Button>);
  expect(container).toMatchSnapshot();
});

Remember

• Test user behavior
• Mock external dependencies
• Use renderHook for hooks
• Snapshot for UI changes

Next: Learn micro-frontends!