У мене є наступні модулі 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, як у Кармі, я міг би написати свій тест на зразок:

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

Мені дуже незручно зіпсувати загальнодоступний інтерфейс віджетів, як це, та викладати деталі щодо імплементації. Не йдіть.

б. Розкрийте імпорт, щоб дозволити знущатися над ними.

Щось на зразок:

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}і ви можете знущатися з network.default.

@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синтаксис, а потім замінює оригінальний експортований об’єкт класом заглушки. Він зберігає безпеку типу, тому ваші тести будуть порушені під час компіляції, якщо ім'я методу було оновлено без оновлення відповідного тесту.

Цю бібліотеку можна знайти тут: ts-mock-import .

@ відповідь vdloo мене направила в правильному напрямку, але використання обох ключових слів "експортування" і модуля ES6 "експортування" разом у одному файлі для мене не працювало (webpack v2 або пізніші скарги). Натомість я використовую експорт за замовчуванням (названа змінна), який обгортає весь окремий експорт модуля, а потім імпортує експорт за замовчуванням у мій тестовий файл. Я використовую наступні налаштування експорту з моккою / синоном і заглушкою, добре працює, не потребуючи перемотування тощо.

// 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, але тим більше, це акуратне рішення для глузування з модулів, які інакше важко знущатися.