0Pricing
React Academy · Aula

Testando interface assíncrona e chamadas de API com MSW

Simule solicitações HTTP com Mock Service Worker para testar componentes que buscam dados.

Testando interface assíncrona e chamadas de API com MSW é uma aula grátis de React Academy no CoddyKit. Esta é a aula 2 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de React Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de React Academy inclui 4 aulas no total.

Por que usar o Mock Service Worker?

O MSW intercepta requisições HTTP no nível da rede usando um trabalhador de serviço no navegador ou um interceptor http no Node, permitindo simular APIs sem alterar o código da aplicação.

Instalando o MSW

Instale o MSW e configure o interceptor do Node para testes com Jest/Vitest.

// npm install msw --save-dev

// src/mocks/handlers.ts
import { http, HttpResponse } from 'msw';

export const handlers = [
  http.get('/api/users', () => {
    return HttpResponse.json([{ id: 1, name: 'Alice' }]);
  }),
];

Configurando o servidor simulado

Crie uma instância de setupServer com seus manipuladores e chame server.listen() antes dos testes, server.resetHandlers() após cada teste e server.close() depois de todos.

import { setupServer } from 'msw/node';
import { handlers } from './handlers';

const server = setupServer(...handlers);

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

Testando um componente que faz uma busca

Renderize o componente que dispara uma busca. O MSW intercepta a requisição e retorna dados simulados. Verifique o que o usuário vê depois que os dados são carregados.

test('shows user list after fetch', async () => {
  render(<UserList />);
  expect(screen.getByText('Loading...')).toBeInTheDocument();
  expect(await screen.findByText('Alice')).toBeInTheDocument();
});

Consultas findBy para interfaces assíncronas

As consultas findBy retornam uma promessa que é resolvida quando o elemento aparece, após no máximo um tempo limite de 1 segundo por padrão. Use-as para conteúdo que aparece depois de operações assíncronas.

// findByText waits for the element to appear
const username = await screen.findByText('Alice');
expect(username).toBeInTheDocument();

// waitFor wraps assertions that need to wait
await waitFor(() => {
  expect(screen.getByText('3 users')).toBeInTheDocument();
});

Substituindo manipuladores por teste

Use server.use() dentro de um teste para adicionar um manipulador de uso único que substitui o padrão apenas nesse teste.

test('shows error on API failure', async () => {
  server.use(
    http.get('/api/users', () => {
      return HttpResponse.json({ message: 'Server error' }, { status: 500 });
    })
  );

  render(<UserList />);
  expect(await screen.findByText('Failed to load users')).toBeInTheDocument();
});

Testando estados de carregamento

Verifique o indicador de carregamento imediatamente após a renderização, de forma síncrona, antes que os dados assíncronos cheguem.

test('shows loading state initially', () => {
  render(<UserList />);
  expect(screen.getByRole('progressbar')).toBeInTheDocument();
  // or
  expect(screen.getByText('Loading...')).toBeInTheDocument();
});

Testando requisições POST

Defina um manipulador POST que valide o corpo da requisição e retorne um recurso criado. Verifique se o componente reflete o estado de sucesso.

server.use(
  http.post('/api/users', async ({ request }) => {
    const body = await request.json();
    return HttpResponse.json({ id: 2, ...body }, { status: 201 });
  })
);

test('creates a user', async () => {
  const user = userEvent.setup();
  render(<NewUserForm />);
  await user.type(screen.getByLabelText('Name'), 'Bob');
  await user.click(screen.getByRole('button', { name: /create/i }));
  expect(await screen.findByText('User created!')).toBeInTheDocument();
});

Atrasos de rede para testes realistas

Adicione atrasos artificiais aos manipuladores para testar a interface de carregamento de forma mais completa, usando o utilitário delay do MSW.

import { delay } from 'msw';

http.get('/api/users', async () => {
  await delay(200);
  return HttpResponse.json([{ id: 1, name: 'Alice' }]);
})

Testando com React Query

Envolva o componente em um QueryClientProvider novo para cada teste, evitando que o estado vaze entre os testes.

function renderWithQuery(ui: React.ReactElement) {
  const queryClient = new QueryClient({
    defaultOptions: { queries: { retry: false } },
  });
  return render(
    <QueryClientProvider client={queryClient}>{ui}</QueryClientProvider>
  );
}

Verificando os dados da requisição

Use um espião de requisições dentro de um manipulador para verificar se a aplicação enviou o corpo ou os cabeçalhos corretos.

let capturedBody: unknown;

server.use(
  http.post('/api/login', async ({ request }) => {
    capturedBody = await request.json();
    return HttpResponse.json({ token: 'abc' });
  })
);

test('sends credentials to API', async () => {
  // ... submit form ...
  expect(capturedBody).toEqual({ email: 'a@b.com', password: 'pass' });
});

MSW no navegador durante o desenvolvimento

O MSW também funciona no navegador durante o desenvolvimento. Execute npx msw init public/ para instalar o service worker e importe seus manipuladores em main.tsx para usar uma API simulada durante o desenvolvimento local.

Verificação rápida

Qual tipo de consulta do RTL deve ser utilizado para verificar o conteúdo que aparece depois que uma chamada à API é concluída?

Recapitulação

O MSW intercepta requisições HTTP reais, tornando os testes realistas sem acessar um servidor ativo. Use server.use() para substituir manipuladores por teste, findBy para verificações assíncronas e envolva os testes do React Query em um QueryClientProvider novo.

Perguntas Frequentes

A aula “Testando interface assíncrona e chamadas de API com MSW” é grátis?

Sim — o texto completo de “Testando interface assíncrona e chamadas de API com MSW” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de React Academy, atualize para CoddyKit PRO. O curso de React Academy inclui 4 aulas no total.

O que vou aprender em “Testando interface assíncrona e chamadas de API com MSW”?

Simule solicitações HTTP com Mock Service Worker para testar componentes que buscam dados. Você pratica React Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar React Academy?

Nenhuma experiência prévia é necessária. React Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 4.

Quanto tempo leva a aula “Testando interface assíncrona e chamadas de API com MSW”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de React Academy?

Sim. Cada aula de React Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

  1. Testes de integração com React Testing Library
  2. Testando interface assíncrona e chamadas de API com MSW
  3. Primeiros passos com Playwright para React
  4. Testando formulários e fluxos do usuário de ponta a ponta
← Voltar para React Academy