Edit

ES6 Class Mocks

Jest se puede utilizar para crear mocks que simulan 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 mock para una clase ES6 debe ser una función o una clase ES6 actual (que es, de nuevo, otra función). Entonces puedes hacer un mock usando funciones mock.

Un ejemplo de clase ES6

Usaremos un ejemplo de una clase que reproduce archivos de sonido,Reproductor y una clase de consumidores que una esa clase,Consumidor. Crearemos un mock de Reproductor en nuestros test de Consumidor.

// reproductor.js
export default class Reproductor{
  constructor() {
    this.variableEjemplo = 'valorEjemplo';
  }

  reproducirArchivoDeSonido(nombreDeArchivo) {
    console.log('Reproduciendo archivo de sonido ' + nombreDeArchivo);
  }
}

// consumidor.js
import Reproductor from './reproductor';

export default class Consumidor {
  constructor() {
    this.reproductor = new Reproductor();
  }

  reproduceAlgoCool() {
    const nombreDeArchivoCool = 'cancion.mp3';
    this.reproductor.reproducirArchivoDeSonido(nombreDeArchivoCool);
  }
}

Las 4 formas de crear una clase mock ES6

Mocks automáticos

jest.mock('./reproductor') regresa un mock automático que se puede ocupar para espiar llamadas al constructor de la clase y todos sus métodos. Este reemplaza la clase ES6 con un constructor mock, y reemplaza todos sus métodos con funciones mock que siempre regresan undefined. Las llamadas a los métodos se almacenan en elMockAutomatico.mock.instances[índice].nombreDelMetodo.mock.calls.

Ten en cuenta que si utilizas funciones de flecha (=>) en tus clases, estas NO serán parte del 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.

If you don't need to replace the implementation of the class, this is the easiest option to set up. Por ejemplo:

import Reproductor from './reproductor';
import Consumidor from './consumidor';
jest.mock('./reproductor'); // Reproductor es ahora un constructor mock

beforeEach(() => {
  // Borra todas las instancias y llamadas al constructor y a todos los métodos:
  Reproductor.mockClear();
});

it('Podemos verificar que el consumidor llamó al constructor de la clase', () => {
  const consumidor = new Consumidor();
  expect(Reproductor).toHaveBeenCalledTimes(1);
});

it('Podemos verificar que el consumidor llamó a algún método de la instancia', () => {
  // Muestra que mockClear() está funcionando:
  expect(Reproductor).not.toHaveBeenCalled();

  const consumidor = new Consumidor();
  // Constructor debió haber sido llamado nuevamente:
  expect(Reproductor).toHaveBeenCalledTimes(1);

  const nombreDeArchivoCool = 'cancion.mp3';
  consumidor.reproduceAlgoCool();

  // mock.instances esta disponible con mocks automáticos:
  const instanciaMockDeReproductor= Reproductor.mock.instances[0];
  const mockDeReproducirArchivoDeSonido = instanciaMockDeReproductor.reproducirArchivoDeSonido;
  expect(mockDeReproducirArchivoDeSonido.mock.calls[0][0]).toEqual(nombreDeArchivoCool);
  // Equivalente a la verificación anterior:
  expect(mockDeReproducirArchivoDeSonido).toHaveBeenCalledWith(nombreDeArchivoCool);
  expect(mockDeReproducirArchivoDeSonido).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__/reproductor.js

// Importa esta exportación nombrada en tu archivo test:
export const mockDeReproducirArchivoDeSonido = jest.fn();
const mock = jest.fn().mockImplementation(() => {
  return {reproducirArchivoDeSonido: mockDeReproducirArchivoDeSonido};
});

export default mock;

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

// consumidor.test.js
import Reproductor, {mockReproducirArchivoDeSonido} from './reproductor';
import Consumidor from './consumidor';
jest.mock('./reproductor'); // Reproductor es ahora un constructor mock

beforeEach(() => {
  // Borra todas las instancias y llamadas al constructor y a todos los métodos:
  Reproductor.mockClear();
  mockReproducirArchivoDeSonido.mockClear();
});

it('Podemos verificar que el consumidor llamó al constructor de la clase', () => {
  const consumidor = new Consumidor();
  expect(Reproductor).toHaveBeenCalledTimes(1);
});

it('Podemos verificar que el consumidor llamó a algún método de la instancia', () => {
  const consumidor = new Consumidor();
  const nombreDeArchivoCool = 'cancion.mp3';
  consumidor.reproduceAlgoCool();
  expect(mockDeReproducirArchivoDeSonido).toHaveBeenCalledWith(nombreDeArchivoCool);
});

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

jest.mock(path, moduleFactory) takes a module factory argument. A module factory is a function that returns the 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};
  });
});

Una limitación el argumento fábrica de modulo es que, ya que las llamadas a jest.mock() son elevadas hasta el inicio del archivo, no es posible definir una variable y luego usarla en la fábrica. Se hace un excepción para variables que empiecen con la palabra 'mock'. ¡Depende de ti garantizar de que serán inicializadas a tiempo! Por ejemplo, lo siguiente arrojará un error fuera de alcance (out-of-scope) debido al uso de 'fake' en lugar de 'mock' en la declaración de la variable:

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

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: () => {}};
  };
});

Nota: las funciones de flecha no funcionaran

Note that the mock can't be an arrow function because calling new on an arrow function is not allowed in JavaScript. So this won't work:

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.)

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: () => {}};
  });
});

Esto nos permitirá inspeccionar el uso de nuestra clase mock, utilizando Reproductor.mock.calls: expect(Reproductor).toHaveBeenCalled(); o su equivalente cercano expect(Reproductor.mock.calls.length).toEqual(1);

Creando mocks para exports no default

If the class is not the default export from the module then you need to return an object with the key that is the same as the class export name.

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]).toEqual(coolSoundFileName);
});