Mocks de clase ES6

Jest se puede utilizar para simular clases de ES6 que importan a los archivos que deseas probar.

Las clases de ES6 son funciones constructor con un poco de sintaxis adicional. Por lo tanto, cualquier simulación para una clase ES6 debe ser una funcion o una clase ES6 actual (que es, de nuevo, otra función). Entonces puedes simular usando mock functions.

Un ejemplo de clase ES6

Usaremos un ejemplo ideado de una clase que reproduce archivos de sonido,SoundPlayer y una clase de consumidores que una esa clase,SoundPlayerConsumer. Simularemos SoundPlayer en nuestras pruebas para SoundPlayerConsumer.

sound-player.js

export default class SoundPlayer {
  constructor() {
    this.foo = 'bar';
  }

  playSoundFile(fileName) {
    console.log('Playing sound file ' + fileName);
  }
}

sound-player-consumer.js

import SoundPlayer from './sound-player';

export default class SoundPlayerConsumer {
  constructor() {
    this.soundPlayer = new SoundPlayer();
  }

  playSomethingCool() {
    const coolSoundFileName = 'song.mp3';
    this.soundPlayer.playSoundFile(coolSoundFileName);
  }
}

Las 4 formas de crear una clase mock ES6

Mocks automáticos

Llamando a jest.mock('./sound-player') arroja una "simulación automática" útil que puede usar para espiar las llamadas a los contructores de clase y todos sus métodos. Reemplaza la clase Es6 con un constructor simulado, y reemplaza todos sus métodos con funciones de simulación que siempre arrojan undefined. Las llamadas a los métodos se almacenan en theAutomaticMock.mock.instances[index].methodName.mock.calls.

note

If you use arrow functions in your classes, they will not be part of the mock. Esto es porque las funciones flecha no están presentes en el prototipo del objeto, son simplemente propiedades que contienen una referencia a una función.

Si no necesitas reemplazar la implementación de la clase, esta es la opción más fácil para configurar. Por ejemplo:

import SoundPlayer from './sound-player';
import SoundPlayerConsumer from './sound-player-consumer';
jest.mock('./sound-player'); // SoundPlayer is now a mock constructor

beforeEach(() => {
  // Clear all instances and calls to constructor and all methods:
  SoundPlayer.mockClear();
});

it('We can check if the consumer called the class constructor', () => {
  const soundPlayerConsumer = new SoundPlayerConsumer();
  expect(SoundPlayer).toHaveBeenCalledTimes(1);
});

it('We can check if the consumer called a method on the class instance', () => {
  // Show that mockClear() is working:
  expect(SoundPlayer).not.toHaveBeenCalled();

  const soundPlayerConsumer = new SoundPlayerConsumer();
  // Constructor should have been called again:
  expect(SoundPlayer).toHaveBeenCalledTimes(1);

  const coolSoundFileName = 'song.mp3';
  soundPlayerConsumer.playSomethingCool();

  // mock.instances is available with automatic mocks:
  const mockSoundPlayerInstance = SoundPlayer.mock.instances[0];
  const mockPlaySoundFile = mockSoundPlayerInstance.playSoundFile;
  expect(mockPlaySoundFile.mock.calls[0][0]).toBe(coolSoundFileName);
  // Equivalent to above check:
  expect(mockPlaySoundFile).toHaveBeenCalledWith(coolSoundFileName);
  expect(mockPlaySoundFile).toHaveBeenCalledTimes(1);
});

Mock Manual

Crea un mock manual almacenando una implementación mock en la carpeta __mocks__. Esto te permite especificar la implementación, y puede ser utilizada a través de varios archivos de test.

__mocks__/sound-player.js

// Import this named export into your test file:
export const mockPlaySoundFile = jest.fn();
const mock = jest.fn().mockImplementation(() => {
  return {playSoundFile: mockPlaySoundFile};
});

export default mock;

Importa la simulación y el método de simulación compartido por todas las instancias:

sound-player-consumer.test.js

import SoundPlayer, {mockPlaySoundFile} from './sound-player';
import SoundPlayerConsumer from './sound-player-consumer';
jest.mock('./sound-player'); // SoundPlayer is now a mock constructor

beforeEach(() => {
  // Clear all instances and calls to constructor and all methods:
  SoundPlayer.mockClear();
  mockPlaySoundFile.mockClear();
});

it('We can check if the consumer called the class constructor', () => {
  const soundPlayerConsumer = new SoundPlayerConsumer();
  expect(SoundPlayer).toHaveBeenCalledTimes(1);
});

it('We can check if the consumer called a method on the class instance', () => {
  const soundPlayerConsumer = new SoundPlayerConsumer();
  const coolSoundFileName = 'song.mp3';
  soundPlayerConsumer.playSomethingCool();
  expect(mockPlaySoundFile).toHaveBeenCalledWith(coolSoundFileName);
});

Llamando jest.mock() con el parámetro de fábrica de módulo

jest.mock(ruta, fabricaDeModulo) toma un argumento fabrica de modulo. Una fábrica de módulo es una función que regresa un mock.

Para crear un mock de una función constructor, la fábrica de módulo debe regresar una función constructor. En otras palabras, la fábrica de módulo debe ser una función que regresa una función - una función de alto orden, o HOF, por sus siglas en inglés (Higher-Order Function).

import Reproductor from './reproductor';
const mockReproducirArchivoDeSonido = jest.fn();
jest.mock('./reproductor', () => {
  return jest.fn().mockImplementation(() => {
    return {reproducirArchivoDeSonido: mockReproducirArchivoDeSonido};
  });
});

caution

Since calls to jest.mock() are hoisted to the top of the file, Jest prevents access to out-of-scope variables. By default, you cannot first define a variable and then use it in the factory. Jest will disable this check for variables that start with the word mock. However, it is still up to you to guarantee that they will be initialized on time. Be aware of Temporal Dead Zone.

For example, the following will throw an out-of-scope error due to the use of fake instead of mock in the variable declaration.

// Nota: esto fallará
import Reproductor de './reproductor';
const fakeReproducirArchivoDeSonido = jest.fn();
jest.mock('./reproductor, () => {
  return jest.fn().mockImplementation(() => {
    return {reproducirArchivoDeSonido: fakeReproducirArchivoDeSonido };
  });
});

The following will throw a ReferenceError despite using mock in the variable declaration, as the mockSoundPlayer is not wrapped in an arrow function and thus accessed before initialization after hoisting.

import SoundPlayer from './sound-player';
const mockSoundPlayer = jest.fn().mockImplementation(() => {
  return {playSoundFile: mockPlaySoundFile};
});
// results in a ReferenceError
jest.mock('./sound-player', () => {
  return mockSoundPlayer;
});

Sustituir el mock utilizando mockImplementation() o mockImplementationOnce()

Puedes reemplazar todos los mocks anteriores para cambiar la implementación, para uno así como para todos los test, al llamar mockImplementation() en el mock existente.

Las llamadas a jest.mock son elevadas al principio del código. Puedes especificar una mock posteriormente, por ejemplo, en beforeAll(), al llamar mockImplementation() (o mockImplementationOnce()) en el mock existente en lugar de usar el parámetro de fábrica. Esto también le permite cambiar la simulación entre pruebas, si se necesita:

import Reproductor de './reproductor';
import Consumidor de './consumidor';

jest.mock('./reproductor');

describe('Cuando Reproductor arroja un error', () => {
  beforeAll(() => {
    Reproductor.mockImplementation(() => {
      return {
        reproducirArchivoDeSonido: () => {
          throw new Error('Error de prueba');
        },
      };
    });
  });

  it('Debería arrojar un error al llamar a reproduceAlgoCool', () => {
    const consumidor = new consumidor();
    expect(() => consumidor.reproduceAlgoCool()).toThrow();
  });
});

A profundidad: Entendiendo las funciones constructor mock

Construir tus funciones de constructor de mock utilizando jest.fn().mockImplementation() hace que los mock se vean más complicados de lo que en realidad son. Esta sección muestra cómo puedes crear tus propios mock para ilustrar cómo funciona el simular módulos con mocks.

Mock manual de otra clase ES6

Si defines una clase ES6 utilizando el mismo nombre de archivo que la clase mock en la carpeta __mocks__, éste servirá como el mock. Esta clase será utilizada en lugar de la clase real. Esto te permite inyectar una implementación de prueba para la clase, pero no proporciona una forma de espiar las llamadas.

Para un ejemplo ideado, la proyección podría verse así:

__mocks__/sound-player.js

export default class SoundPlayer {
  constructor() {
    console.log('Mock SoundPlayer: constructor was called');
  }

  playSoundFile() {
    console.log('Mock SoundPlayer: playSoundFile was called');
  }
}

Mock simple utilizando un parámetro de fábrica de módulo

La función de fábrica de módulo pasada a jest.mock(ruta, fabricaDeModulo) puede ser una función de alto orden que regresa una función*. Esto permitirá llamar a new en la simulación. De nuevo, esto te permite inyectar un comportamiento diferente para las pruebas, pero no proporciona una forma de espiar llamadas.

* La función de fábrica del módulo debe devolver una función

Para crear un mock de una función constructor, la fábrica de módulo debe regresar una función constructor. En otras palabras, la fábrica de módulo debe ser una función que regresa una función - una función de alto orden, o HOF, por sus siglas en inglés (Higher-Order Function).

jest.mock('./reproductor', () => {
  return function () {
    return {reproducirArchivoDeSonido: () => {}};
  };
});

note

The mock can't be an arrow function because calling new on an arrow function is not allowed in JavaScript. Así que esto no funciona:

jest.mock('./sound-player', () => {
  return () => {
    // Does not work; arrow functions can't be called with new
    return {playSoundFile: () => {}};
  };
});

Esto arrojará TypeError: _soundPlayer.default is not a constructor (Error de tipo: soundPlayer.default no es un constructor), a menos que el código sea transpilado a ES5, por ejemplo por @babel/preset-env. (ES5 no tiene funciones de flecha ni clases, por lo que ambas serán transpiladas a funciones simples.)

Mocking a specific method of a class

Lets say that you want to mock or spy on the method playSoundFile within the class SoundPlayer. A simple example:

// your jest test file below
import SoundPlayer from './sound-player';
import SoundPlayerConsumer from './sound-player-consumer';

const playSoundFileMock = jest
  .spyOn(SoundPlayer.prototype, 'playSoundFile')
  .mockImplementation(() => {
    console.log('mocked function');
  }); // comment this line if just want to "spy"

it('player consumer plays music', () => {
  const player = new SoundPlayerConsumer();
  player.playSomethingCool();
  expect(playSoundFileMock).toHaveBeenCalled();
});

Static, getter and setter methods

Lets imagine our class SoundPlayer has a getter method foo and a static method brand

export default class SoundPlayer {
  constructor() {
    this.foo = 'bar';
  }

  playSoundFile(fileName) {
    console.log('Playing sound file ' + fileName);
  }

  get foo() {
    return 'bar';
  }
  static brand() {
    return 'player-brand';
  }
}

You can mock/spy on them easily, here is an example:

// your jest test file below
import SoundPlayer from './sound-player';

const staticMethodMock = jest
  .spyOn(SoundPlayer, 'brand')
  .mockImplementation(() => 'some-mocked-brand');

const getterMethodMock = jest
  .spyOn(SoundPlayer.prototype, 'foo', 'get')
  .mockImplementation(() => 'some-mocked-result');

it('custom methods are called', () => {
  const player = new SoundPlayer();
  const foo = player.foo;
  const brand = SoundPlayer.brand();

  expect(staticMethodMock).toHaveBeenCalled();
  expect(getterMethodMock).toHaveBeenCalled();
});

Haciendo seguimiento del uso (espiando al mock)

Inyectar una implementación de prueba es útil, pero probablemente desearás probar si el constructor de clase y los métodos están siendo llamados con los parámetros correctos.

Espiando al constructor

Para rastrear llamadas al constructor, reemplaza la función devuelta por la función de alto orden con una función de mock de Jest. Créalo con jest.fn(), y luego especifica su implementación con mockImplementation().

import SoundPlayer from './sound-player';
jest.mock('./sound-player', () => {
  // Works and lets you check for constructor calls:
  return jest.fn().mockImplementation(() => {
    return {playSoundFile: () => {}};
  });
});

This will let us inspect usage of our mocked class, using SoundPlayer.mock.calls: expect(SoundPlayer).toHaveBeenCalled(); or near-equivalent: expect(SoundPlayer.mock.calls.length).toBeGreaterThan(0);

Creando mocks para exports no default

Si la clase no es la exportación default del módulo, entonces necesitas devolver un objeto con un atributo llamado cómo exportación de la clase.

import {Reproductor} from './reproductor';
jest.mock('./reproductor', () => {
  // Funciona y te permite verificar llamadas al constructor:
 return {
    Reproductor: jest.fn().mockImplementation(() => {
      return {reproducirArchivoDeSonido: () => {}};
    }),
  };
});

Espiando métodos de nuestra clase

Nuestra clase simulada necesitará proporcionar cualquier función miembro (playSoundFile en el ejemplo) que será llamada durante nuestras pruebas, o bien obtendremos un error por llamar una función que no existe. Pero probablemente querramos tambien espiar llamadas a esos métodos, para asegurar de que fueron llamados con los parámetros esperados.

Un nuevo objeto será creado cada vez que la simulación de la función constructora sea llamada durante las pruebas. Para espiar llamadas de método en todos estos objetos, poblamos playSoundFile con otra función de simulación, y almacenamos una referencia para esa misma función de simulación en nuestro archivo de prueba, para que esté disponible durante las pruebas.

import SoundPlayer from './sound-player';
const mockPlaySoundFile = jest.fn();
jest.mock('./sound-player', () => {
  return jest.fn().mockImplementation(() => {
    return {playSoundFile: mockPlaySoundFile};
    // Now we can track calls to playSoundFile
  });
});

El equivalente de simulación manual de esto sería:

__mocks__/sound-player.js

// Import this named export into your test file
export const mockPlaySoundFile = jest.fn();
const mock = jest.fn().mockImplementation(() => {
  return {playSoundFile: mockPlaySoundFile};
});

export default mock;

El uso es similar a la función de fábrica del módulo, sólo que puede omitir el segundo argumento de jest.mock(), y deberá importar el método simulado a su archivo de prueba, puesto que ya no es definido ahí. Utilice la ruta de módulo original para esto; no incluya __mocks__.

Limpiando entre pruebas

Para vaciar el registro de llamadas a la función constructura de simulaciones y sus métodos, llamamos a mockClear() en la función beforeEach():

beforeEach(() => {
  SoundPlayer.mockClear();
  mockPlaySoundFile.mockClear();
});

Ejemplo completo

Aquí tiene un archivo de prueba completo el cual utiliza un parámetro de fábrica de módulos para jest.mock:

sound-player-consumer.test.js

import SoundPlayer from './sound-player';
import SoundPlayerConsumer from './sound-player-consumer';

const mockPlaySoundFile = jest.fn();
jest.mock('./sound-player', () => {
  return jest.fn().mockImplementation(() => {
    return {playSoundFile: mockPlaySoundFile};
  });
});

beforeEach(() => {
  SoundPlayer.mockClear();
  mockPlaySoundFile.mockClear();
});

it('The consumer should be able to call new() on SoundPlayer', () => {
  const soundPlayerConsumer = new SoundPlayerConsumer();
  // Ensure constructor created the object:
  expect(soundPlayerConsumer).toBeTruthy();
});

it('We can check if the consumer called the class constructor', () => {
  const soundPlayerConsumer = new SoundPlayerConsumer();
  expect(SoundPlayer).toHaveBeenCalledTimes(1);
});

it('We can check if the consumer called a method on the class instance', () => {
  const soundPlayerConsumer = new SoundPlayerConsumer();
  const coolSoundFileName = 'song.mp3';
  soundPlayerConsumer.playSomethingCool();
  expect(mockPlaySoundFile.mock.calls[0][0]).toBe(coolSoundFileName);
});