次の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モジュールの代わりに個別のを使用した場合、次のようなテストを作成できます。

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テスト可能にできますか？

私が考えたもの：

a。依存関係の手動注入。

からすべてのインポートを削除widget.jsし、呼び出し元がdepを提供することを期待します。

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

私はこのようにウィジェットの公開インターフェースをめちゃくちゃにして、実装の詳細を公開することに非常に不快です。立ち入り禁止。

b。インポートを公開して、それらをモックできるようにします。

何かのようなもの：

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 objテスト内でスタイルを採用し始めました。これは、モックできるオブジェクトのプロパティとしてモジュールからすべてのエクスポートをインポートします。これは、rewireやproxyquireなどの手法を使用するよりもずっとクリーンであることがわかりました。たとえば、Reduxアクションをモックする必要があるときに、これを最も頻繁に実行しました。上記の例で使用するのは次のとおりです。

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

関数がたまたまデフォルトのエクスポートである場合import * as network from './network'は、が生成され{default: getDataFromServer}、network.defaultをモックできます。

@carpeliamは正しいですが、モジュール内の関数をスパイし、そのモジュールでその関数を呼び出す別の関数を使用する場合は、エクスポート名前空間の一部としてその関数を呼び出す必要があります。そうしないと、スパイは使用されません。

間違った例：

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

Typescriptクラスのインポートの実行時のモックの問題を解決するために、元のクラスが明示的な依存関係の注入について知る必要なくライブラリを実装しました。

ライブラリはimport * as構文を使用してから、元のエクスポートされたオブジェクトをスタブクラスに置き換えます。これはタイプセーフを保持するため、対応するテストを更新せずにメソッド名が更新された場合、コンパイル時にテストが中断します。

このライブラリはts-mock-importsにあります。

@vdlooの答えは正しい方向に向かいましたが、commonjsの「exports」とES6モジュールの「export」の両方のキーワードを同じファイルで一緒に使用しても機能しません（webpack v2以降の文句）。代わりに、デフォルトの（名前付き変数）エクスポートを使用して、個々の名前付きモジュールエクスポートをすべてラップし、デフォルトのエクスポートをテストファイルにインポートしています。私はモカ/シノンで次のエクスポート設定を使用しており、スタブは再配線などを必要とせずに正常に機能します。

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

mockeryもはや維持されていないようで、Node.jsでのみ機能すると思いますが、それでもモックするのが難しいモジュールをモックするための優れたソリューションです。