Aşağıdaki ES6 modüllerine sahibim:

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

Widget'ı sahte bir örnekle test etmenin bir yolunu arıyorum getDataFromServer. <script>Karma gibi ES6 modülleri yerine ayrı s kullandıysam, testimi şöyle yazabilirdim:

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

Ancak, ES6 modüllerini tek tek bir tarayıcının dışında test edersem (Mocha + babel gibi), şöyle bir şey yazardım:

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

Tamam, ama şu anda getDataFromServermevcut değil window(iyi, hiç yok window) ve bir şeyleri doğrudan widget.jskendi kapsamına enjekte etmenin bir yolunu bilmiyorum .

Peki buradan nereye gideceğim?

1. İçe aktarma kapsamına erişmenin widget.jsveya en azından ithalatını kendi kodumla değiştirmenin bir yolu var mı ?
2. Değilse, nasıl Widgettest edilebilir yapabilirim ?

Düşündüğüm şeyler:

a. Manuel bağımlılık enjeksiyonu.

Tüm ithalatları kaldırın widget.jsve arayanın depsi sağlamasını bekleyin.

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

Widget'ın genel arayüzünü bu şekilde karıştırmak ve uygulama ayrıntılarını ortaya çıkarmaktan çok rahatsızım. Gitme.

b. İthalatları alay konusu yapmak için açıkta bırakın

Gibi bir şey:

import { getDataFromServer } from 'network.js';

export let deps = {
  getDataFromServer
};

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

sonra:

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

Bu daha az invazivdir, ancak her modül için çok sayıda kaynatma plakası yazmamı gerektirir ve hala her zaman getDataFromServeryerine kullanma riskim var deps.getDataFromServer. Bu konuda huzursuzum ama şimdiye kadarki en iyi fikrim bu.

import * as objTestlerimdeki stili kullanmaya başladım , bu da daha sonra alay edilebilecek bir nesnenin özellikleri olarak bir modülden tüm ihracatı içeri aktarıyor. Bunu rewire veya proxyquire veya benzer bir teknik kullanmaktan çok daha temiz buluyorum. Bunu en çok Redux eylemleriyle alay etmek gerektiğinde yaptım. Yukarıdaki örnek için ne kullanabilirsiniz:

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

İşleviniz varsayılan bir dışa aktarma olursa, o import * as network from './network'zaman üretecektir {default: getDataFromServer}ve network.default ile alay edebilirsiniz.

@carpeliam doğrudur, ancak bir modüldeki bir işlev üzerinde casusluk yapmak ve o modülde bu işlevi çağıran başka bir işlev kullanmak istiyorsanız, bu işlevi dışa aktarma ad alanının bir parçası olarak çağırmanız gerekir, aksi takdirde casus kullanılmaz.

Yanlış örnek:

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

Doğru örnek:

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

Herhangi bir açık bağımlılık enjeksiyonunu bilmek için orijinal sınıfa ihtiyaç duymadan, Typecript sınıf ithalatının çalışma zamanı alay sorununu çözmeye çalışan bir kütüphane uyguladım.

Kütüphane import * assözdizimini kullanır ve ardından dışa aktarılan orijinal nesneyi bir saplama sınıfıyla değiştirir. Tip güvenliğini korur, böylece ilgili test güncellenmeden bir yöntem adı güncellenirse testleriniz derleme zamanında kırılır.

Bu kütüphane burada bulunabilir: ts-mock-import .

@ vdloo'nun cevabı beni doğru yöne yönlendirdi, ancak aynı dosyada hem ortak "" dışa aktarma "hem de ES6 modülü" dışa aktarma "anahtar kelimelerini kullanmak benim için işe yaramadı (webpack v2 veya daha sonra şikayet ediyor). Bunun yerine, varsayılan (adlandırılmış değişken) dışa aktarma, adlandırılmış modül dışa aktarma işlemlerini tek tek tamamlayıp test dosyamda varsayılan dışa aktarmayı kullanıyorum. Mocha / sinon ile aşağıdaki ihracat kurulumunu kullanıyorum ve stubbing, rewire, vs'ye ihtiyaç duymadan iyi çalışıyor:

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

Bu sözdiziminin çalıştığını gördüm:

Modülüm:

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

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

Modülümün test kodu:

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

Dokümana bakınız .

Kendim denemedim, ama alaycılığın işe yarayabileceğini düşünüyorum . Gerçek modülü, sağladığınız bir alayla değiştirmenizi sağlar. Aşağıda size nasıl çalıştığı hakkında bir fikir veren bir örnek verilmiştir:

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

Artık korunmuyor gibi görünüyor mockeryve sadece Node.js ile çalıştığını düşünüyorum, ancak daha azı, aksi takdirde alay etmek zor modülleri taklit etmek için temiz bir çözüm.