Testing Async Components: API Mocking & Mock Service Worker (MSW)

1import React, { useState, useEffect } from 'react';
2import { render, screen } from '@testing-library/react';
3import userEvent from '@testing-library/user-event';
4import { rest } from 'msw';
5import { setupServer } from 'msw/node';
6
7// Component under test
8export function UserDirectory() {
9  const [users, setUsers] = useState<string[]>([]);
10  const [loading, setLoading] = useState(true);
11  const [error, setError] = useState('');
12
13  const fetchUsers = async () => {
14    setLoading(true);
15    setError('');
16    try {
17      const res = await fetch('/api/users');
18      if (!res.ok) throw new Error('Failed to load users');
19      const data = await res.json();
20      setUsers(data.map((u: any) => u.name));
21    } catch (err: any) {
22      setError(err.message);
23    } finally {
24      setLoading(false);
25    }
26  };
27
28  useEffect(() => {
29    fetchUsers();
30  }, []);
31
32  if (loading) return <div>Loading users...</div>;
33  if (error) return <div role="alert">{error} <button onClick={fetchUsers}>Retry</button></div>;
34
35  return (
36    <ul aria-label="Users List">
37      {users.map((name, i) => <li key={i}>{name}</li>)}
38    </ul>
39  );
40}
41
42// MSW Server Setup
43const server = setupServer(
44  rest.get('/api/users', (req, res, ctx) => {
45    return res(ctx.json([{ name: 'Alice' }, { name: 'Bob' }]));
46  })
47);
48
49beforeAll(() => server.listen());
50afterEach(() => server.resetHandlers());
51afterAll(() => server.close());
52
53// Test 1: Successful Async Fetch
54test('renders users list upon successful API response', async () => {
55  render(<UserDirectory />);
56
57  // Assert loading indicator is present initially
58  expect(screen.getByText(/loading users.../i)).toBeInTheDocument();
59
60  // findByRole automatically awaits async appearance!
61  const list = await screen.findByRole('list', { name: /users list/i });
62  expect(list).toBeInTheDocument();
63  expect(screen.getByText('Alice')).toBeInTheDocument();
64  expect(screen.getByText('Bob')).toBeInTheDocument();
65});
66
67// Test 2: Network Error and Retry
68test('displays error message and allows user to retry', async () => {
69  server.use(
70    rest.get('/api/users', (req, res, ctx) => res(ctx.status(500)))
71  );
72
73  render(<UserDirectory />);
74
75  const errorAlert = await screen.findByRole('alert');
76  expect(errorAlert).toHaveTextContent(/failed to load users/i);
77});