Eu tenho os seguintes módulos ES6:

network.js

export function getDataFromServer() {
  return ...
}

widget.js

import { getDataFromServer } from 'network.js';

export class Widget() {
  constructor() {
    getDataFromServer("dataForWidget")
    .then(data => this.render(data));
  }

  render() {
    ...
  }
}

Estou procurando uma maneira de testar o Widget com uma instância simulada de getDataFromServer. Se eu usasse <script>s separados em vez de módulos ES6, como no Karma, poderia escrever meu teste como:

describe("widget", function() {
  it("should do stuff", function() {
    let getDataFromServer = spyOn(window, "getDataFromServer").andReturn("mockData")
    let widget = new Widget();
    expect(getDataFromServer).toHaveBeenCalledWith("dataForWidget");
    expect(otherStuff).toHaveHappened();
  });
});

No entanto, se eu estiver testando os módulos ES6 individualmente fora de um navegador (como no Mocha + babel), escreveria algo como:

import { Widget } from 'widget.js';

describe("widget", function() {
  it("should do stuff", function() {
    let getDataFromServer = spyOn(?????) // How to mock?
    .andReturn("mockData")
    let widget = new Widget();
    expect(getDataFromServer).toHaveBeenCalledWith("dataForWidget");
    expect(otherStuff).toHaveHappened();
  });
});

Ok, mas agora getDataFromServernão está disponível no window(bem, não existe window) e não sei como injetar coisas diretamente no widget.jspróprio escopo.

Então, para onde eu vou daqui?

1. Existe uma maneira de acessar o escopo widget.jsou, pelo menos, substituir suas importações por meu próprio código?
2. Caso contrário, como posso fazer o teste Widget?

Coisas que eu considerei:

uma. Injeção de dependência manual.

Remova todas as importações widget.jse espere que o chamador forneça os deps.

export class Widget() {
  constructor(deps) {
    deps.getDataFromServer("dataForWidget")
    .then(data => this.render(data));
  }
}

Estou muito desconfortável por atrapalhar a interface pública do Widget assim e expor os detalhes da implementação. Não vá.

b. Exponha as importações para permitir zombar delas.

Algo como:

import { getDataFromServer } from 'network.js';

export let deps = {
  getDataFromServer
};

export class Widget() {
  constructor() {
    deps.getDataFromServer("dataForWidget")
    .then(data => this.render(data));
  }
}

então:

import { Widget, deps } from 'widget.js';

describe("widget", function() {
  it("should do stuff", function() {
    let getDataFromServer = spyOn(deps.getDataFromServer)  // !
      .andReturn("mockData");
    let widget = new Widget();
    expect(getDataFromServer).toHaveBeenCalledWith("dataForWidget");
    expect(otherStuff).toHaveHappened();
  });
});

Isso é menos invasivo, mas requer que eu escreva um monte de clichê para cada módulo, e ainda há o risco de eu usá-lo em getDataFromServervez de deps.getDataFromServero tempo todo. Estou desconfortável com isso, mas essa é a minha melhor ideia até agora.

Comecei a empregar o import * as objestilo em meus testes, que importa todas as exportações de um módulo como propriedades de um objeto que pode ser zombado. Acho que isso é muito mais limpo do que usar algo como religar ou solicitar proxy ou qualquer técnica semelhante. Eu fiz isso com mais frequência ao precisar zombar de ações Redux, por exemplo. Aqui está o que eu poderia usar para o seu exemplo acima:

import * as network from 'network.js';

describe("widget", function() {
  it("should do stuff", function() {
    let getDataFromServer = spyOn(network, "getDataFromServer").andReturn("mockData")
    let widget = new Widget();
    expect(getDataFromServer).toHaveBeenCalledWith("dataForWidget");
    expect(otherStuff).toHaveHappened();
  });
});

Se a sua função for uma exportação padrão, import * as network from './network'ela produzirá {default: getDataFromServer}e você poderá zombar de network.default.

@carpeliam está correto, mas observe que, se você quiser espionar uma função em um módulo e usar outra função nesse módulo que chama essa função, precisará chamá-la como parte do espaço para nome das exportações, caso contrário, o espião não será usado.

Exemplo errado:

// mymodule.js

export function myfunc2() {return 2;}
export function myfunc1() {return myfunc2();}

// tests.js
import * as mymodule

describe('tests', () => {
    beforeEach(() => {
        spyOn(mymodule, 'myfunc2').and.returnValue = 3;
    });

    it('calls myfunc2', () => {
        let out = mymodule.myfunc1();
        // out will still be 2
    });
});

Exemplo certo:

export function myfunc2() {return 2;}
export function myfunc1() {return exports.myfunc2();}

// tests.js
import * as mymodule

describe('tests', () => {
    beforeEach(() => {
        spyOn(mymodule, 'myfunc2').and.returnValue = 3;
    });

    it('calls myfunc2', () => {
        let out = mymodule.myfunc1();
        // out will be 3 which is what you expect
    });
});

Eu implementei uma biblioteca que tenta resolver o problema da zombaria em tempo de execução das importações da classe Typescript sem precisar da classe original para saber sobre qualquer injeção explícita de dependência.

A biblioteca usa a import * assintaxe e substitui o objeto exportado original por uma classe de stub. Ele retém a segurança de tipo, para que seus testes sejam interrompidos no tempo de compilação se um nome de método tiver sido atualizado sem a atualização do teste correspondente.

Esta biblioteca pode ser encontrada aqui: ts-mock-imports .

A resposta da @ vdloo me levou na direção certa, mas o uso das palavras-chave "exportações" e do módulo ES6 "exportação" do commonjs juntos no mesmo arquivo não funcionou para mim (o webpack v2 ou posterior reclama). Em vez disso, estou usando uma exportação padrão (variável nomeada) agrupando todas as exportações de módulos nomeados individuais e importando a exportação padrão no meu arquivo de testes. Estou usando a seguinte configuração de exportação com mocha / sinon e o stubbing funciona bem sem a necessidade de religar, etc .:

// MyModule.js
let MyModule;

export function myfunc2() { return 2; }
export function myfunc1() { return MyModule.myfunc2(); }

export default MyModule = {
  myfunc1,
  myfunc2
}

// tests.js
import MyModule from './MyModule'

describe('MyModule', () => {
  const sandbox = sinon.sandbox.create();
  beforeEach(() => {
    sandbox.stub(MyModule, 'myfunc2').returns(4);
  });
  afterEach(() => {
    sandbox.restore();
  });
  it('myfunc1 is a proxy for myfunc2', () => {
    expect(MyModule.myfunc1()).to.eql(4);
  });
});

Eu encontrei esta sintaxe para trabalhar:

Meu módulo:

// mymod.js
import shortid from 'shortid';

const myfunc = () => shortid();
export default myfunc;

Código de teste do meu módulo:

// mymod.test.js
import myfunc from './mymod';
import shortid from 'shortid';

jest.mock('shortid');

describe('mocks shortid', () => {
  it('works', () => {
    shortid.mockImplementation(() => 1);
    expect(myfunc()).toEqual(1);
  });
});

Veja o doc .

Eu ainda não tentei, mas acho que a zombaria pode funcionar. Ele permite que você substitua o módulo real por um mock que você forneceu. Abaixo está um exemplo para lhe dar uma idéia de como funciona:

mockery.enable();
var networkMock = {
    getDataFromServer: function () { /* your mock code */ }
};
mockery.registerMock('network.js', networkMock);

import { Widget } from 'widget.js';
// This widget will have imported the `networkMock` instead of the real 'network.js'

mockery.deregisterMock('network.js');
mockery.disable();

Parece que mockerynão é mais mantido e acho que funciona apenas com o Node.js, mas, mesmo assim, é uma solução interessante para zombar de módulos que, de outra forma, seriam difíceis de zombar.