다음과 같은 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() {
    ...
  }
}

의 모의 인스턴스로 위젯을 테스트하는 방법을 찾고 getDataFromServer있습니다. <script>Karma와 같이 ES6 모듈 대신 별도 의 s를 사용하면 다음 과 같이 테스트를 작성할 수 있습니다.

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

그러나 브라우저 외부에서 개별적으로 ES6 모듈을 테스트하는 경우 (Mocha + babel과 같은) 다음과 같이 작성합니다.

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

좋아, 그러나 지금 getDataFromServer은 사용할 수 window없으며 (아무도 없다 window), 나는 물건을 widget.js자신의 범위에 직접 주입하는 방법을 모른다 .

여기서 어디로 가야합니까?

1. 의 범위에 액세스 widget.js하거나 가져 오기를 내 코드로 바꾸는 방법이 있습니까?
2. 그렇지 않다면 어떻게 Widget테스트 할 수 있습니까?

내가 고려한 것들 :

ㅏ. 수동 의존성 주입.

모든 가져 오기를 제거 widget.js하고 발신자가 뎁스를 제공 할 것으로 예상합니다.

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

위젯의 공용 인터페이스를 엉망으로 만들고 구현 세부 정보를 노출하는 것이 매우 불편합니다. 안돼

비. 수입품을 조롱 할 수 있도록 노출하십시오.

다음과 같은 것 :

import { getDataFromServer } from 'network.js';

export let deps = {
  getDataFromServer
};

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

그때:

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

이것은 덜 침습적이지만 각 모듈에 대해 많은 상용구를 작성해야하며 항상 getDataFromServer대신 사용하는 위험 deps.getDataFromServer이 있습니다. 나는 그것에 대해 불안하지만 그것이 지금까지 나의 최고의 아이디어입니다.

답변

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

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

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
    });
});

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

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

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

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

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