Mocking APIs and State Management in React Testing Library

Testing modern React applications can be challenging, especially when dealing with complex API calls and state management. Today, let’s dive into practical strategies for mocking APIs and testing state management using React Testing Library.

Understanding API Mocking

When testing components that make API calls, we don’t want to hit real endpoints. This would make our tests slow, unreliable, and dependent on external services. Instead, we use mocking to simulate API responses.

The most common approach is to use Jest’s mocking capabilities along with MSW (Mock Service Worker). MSW lets us intercept network requests and provide mock responses, making our tests more predictable and maintainable.

Setting Up MSW

First, let’s set up MSW in our testing environment. We’ll create handlers that intercept our API calls and return mock data:

import { rest } from 'msw';
import { setupServer } from 'msw/node';

const server = setupServer(
  rest.get('/api/users', (req, res, ctx) => {
    return res(
      ctx.json([
        { id: 1, name: 'John' },
        { id: 2, name: 'Sarah' }
      ])
    );
  })
);

beforeAll(() => server.listen());
afterEach(() => server.resetHandlers());
afterAll(() => server.close());

Testing State Management

When it comes to state management, whether you’re using Redux, Context API, or other solutions, React Testing Library encourages testing from the user’s perspective.

Here’s a practical example of testing a component that fetches data and updates state:

test('displays user data after fetching', async () => {
  render(<UserList />);

  // Wait for loading state
  expect(screen.getByText('Loading...')).toBeInTheDocument();

  // Wait for user data
  const users = await screen.findAllByRole('listitem');
  expect(users).toHaveLength(2);
  expect(users[0]).toHaveTextContent('John');
});

Best Practices

1. Always test loading states
2. Handle error scenarios
3. Test state transitions
4. Verify user interactions
5. Keep tests focused and isolated

Remember, the goal is to test behavior, not implementation. Focus on what users see and interact with, rather than internal state mechanics.

Advanced Scenarios

Sometimes you’ll need to test more complex scenarios, like error handling or race conditions. MSW makes this straightforward:

test('handles API errors gracefully', async () => {
  server.use(
    rest.get('/api/users', (req, res, ctx) => {
      return res(ctx.status(500));
    })
  );

  render(<UserList />);

  const errorMessage = await screen.findByText(/error fetching users/i);
  expect(errorMessage).toBeInTheDocument();
});

By following these patterns and principles, you’ll create more reliable and maintainable tests that give you confidence in your application’s behavior. Remember, good tests should be easy to write, easy to read, and provide value through catching real issues.