Aprenda a Usar Mocks no Jest: Simule Funções e Teste com Precisão

Neste post, você vai entender:

• O que são mocks no Jest
• Como simular funções
• Como simular módulos inteiros (como o axios)
• Como configurar retornos personalizados
• E muito mais!

---

O que é um Mock?

Um mock é uma função simulada que "imita" uma função real. Com ela, você consegue:

• Saber se uma função foi chamada (e quantas vezes)
• Ver os argumentos que foram passados
• Retornar valores falsos para testar diferentes cenários
• Substituir uma dependência (como um módulo externo)

---

Simulando uma Função com jest.fn()

Suponha que você tem a seguinte função:

Copiar
export function forEach(items, callback) {
  for (const item of items) {
    callback(item);
  }
}

Você pode testá-la com um mock assim:

Copiar
test('forEach mock function', () => {
  forEach([0, 1], mockCallback);

  // O Mock foi chamado duas vezes
  expect(mockCallback.mock.calls).toHaveLength(2);

  // O primeiro argumento da primeira chamada à função foi 0
  expect(mockCallback.mock.calls[0][0]).toBe(0);

  // O primeiro argumento da segunda chamada à função foi 1
  expect(mockCallback.mock.calls[1][0]).toBe(1);

  // O valor de retorno da primeira chamada à função foi 42
  expect(mockCallback.mock.results[0].value).toBe(42);
});

---

Propriedade .mock

Todas as funções de simulação (.mock) possuem esta especial propriedade .mock, que é onde os dados sobre como a função a qual foi chamada são mantidos. A propriedade <code>.mock também pode rastrear o valor do this para cada chamada</code>, então é possível inspecionar isso também:

Exemplo:

Copiar
const myMock1 = jest.fn();
const a = new myMock1();
console.log(myMock1.mock.instances);
// > [ <a> ]

const myMock2 = jest.fn();
const b = {};
const bound = myMock2.bind(b);
bound();
console.log(myMock2.mock.contexts);
// > [ <b> ]

As funções de simulação (mock) são muito úteis nos testes permitindo a verificação de como essas funções então sendo chamadas, instanciadas, ou o que retornam:

Copiar
// A função foi chamada exatamente uma vez
expect(someMockFunction.mock.calls).toHaveLength(1);

// O primeiro arg da primeira chamada à função foi 'first arg'
expect(someMockFunction.mock.calls[0][0]).toBe('first arg');

// O segundo arg da primeira chamada à função foi 'second arg'
expect(someMockFunction.mock.calls[0][1]).toBe('second arg');

// O valor de retorno da primeira chamada à função foi "valor de retorno
expect(someMockFunction.mock.results[0].value).toBe('return value');

// A função foi chamada com um determinado contexto `this`: o objeto `element`.
expect(someMockFunction.mock.contexts[0]).toBe(element);

// Essa função foi instanciada exatamente duas vezes
expect(someMockFunction.mock.instances.length).toBe(2);

// O objeto retornado pela primeira instanciação dessa função
// tinha uma propriedade `name` cujo valor foi definido como 'test'
expect(someMockFunction.mock.instances[0].name).toBe('test');

// O primeiro argumento da última chamada à função foi 'test'
expect(someMockFunction.mock.lastCall[0]).toBe('test');

---

Valores de Retorno com mockReturnValue

Você pode simular respostas diferentes a cada chamada:

Copiar
const myMock = jest.fn()
  .mockReturnValueOnce(10)
  .mockReturnValueOnce('x')
  .mockReturnValue(true);
console.log(myMock(), myMock(), myMock(), myMock()); // Saída: 10, 'x', true, true

As funções de simulação também são muito eficazes em códigos que usam um estilo de passagem de continuação funcional. O código escrito nesse estilo ajuda a evitar a necessidade de stubs complicados que recriam o comportamento do componente real que estão substituindo, em favor da injeção de valores diretamente no teste logo antes de serem usados.

Copiar
const filterTestFn = jest.fn();

// Faça com que o mock retorne `true` na primeira chamada e `false` na segunda chamada.
filterTestFn.mockReturnValueOnce(true).mockReturnValueOnce(false);

const result = [11, 12].filter(num => filterTestFn(num));

console.log(result);
// > [11]
console.log(filterTestFn.mock.calls[0][0]); // 11
console.log(filterTestFn.mock.calls[1][0]); // 12

---

Simulando um Módulo (Ex: axios)

Quer testar uma requisição sem chamar a API real? Você pode simular o axios:

Copiar
import axios from 'axios';

class Users {
  static all() {
    return axios.get('/users.json').then(resp => resp.data);
  }
}

export default Users;

Assim que simulamos o módulo, podemos fornecer uma mockResolvedValue para o .get que retorna os dados que queremos que nosso teste afirme contra. Assim, estamos dizendo que queremos que o axios.get('/users.json') retorne uma resposta falsa.

Copiar
import axios from 'axios';
import Users from './users';

jest.mock('axios');

test('deve buscar os usuários', () => {
  const users = [{name: 'Bob'}];
  const resp = {data: users};
  axios.get.mockResolvedValue(resp);

  // ou você poderá usar o código abaixo dependendo do seu caso de uso: 
  // axios.get.mockImplementation(() => Promise.resolve(resp))

  return Users.all().then(data => expect(data).toEqual(users));
});

---

Mock Parcial (Partial Mock)

Você pode simular só parte de um módulo, mantendo o restante original:

Copiar
export const foo = 'foo';
export const bar = () => 'bar';
export default () => 'baz';

<br/>

Copiar
//test.js
import defaultExport, {bar, foo} from '../foo-bar-baz';

jest.mock('../foo-bar-baz', () => {
  const originalModule = jest.requireActual('../foo-bar-baz');

  //Simular a exportação padrão e nomear a exportação como 'foo'
  return {
    __esModule: true,
    ...originalModule,
    default: jest.fn(() => 'mocked baz'),
    foo: 'mocked foo',
  };
});

test('should do a partial mock', () => {
  const defaultExportResult = defaultExport();
  expect(defaultExportResult).toBe('mocked baz');
  expect(defaultExport).toHaveBeenCalled();

  expect(foo).toBe('mocked foo');
  expect(bar()).toBe('bar');
});

---

Implementações de Mock

Quando você precisa de mais controle:

Copiar
const mockFn = jest
  .fn()
  .mockImplementationOnce(cb => cb(null, true))
  .mockImplementationOnce(cb => cb(null, false));

mockFn((err, res) => console.log(res)); // true
mockFn((err, res) => console.log(res)); // false

---

Retornando this com .mockReturnThis()

Útil quando você quer encadear métodos:

Copiar
const obj = {
  method: jest.fn().mockReturnThis(),
};
obj.method().method(); // Funciona com encadeamento

---

Nomeando Mocks

Quer identificar o mock no erro do teste?

Copiar
const myMockFn = jest
  .fn()
  .mockReturnValue('default')
  .mockImplementation(scalar => 42 + scalar)
  .mockName('add42');

---

Matchers Personalizados para Mocks

Por fim, para tornar menos exigente a afirmação de como as funções de simulação foram chamadas, adicionamos algumas funções matcher personalizadas para você:

Copiar
// A função de simulação foi chamada pelo menos uma vez
expect(mockFunc).toHaveBeenCalled();

// A função de simulação foi chamada pelo menos uma vez com os argumentos especificados
expect(mockFunc).toHaveBeenCalledWith(arg1, arg2);

// A última chamada à função de simulação foi chamada com os argumentos especificados
expect(mockFunc).toHaveBeenLastCalledWith(arg1, arg2);

// Todas as chamadas e o nome da simulação são gravados como um instantâneo
expect(mockFunc).toMatchSnapshot();