ฉันมีโมดูล 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>s แยกต่างหากจากโมดูล ES6 เช่นเดียวกับใน Karma ฉันสามารถเขียนการทดสอบของฉันเช่น:

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

ฉันรู้สึกไม่สบายใจมากที่ได้ทำอินเทอร์เฟซสาธารณะของ Widget แบบนี้และเปิดเผยรายละเอียดการใช้งาน ไม่ไป.

ข เปิดเผยการนำเข้าเพื่ออนุญาตการเยาะเย้ยพวกเขา

สิ่งที่ต้องการ:

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}และคุณสามารถจำลองเครือข่ายได้

@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ไวยากรณ์แล้วแทนที่อ็อบเจ็กต์ที่เอ็กซ์พอร์ตดั้งเดิมด้วยคลาส stub มันยังคงความปลอดภัยของประเภทเพื่อการทดสอบของคุณจะแตกสลายในเวลารวบรวมถ้าชื่อวิธีการได้รับการปรับปรุงโดยไม่ต้องปรับปรุงการทดสอบที่สอดคล้องกัน

ห้องสมุดนี้สามารถพบได้ที่นี่: TS-จำลองการนำเข้า

@ คำตอบของ vdloo ทำให้ฉันมุ่งหน้าไปในทิศทางที่ถูกต้อง แต่การใช้คำหลัก "การส่งออก" และ "การส่งออก" โมดูล Commonjs ร่วมกันในไฟล์เดียวกันไม่ได้ผลสำหรับฉัน (webpack v2 หรือใหม่กว่าบ่น) แต่ฉันใช้การส่งออกเริ่มต้น (ตัวแปรที่มีชื่อ) การห่อของแต่ละโมดูลที่มีชื่อการส่งออกแล้วนำเข้าการส่งออกเริ่มต้นในไฟล์ทดสอบของฉัน ฉันใช้การตั้งค่าการส่งออกต่อไปนี้ด้วยมอคค่า / ไซดอนและการขัดถูทำงานได้ดีโดยไม่จำเป็นต้องใช้ rewire ฯลฯ :

// 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 เท่านั้น แต่ไม่มีน้อยกว่านั้นมันเป็นโซลูชันที่เรียบร้อยสำหรับโมดูลการเยาะเย้ยที่ยากที่จะเยาะเย้ย