Saya memiliki modul ES6 berikut:

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

Saya mencari cara untuk menguji Widget dengan contoh tiruan getDataFromServer. Jika saya menggunakan <script>modul terpisah s bukannya ES6, seperti di Karma, saya bisa menulis tes saya seperti:

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

Namun, jika saya menguji modul ES6 secara individual di luar browser (seperti dengan Mocha + babel), saya akan menulis sesuatu seperti:

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

Oke, tapi sekarang getDataFromServertidak tersedia di window(well, tidak ada windowsama sekali), dan saya tidak tahu cara menyuntikkan barang langsung ke dalam widget.jsruang lingkup sendiri.

Jadi kemana saya harus pergi dari sini?

1. Apakah ada cara untuk mengakses ruang lingkup widget.js, atau setidaknya mengganti impornya dengan kode saya sendiri?
2. Jika tidak, bagaimana saya bisa membuat Widgetdiuji?

Hal-hal yang saya pertimbangkan:

Sebuah. Injeksi ketergantungan manual.

Hapus semua impor dari widget.jsdan harapkan penelepon memberikan deps.

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

Saya sangat tidak nyaman dengan mengacaukan antarmuka publik Widget seperti ini dan mengekspos detail implementasi. Tidak pergi.

b. Ekspos impor untuk memungkinkan mengejek mereka.

Sesuatu seperti:

import { getDataFromServer } from 'network.js';

export let deps = {
  getDataFromServer
};

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

kemudian:

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

Ini kurang invasif tetapi mengharuskan saya untuk menulis banyak boilerplate untuk setiap modul, dan masih ada risiko saya menggunakan, getDataFromServerbukan deps.getDataFromServersepanjang waktu. Saya gelisah tentang hal itu, tapi sejauh ini ide terbaik saya.

Saya sudah mulai menggunakan import * as objgaya dalam pengujian saya, yang mengimpor semua ekspor dari modul sebagai properti dari objek yang kemudian dapat diejek. Saya menemukan ini menjadi jauh lebih bersih daripada menggunakan sesuatu seperti rewire atau proxyquire atau teknik serupa lainnya. Saya sudah melakukan ini paling sering ketika perlu mengejek tindakan Redux, misalnya. Inilah yang mungkin saya gunakan untuk contoh Anda di atas:

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

Jika fungsi Anda adalah ekspor default, maka import * as network from './network'akan menghasilkan {default: getDataFromServer}dan Anda dapat mengejek network.default.

@carpeliam benar tetapi perhatikan bahwa jika Anda ingin memata-matai suatu fungsi dalam modul dan menggunakan fungsi lain dalam modul yang memanggil fungsi itu, Anda perlu memanggil fungsi itu sebagai bagian dari ekspor namespace jika mata-mata tidak akan digunakan.

Contoh yang salah:

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

Contoh yang tepat:

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

Saya menerapkan pustaka yang mencoba untuk memecahkan masalah ejekan run-time dari impor kelas typescript tanpa perlu kelas asli untuk mengetahui tentang injeksi ketergantungan secara eksplisit.

Perpustakaan menggunakan import * as sintaks dan kemudian menggantikan objek yang diekspor asli dengan kelas rintisan. Mempertahankan keamanan jenis sehingga pengujian Anda akan rusak pada waktu kompilasi jika nama metode telah diperbarui tanpa memperbarui tes yang sesuai.

Perpustakaan ini dapat ditemukan di sini: ts-mock-import .

@ vdloo jawaban membuat saya menuju ke arah yang benar, tetapi menggunakan kata kunci commonjs "ekspor" dan ES6 "ekspor" bersama-sama dalam file yang sama tidak bekerja untuk saya (webpack v2 atau yang lebih baru mengeluh). Sebagai gantinya, saya menggunakan ekspor default (bernama variabel) yang membungkus semua individu bernama modul ekspor dan kemudian mengimpor ekspor default di file tes saya. Saya menggunakan pengaturan ekspor berikut dengan mocha / sinon dan stubbing berfungsi dengan baik tanpa perlu rewire, dll.:

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

Saya menemukan sintaks ini berfungsi:

Modul saya:

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

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

Kode tes modul saya:

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

Lihat dokumen .

Saya belum mencobanya sendiri, tetapi saya pikir ejekan mungkin berhasil. Ini memungkinkan Anda untuk mengganti modul nyata dengan tiruan yang telah Anda berikan. Di bawah ini adalah contoh untuk memberi Anda gambaran tentang cara kerjanya:

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

Sepertinya mockerytidak terawat lagi dan saya pikir itu hanya bekerja dengan Node.js, tetapi tidak kurang, itu adalah solusi yang rapi untuk mengejek modul yang dinyatakan sulit untuk diejek.