Simulação de módulos e chamadas de API
Simule módulos ES com jest.mock(), substitua fetch por MSW (Mock Service Worker) e teste componentes que dependem de dados externos sem chamadas de rede reais.
Simulação de módulos e chamadas de API é uma aula grátis de Frontend Academy no CoddyKit. Esta é a aula 4 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 Frontend Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Frontend Academy inclui 4 aulas no total.
Por que usar simulações?
Os testes unitários devem ser isolados. Chamadas reais à API são lentas, não confiáveis e dispendiosas. A simulação substitui dependências por dublês de teste controlados que retornam respostas previsíveis.
jest.mock() — Simular módulos inteiros
jest.mock('module-path') substitui o módulo inteiro por versões simuladas automaticamente. Todas as exportações se tornam funções simuladas jest.fn(). Chame mockReturnValue ou mockResolvedValue para definir os valores de retorno.
jest.mock('./api');
import { fetchUser } from './api';
(fetchUser as jest.Mock).mockResolvedValue({ id: 1, name: 'Alice' });
test('renders user name', async () => {
render(<Profile userId="1" />);
await screen.findByText('Alice');
expect(fetchUser).toHaveBeenCalledWith('1');
});jest.fn() — Funções de substituição manuais
jest.fn() cria uma função simulada que você pode monitorar e controlar. É útil para propriedades de funções de retorno e dependências de serviços.
const onSubmit = jest.fn();
render(<Form onSubmit={onSubmit} />);
await user.click(screen.getByRole('button', { name: /submit/i }));
expect(onSubmit).toHaveBeenCalledOnce();
expect(onSubmit).toHaveBeenCalledWith({ email: 'alice@example.com' });Redefinição de simulações com beforeEach
Redefina as simulações entre os testes para evitar o vazamento de estado. Use jest.clearAllMocks() em beforeEach.
beforeEach(() => {
jest.clearAllMocks(); // reset call counts and implementations
});
afterAll(() => {
jest.restoreAllMocks(); // restore original implementations
});MSW — Service Worker simulado
O MSW intercepta chamadas reais de fetch/XHR no nível da rede usando Service Workers (navegador) ou interceptadores do Node.js (testes). Escreva manipuladores de solicitações que retornem respostas falsas.
import { setupServer } from 'msw/node';
import { http, HttpResponse } from 'msw';
const server = setupServer(
http.get('/api/users', () => {
return HttpResponse.json([{ id: 1, name: 'Alice' }]);
})
);
beforeAll(() => server.listen());
afterEach(() => server.resetHandlers());
afterAll(() => server.close());Substituições do MSW por teste
Substitua o manipulador padrão para um cenário de teste específico.
test('handles server error', async () => {
server.use(
http.get('/api/users', () => new HttpResponse(null, { status: 500 }))
);
render(<UserList />);
await screen.findByText(/server error/i);
});Simulação de localStorage
Use jest.spyOn para simular os métodos do Armazenamento Web em testes que usam localStorage.
beforeEach(() => {
const store: Record<string, string> = {};
jest.spyOn(Storage.prototype, 'getItem').mockImplementation((key) => store[key] ?? null);
jest.spyOn(Storage.prototype, 'setItem').mockImplementation((key, val) => { store[key] = val; });
});Simulação de temporizadores
jest.useFakeTimers() substitui setTimeout/setInterval por versões controladas pelo Jest. jest.runAllTimers() adianta todos os temporizadores.
jest.useFakeTimers();
test('shows toast for 3 seconds', () => {
render(<Toast message="Saved!" />);
expect(screen.getByText('Saved!')).toBeInTheDocument();
jest.advanceTimersByTime(3000);
expect(screen.queryByText('Saved!')).not.toBeInTheDocument();
});
afterEach(() => jest.useRealTimers());Padrão de fábrica de módulos
No TypeScript, as fábricas de módulos simulados retornam os tipos corretos.
jest.mock('./services/auth', () => ({
login: jest.fn().mockResolvedValue({ token: 'test-token' }),
logout: jest.fn()
}));Testes de instantâneos — use com moderação
Os testes de instantâneos salvam uma representação serializada da saída de um componente e falham se ela mudar. São fáceis de criar, mas podem produzir falsos positivos ruidosos. Use-os apenas para componentes estáveis e puramente visuais.
Verificação rápida
Qual é a principal vantagem do MSW em relação a jest.mock('fetch') para simular APIs?
Recapitulação: simulação
jest.mock() substitui módulos. jest.fn() cria substitutos rastreáveis. Redefina as simulações em beforeEach. O MSW intercepta o HTTP no nível da rede — a abordagem de simulação mais realista. Use substituições de server.use() por teste para cenários de erro. Use temporizadores falsos para códigos dependentes de tempo. Dê preferência ao MSW em testes de integração de componentes.
Perguntas Frequentes
A aula “Simulação de módulos e chamadas de API” é grátis?
Sim — o texto completo de “Simulação de módulos e chamadas de API” é 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 Frontend Academy, atualize para CoddyKit PRO. O curso de Frontend Academy inclui 4 aulas no total.
O que vou aprender em “Simulação de módulos e chamadas de API”?
Simule módulos ES com jest.mock(), substitua fetch por MSW (Mock Service Worker) e teste componentes que dependem de dados externos sem chamadas de rede reais. Você pratica Frontend 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 Frontend Academy?
Nenhuma experiência prévia é necessária. Frontend 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 4 de 4.
Quanto tempo leva a aula “Simulação de módulos e chamadas de API”?
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 Frontend Academy?
Sim. Cada aula de Frontend 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
- Configuração do Jest e testes básicos
- @testing-library/react: render userEvent
- @testing-library/vue: montagem de componentes
- Simulação de módulos e chamadas de API