Tutorial: Simulando Chamadas de API com Jest

Ao escrever testes para o código que faz chamadas de API, é importante simular essas chamadas para garantir que seus testes sejam confiáveis, rápidos e não dependam de um serviço externo. Jest, um popular framework de testes em JavaScript, fornece várias maneiras de simular facilmente chamadas de API em seus testes. Vamos explorar as diferentes abordagens que você pode usar.

Usando jest.mock()

Uma maneira de simular chamadas de API no Jest é usando a função jest.mock() para simular o módulo inteiro que faz a requisição da API. Aqui está um exemplo:

// api.js
import axios from 'axios';

export const getUsers = () => {
  return axios.get('/users');
};

// api.test.js
import axios from 'axios';
import { getUsers } from './api';

jest.mock('axios');

test('getUsers retorna dados da API', async () => {
  const users = [{ id: 1, name: 'John' }];
  axios.get.mockResolvedValueOnce({ data: users });
  
  const result = await getUsers();
  
  expect(axios.get).toHaveBeenCalledWith('/users');
  expect(result.data).toEqual(users);
});

Neste exemplo, usamos jest.mock('axios') para simular automaticamente o módulo inteiro do axios. Em seguida, usamos axios.get.mockResolvedValueOnce() para simular a resposta da próxima chamada axios.get. Nosso teste pode então verificar se a API foi chamada corretamente e retorna os dados simulados1.

Usando Simulações Manuais

Outra abordagem é simular manualmente o módulo que faz a chamada da API criando uma pasta __mocks__ e colocando um arquivo de implementação simulada dentro:

// __mocks__/axios.js
export default {
  get: jest.fn(() => Promise.resolve({ data: {} })),
  post: jest.fn(() => Promise.resolve({ data: {} })),
  // ...
};

Agora, em seu teste, você pode simular diferentes respostas para cada teste:

// api.test.js
import axios from 'axios';
import { getUsers } from './api';

jest.mock('axios');

test('getUsers retorna dados da API', async () => {
  const users = [{ id: 1, name: 'John' }];
  axios.get.mockResolvedValueOnce({ data: users });
  
  const result = await getUsers();
  
  expect(axios.get).toHaveBeenCalledWith('/users');
  expect(result.data).toEqual(users);
});

Com esta simulação manual, você tem total controle para simular os diferentes métodos do Axios, como get, post, etc. com suas próprias implementações2.

Usando Axios-mock-adapter

Você pode usar a biblioteca para simular requisições Axios de forma mais avançada. Primeiro, instale-a:

npm install axios-mock-adapter --save-dev

Depois, em seus testes:

// api.test.js
import axios from 'axios';
import MockAdapter from 'axios-mock-adapter';
import { getUsers } from './api';

describe('getUsers', () => {
  let mock;
  
  beforeAll(() => {
    mock = new MockAdapter(axios);
  });
  
  afterEach(() => {  
    mock.reset();
  });
  
  test('retorna dados dos usuários', async () => {
    const users = [{ id: 1, name: 'John' }];
    mock.onGet('/users').reply(200, users);
    
    const result = await getUsers();
    
    expect(result.data).toEqual(users);  
  });
});

Com o axios-mock-adapter, você pode simular requisições com base em URLs, parâmetros, cabeçalhos e mais. Você também pode simular erros e timeouts.

Injetando uma Instância Axios Simulada

Se o seu código usar o axios diretamente, outra opção é injetar uma instância axios simulada em seu código durante os testes:

// api.js
import axios from 'axios';

export const getUsers = () => {
  return axios.get('/users');
};

// api.test.js
import axios from 'axios';
import { getUsers } from './api';

jest.mock('axios', () => ({
  get: jest.fn(),
}));

test('getUsers retorna dados da API', async () => {
  const users = [{ id: 1, name: 'John' }];
  axios.get.mockResolvedValueOnce({ data: users });
  
  const result = await getUsers();
  
  expect(axios.get).toHaveBeenCalledWith('/users');
  expect(result.data).toEqual(users);
});

Aqui, nós simulamos o axios em si, e não o módulo inteiro, e fornecemos nossa própria função get simulada.

Dicas para Simular Chamadas de API

Aqui estão algumas dicas a serem lembradas ao simular chamadas de API no Jest:

• Redefina suas simulações entre os testes para garantir testes independentes, usando beforeEach e afterEach
• Não simule demais - simule apenas as funções e módulos que seu código realmente usa
• Teste também os casos de falha, simulando erros e respostas inesperadas
• Considere criar simulações reutilizáveis para respostas comuns de API

Simule APIs Com Apidog

Se você deseja experimentar uma experiência diferente de desenvolvimento de API, pode considerar usar o Apidog!

Apidog é uma plataforma de API de baixo código que fornece aos desenvolvedores uma interface de usuário simples e intuitiva para desenvolver APIs. Com o Apidog, você pode construir, testar, simular e documentar APIs. Vamos dar uma olhada mais de perto no Apidog!

Apidog Smart Mock

Deixe o Apidog gerar automaticamente dados simulados realistas sem configuração manual, se você não tiver regras definitivas de simulação.

Apidog Advanced Mock

Modifique as respostas da API com scripts personalizados para simular interações reais entre o lado do cliente e o servidor.

Apidog Cloud Mock

Colabore com sua equipe com a funcionalidade de simulação em nuvem através de um endereço fixo, acessível no servidor de simulação em nuvem.

Conclusão

Simular é uma habilidade fundamental para escrever bons testes, especialmente ao lidar com dependências externas, como chamadas de API. Jest fornece muitas maneiras de simular chamadas de API em seus testes, desde a simulação de módulos inteiros com jest.mock(), até a simulação manual de módulos, até o uso de bibliotecas como axios-mock-adapter para casos mais avançados. A chave é escolher a abordagem certa para suas necessidades, enquanto mantém seus testes independentes e focados no código sendo testado, e não nos detalhes de implementação das APIs. Com essas técnicas de simulação em seu arsenal, você pode escrever testes resilientes para código que depende de APIs.