javascript - test - Cómo simular dependencias para pruebas unitarias con módulos ES6

test unitarios javascript

Question

Estoy tratando de jugar con los módulos Ecmascript 6 usando webpack + traceur para transpilar a ES5 CommonJS, pero tengo problemas para probarlos con éxito.

Intenté usar el preprocesador Jest + traceur, pero los nombres de autoenclavamiento y dependencia parecen complicarse, además de que parece que no puedo obtener sourceMaps para trabajar con Jest y la depuración del inspector de nodos.

¿Existe un marco mejor para probar los módulos ES6?

Answer 1

Comencé a emplear la import * as obj estilo import * as obj dentro de mis pruebas, que importa todas las exportaciones de un módulo como propiedades de un objeto que luego se puede burlar. Creo que esto es mucho más limpio que usar algo como recablear o proxyquire o cualquier técnica similar.

No puedo hablar por traceur, que era el marco utilizado en la pregunta, pero he encontrado que esto funciona con mi configuración de Karma, Jasmine y Babel, y lo estoy publicando aquí, ya que parece ser el más popular pregunta de este tipo.

He usado esta estrategia con mayor frecuencia cuando necesito burlarme de las acciones de Redux. Aquí hay un pequeño ejemplo:

import * as exports from ''module-you-want-to-mock'';
import SystemUnderTest from ''module-that-uses-above-module'';

describe(''your module'', () => {
  beforeEach(() => {
    spyOn(exports, ''someNamedExport'');  // mock a named export
    spyOn(exports, ''default'');          // mock the default export
  });
  // ... now the above functions are mocked
});

Answer 2

De hecho, conseguí que esto funcionara dejando caer Jest y usando Karma + Jasmine + Webpack y usando https://github.com/jhnns/rewire para burlar las dependencias

Answer 3

Hola, podrías usar proxyquire:

import assert from ''assert'';
import sinon from ''sinon'';
import Proxyquire from ''proxyquire'';

let proxyquire = Proxyquire.noCallThru(),
    pathModelLoader = ''./model_loader'';

describe(''ModelLoader module.'', () => {
    it(''Should load all models.'', () => {
        let fs, modelLoader, ModelLoader, spy, path;
        fs = {
            readdirSync(path) {
                return [''user.js''];
            }
        };
        path = {
            parse(data) {
                return {name: ''user''};
            }
        };
        ModelLoader = proxyquire(pathModelLoader, {''fs'': fs, ''path'': path});
        modelLoader = new ModelLoader.default();
        spy = sinon.spy(modelLoader, ''loadModels'');
        modelLoader.loadModels();
        assert(spy.called);
    });
});

Answer 4

Proxyquire lo ayudará, pero no funcionará con módulos web6 + ES6 modernos, es decir, "alias".

import fs from ''fs'';
import reducers from ''core/reducers'';
...
proxyquire(''../module1'', {
  ''fs'': mockFs,  // this gonna work
  ''core/reducers'': mockReducers // what about this?
});

Eso no funcionará. Mientras pueda burlarse de fs, no puede burlarse de los reductores. Debe especificar real nombre real de la dependencia, después de cualquier transformación webpack o babel. Normalmente: nombre relativo a la ubicación del módulo1. Puede ser ''../../../shared/core/reducers''. Tal vez no.

Hay una caída en las soluciones: https://github.com/theKashey/proxyquire-webpack-alias (estable, basado en la bifurcación de proxyquire) o https://github.com/theKashey/resolveQuire (menos estable, puede ejecutarse en proxyquire original)

Ambos funcionan también y se burlarán de cualquier módulo ES6 (son muy buenos) de forma proxyquire (es una buena forma)

Answer 5

Si está utilizando Webpack, otra opción que tiene un poco más de flexibilidad que rewire es inject-loader .

Por ejemplo, en una prueba que se incluye con Webpack:

describe(''when an alert is dismissed'', () => {

  // Override Alert as we need to mock dependencies for these tests
  let Alert, mockPubSub

  beforeEach(() => {
    mockPubSub = {}
    Alert =  require(''inject!./alert'')({
      ''pubsub-js'': mockPubSub
    }).Alert
  })

  it(''should publish /'app.clearalerts/''', () => {
    mockPubSub.publish = jasmine.createSpy()
    [...]
    expect(mockPubSub.publish).toHaveBeenCalled()
  })
})

inject-loader, de manera similar a proxyquire, al menos permite inyectar dependencias antes de importar, mientras que en rewire debe importar primero y luego volver a cablear, lo que hace que burlarse de algunos componentes (por ejemplo, aquellos que tienen alguna inicialización) sea imposible.