How can I mock APIs in React 18 using Testing Library?

How can I mock APIs in React 18 using Testing Library?

You can use libraries like msw (Mock Service Worker) to mock APIs in your tests. It intercepts network requests and allows you to define responses.

Can you show me a simple example of using msw?

Sure! First, install msw using npm. Then, set up a service worker and define your API handlers. Here's a basic example:

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

const server = setupServer(
  rest.get('/api/data', (req, res, ctx) => {
    return res(ctx.json({ message: 'Hello World' }));
  })
);

// Start the server before all tests
beforeAll(() => server.listen());
// Reset any request handlers that are declared as a part of tests
afterEach(() => server.resetHandlers());
// Clean up after the tests are finished
afterAll(() => server.close());

This will mock the /api/data endpoint.

What if I want to test error responses?

You can define a different handler for error responses. For example:

rest.get('/api/data', (req, res, ctx) => {
  return res(ctx.status(500), ctx.json({ error: 'Internal Server Error' }));
})

This will simulate a 500 error when the API is called.

Is there a way to test loading states?

Yes! You can manage loading states in your component and use msw to simulate delays. For example:

rest.get('/api/data', (req, res, ctx) => {
  return res(ctx.delay(1500), ctx.json({ message: 'Hello World' }));
})

This will delay the response by 1.5 seconds, allowing you to test loading states.