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:

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

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

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:

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:

// 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:

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.

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:

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.

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:

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

<br/>

//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:

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:

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

Nomeando Mocks

Quer identificar o mock no erro do teste?

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ê:

// 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();