Criando mocks de requisição com MSW §

---

O Mock Service Worker (MSW) é uma ferramenta poderosa para criar mocks de requisições HTTP em ambiente de desenvolvimento, permitindo simular o comportamento de uma API real. Essa abordagem é valiosa para testar a integração entre a aplicação e a API antes mesmo da implementação final do back-end.

Criando Handlers §

Os handlers são responsáveis por definir como o MSW deve responder a determinadas requisições. Cada handler representa um endpoint da sua API simulada, porém em alguns casos é possível mesclar endpoints para simplificar o código.

Aqui está um exemplo de como você pode criar um handler para simular uma requisição GET para https://jsonplaceholder.typicode.com/posts e https://jsonplaceholder.typicode.com/photos:

import { rest } from 'msw';
 
const handlers = [
  rest.get('*jsonplaceholder.typicode.com*', async (req, res, ctx) => {
    return res(
      ctx.json([
        {
          userId: 1,
          id: 1,
          title: 'title1',
          body: 'body1',
          url: 'img1.jpg',
        },
        {
          userId: 2,
          id: 2,
          title: 'title2',
          body: 'body2',
          url: 'img1.jpg',
        },
        {
          userId: 3,
          id: 3,
          title: 'title3',
          body: 'body3',
          url: 'img3.jpg',
        },
      ]),
    );
  }),
];
 
export { handlers }

Utilizando nos Testes §

Com o MSW configurado, você pode usá-lo nos seus testes para simular requisições HTTP.

describe('<Home />', () => {
  it('should render search, posts and load more', async () => {
    render(<Home />);
    const noMorePosts = screen.getByText('Não existem posts =(');
 
    await waitForElementToBeRemoved(noMorePosts);
    screen.debug();
  });
});

Benefícios do MSW §

1. Desacoplamento: Permite testar a lógica da aplicação sem depender da implementação final da API.

2. Simulação de Cenários: Facilita a criação de mocks para diferentes cenários, como sucesso, falha ou carregamento prolongado.

3. Testes Isolados: Permite testar componentes e lógica de negócios de forma isolada, sem depender de uma API real.

Referências §

---

• Curso de React.Js e Next.Js (nível intermediário e avançado)