Ich habe die folgenden ES6-Module:

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() {
    ...
  }
}

Ich suche nach einer Möglichkeit, Widget mit einer Scheininstanz von zu testen getDataFromServer. Wenn ich <script>wie in Karma separate s anstelle von ES6-Modulen verwenden würde, könnte ich meinen Test wie folgt schreiben:

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

Wenn ich jedoch ES6-Module einzeln außerhalb eines Browsers teste (wie bei Mocha + babel), würde ich Folgendes schreiben:

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

Okay, aber jetzt getDataFromServerist es nicht verfügbar window(nun, es gibt überhaupt keine window), und ich kenne keine Möglichkeit, Dinge direkt in widget.jsden eigenen Bereich zu injizieren .

Wohin gehe ich von hier aus?

1. Gibt es eine Möglichkeit, auf den Umfang von zuzugreifen widget.jsoder zumindest seine Importe durch meinen eigenen Code zu ersetzen?
2. Wenn nicht, wie kann ich Widgettestbar machen ?

Sachen, über die ich nachgedacht habe:

ein. Manuelle Abhängigkeitsinjektion.

Entfernen Sie alle Importe von widget.jsund erwarten Sie, dass der Anrufer die Deps bereitstellt.

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

Es ist mir sehr unangenehm, die öffentliche Oberfläche von Widget so durcheinander zu bringen und Implementierungsdetails offenzulegen. No Go.

b. Legen Sie die Importe offen, um sie verspotten zu können.

Etwas wie:

import { getDataFromServer } from 'network.js';

export let deps = {
  getDataFromServer
};

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

dann:

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

Dies ist weniger invasiv, erfordert jedoch, dass ich für jedes Modul eine Menge Boilerplate schreibe, und es besteht immer noch das Risiko, dass ich es getDataFromServeranstelle von deps.getDataFromServerständig verwende. Ich bin mir nicht sicher, aber das ist meine bisher beste Idee.

Ich habe begonnen, den import * as objStil in meinen Tests zu verwenden, der alle Exporte aus einem Modul als Eigenschaften eines Objekts importiert, das dann verspottet werden kann. Ich finde das viel sauberer als die Verwendung von Rewire oder Proxyquire oder einer ähnlichen Technik. Ich habe dies am häufigsten getan, wenn ich beispielsweise Redux-Aktionen verspotten musste. Folgendes könnte ich für Ihr Beispiel oben verwenden:

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

Wenn Ihre Funktion zufällig ein Standardexport ist, import * as network from './network'würde dies produzieren {default: getDataFromServer}und Sie können network.default verspotten.

@carpeliam ist korrekt, aber beachten Sie, dass Sie diese Funktion als Teil des Export-Namespace aufrufen müssen, wenn Sie eine Funktion in einem Modul ausspionieren und eine andere Funktion in diesem Modul verwenden möchten, die diese Funktion aufruft. Andernfalls wird der Spion nicht verwendet.

Falsches Beispiel:

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

Richtiges Beispiel:

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

Ich habe eine Bibliothek implementiert, die versucht, das Problem der Laufzeitverspottung von Typescript-Klassenimporten zu lösen, ohne dass die ursprüngliche Klasse über explizite Abhängigkeitsinjektionen informiert sein muss.

Die Bibliothek verwendet die import * as Syntax und ersetzt dann das ursprünglich exportierte Objekt durch eine Stub-Klasse. Die Typensicherheit bleibt erhalten, sodass Ihre Tests zur Kompilierungszeit unterbrochen werden, wenn ein Methodenname aktualisiert wurde, ohne den entsprechenden Test zu aktualisieren.

Diese Bibliothek finden Sie hier: ts-mock-imports .

Die Antwort von @ vdloo brachte mich in die richtige Richtung, aber die gemeinsamen Verwendung der Schlüsselwörter "export" und ES6-Modul "export" in derselben Datei funktionierte nicht für mich (Webpack v2 oder höher beschwert sich). Stattdessen verwende ich einen Standardexport (benannte Variable), der alle Exporte einzelner benannter Module umschließt und dann den Standardexport in meine Testdatei importiert. Ich verwende das folgende Export-Setup mit Mokka / Sinon und Stubbing funktioniert einwandfrei, ohne dass eine Neuverdrahtung erforderlich ist usw.:

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

Ich habe festgestellt, dass diese Syntax funktioniert:

Mein Modul:

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

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

Testcode meines Moduls:

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

Siehe das Dokument .

Ich habe es nicht selbst versucht, aber ich denke, Spott könnte funktionieren. Sie können das reale Modul durch ein von Ihnen bereitgestelltes Modell ersetzen. Im Folgenden finden Sie ein Beispiel, das Ihnen eine Vorstellung davon gibt, wie es funktioniert:

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

Es scheint, als würde mockeryes nicht mehr gewartet und ich denke, es funktioniert nur mit Node.js, aber es ist trotzdem eine nette Lösung, um Module zu verspotten, die sonst schwer zu verspotten sind.