Tôi có các mô-đun ES6 sau:

mạng.js

export function getDataFromServer() {
  return ...
}

widget.js

import { getDataFromServer } from 'network.js';

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

  render() {
    ...
  }
}

Tôi đang tìm cách để kiểm tra Widget với một ví dụ giả getDataFromServer. Nếu tôi sử dụng các <script>s riêng biệt thay vì các mô-đun ES6, như trong Karma, tôi có thể viết bài kiểm tra của mình như sau:

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

Tuy nhiên, nếu tôi đang kiểm tra các mô-đun ES6 riêng lẻ bên ngoài trình duyệt (như với Mocha + babel), tôi sẽ viết một cái gì đó như:

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

Được rồi, nhưng bây giờ getDataFromServerkhông có sẵn window(tốt, hoàn toàn không có window) và tôi không biết cách tiêm trực tiếp vào widget.jsphạm vi của chính mình.

Vậy tôi phải đi đâu từ đây?

1. Có cách nào để truy cập phạm vi widget.jshoặc ít nhất là thay thế nhập khẩu của nó bằng mã của riêng tôi không?
2. Nếu không, làm thế nào tôi Widgetcó thể kiểm tra?

Thứ tôi đã xem xét:

a. Hướng dẫn tiêm phụ thuộc.

Xóa tất cả nhập khẩu từ widget.jsvà mong đợi người gọi cung cấp deps.

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

Tôi rất khó chịu với việc làm rối giao diện công khai của Widget như thế này và tiết lộ chi tiết triển khai. Không đi.

b. Cho phép nhập khẩu để cho phép chế nhạo họ.

Cái gì đó như:

import { getDataFromServer } from 'network.js';

export let deps = {
  getDataFromServer
};

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

sau đó:

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

Điều này ít xâm lấn hơn nhưng đòi hỏi tôi phải viết rất nhiều bản tóm tắt cho mỗi mô-đun, và vẫn có nguy cơ tôi sử dụng getDataFromServerthay vì deps.getDataFromServermọi lúc. Tôi không yên tâm về điều đó, nhưng đó là ý tưởng tốt nhất của tôi cho đến nay.

Tôi đã bắt đầu sử dụng import * as objkiểu trong các thử nghiệm của mình, nhập khẩu tất cả xuất khẩu từ một mô-đun làm thuộc tính của một đối tượng mà sau đó có thể bị chế giễu. Tôi thấy điều này sẽ sạch hơn rất nhiều so với việc sử dụng một cái gì đó như tua lại hoặc proxy hoặc bất kỳ kỹ thuật tương tự nào. Tôi đã làm điều này thường xuyên nhất khi cần chế giễu các hành động của Redux chẳng hạn. Đây là những gì tôi có thể sử dụng cho ví dụ của bạn ở trên:

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

Nếu chức năng của bạn là xuất khẩu mặc định, thì import * as network from './network'nó sẽ tạo ra {default: getDataFromServer}và bạn có thể giả định network.default.

@carpeliam đúng nhưng lưu ý rằng nếu bạn muốn theo dõi một chức năng trong một mô-đun và sử dụng một chức năng khác trong mô-đun đó gọi chức năng đó, bạn cần gọi chức năng đó là một phần của không gian tên xuất khẩu nếu không gián điệp sẽ không được sử dụng.

Ví dụ sai:

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

Ví dụ đúng:

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

Tôi đã triển khai một thư viện cố gắng giải quyết vấn đề nhạo báng thời gian nhập của lớp Typecript mà không cần lớp gốc để biết về bất kỳ nội dung phụ thuộc rõ ràng nào.

Thư viện sử dụng import * ascú pháp và sau đó thay thế đối tượng được xuất ban đầu bằng một lớp sơ khai. Nó giữ lại sự an toàn của loại để các thử nghiệm của bạn sẽ bị hỏng khi biên dịch nếu tên phương thức đã được cập nhật mà không cập nhật thử nghiệm tương ứng.

Thư viện này có thể được tìm thấy ở đây: ts-mock-nhập khẩu .

Câu trả lời của @ vdloo đã đưa tôi đi đúng hướng, nhưng sử dụng cả hai từ khóa "xuất khẩu" và mô-đun ES6 chung trong cùng một tệp không hoạt động với tôi (webpack v2 hoặc sau đó phàn nàn). Thay vào đó, tôi đang sử dụng một xuất khẩu mặc định (biến có tên) bao bọc tất cả các xuất khẩu mô-đun có tên riêng lẻ và sau đó nhập xuất khẩu mặc định trong tệp thử nghiệm của tôi. Tôi đang sử dụng thiết lập xuất sau đây với mocha / sinon và stubbing hoạt động tốt mà không cần tua lại, v.v.:

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

Tôi đã tìm thấy cú pháp này để làm việc:

Mô-đun của tôi:

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

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

Mã kiểm tra mô-đun của tôi:

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

Xem tài liệu .

Tôi đã không thử nó, nhưng tôi nghĩ rằng sự nhạo báng có thể làm việc. Nó cho phép bạn thay thế mô-đun thực bằng một mô phỏng mà bạn đã cung cấp. Dưới đây là một ví dụ để cung cấp cho bạn ý tưởng về cách thức hoạt động của nó:

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

Có vẻ như mockerynó không còn được duy trì nữa và tôi nghĩ rằng nó chỉ hoạt động với Node.js, nhưng không kém, đó là một giải pháp gọn gàng cho việc mô phỏng các mô-đun khó chế giễu.