Как я могу издеваться над импортом модуля ES6?

У меня есть следующие модули 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и ожидайте, что вызывающий предоставит deps.

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}и вы можете издеваться network.default.

carpeliam верен , но обратите внимание, что если вы хотите шпионить за функцией в модуле и использовать другую функцию в этом модуле, вызывающую эту функцию, вам необходимо вызвать эту функцию как часть пространства имен экспорта, иначе шпион не будет использоваться .

Неправильный пример:

// File mymodule.js

export function myfunc2() {return 2;}
export function myfunc1() {return myfunc2();}

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

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

Ответ vdloo направил меня в правильном направлении, но использование ключевых слов «экспорт» CommonJS и модуля ES6 «экспорт» в одном файле у меня не сработало ( Webpack v2 или более поздняя версия жалуется).

Вместо этого я использую экспорт по умолчанию (именованная переменная), обертывающий все отдельные экспортные модули именованных модулей, а затем импортирую экспорт по умолчанию в свой файл тестов. Я использую следующую настройку экспорта с Mocha / Sinon, и заглушка отлично работает без необходимости перепрограммирования и т. Д .:

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

Я реализовал библиотеку, которая пытается решить проблему имитации импорта классов TypeScript во время выполнения, не требуя, чтобы исходный класс знал о какой-либо явной инъекции зависимостей.

Библиотека использует import * asсинтаксис, а затем заменяет исходный экспортированный объект классом-заглушкой. Он сохраняет безопасность типов, поэтому ваши тесты будут прерваны во время компиляции, если имя метода было обновлено без обновления соответствующего теста.

Эту библиотеку можно найти здесь: ts-mock-imports .

Я обнаружил, что этот синтаксис работает:

Мой модуль:

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

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

Тестовый код моего модуля:

// File 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, но, тем не менее, это отличное решение для имитации модулей, которые иначе сложно имитировать.

Я недавно обнаружил babel-plugin-mockable-import, который аккуратно решает эту проблему, ИМХО. Если вы уже используете Babel , стоит изучить его.

См. Предположим, я хотел бы имитировать результаты, возвращаемые isDevMode()функцией, чтобы проверить, как код будет вести себя при определенных обстоятельствах.

Следующий пример протестирован на следующей настройке

    "@angular/core": "~9.1.3",
    "karma": "~5.1.0",
    "karma-jasmine": "~3.3.1",

Вот пример простого сценария тестового случая

import * as coreLobrary from '@angular/core';
import { urlBuilder } from '@app/util';

const isDevMode = jasmine.createSpy().and.returnValue(true);

Object.defineProperty(coreLibrary, 'isDevMode', {
  value: isDevMode
});

describe('url builder', () => {
  it('should build url for prod', () => {
    isDevMode.and.returnValue(false);
    expect(urlBuilder.build('/api/users').toBe('https://api.acme.enterprise.com/users');
  });

  it('should build url for dev', () => {
    isDevMode.and.returnValue(true);
    expect(urlBuilder.build('/api/users').toBe('localhost:3000/api/users');
  });
});

Примерное содержание src/app/util/url-builder.ts

import { isDevMode } from '@angular/core';
import { environment } from '@root/environments';

export function urlBuilder(urlPath: string): string {
  const base = isDevMode() ? environment.API_PROD_URI ? environment.API_LOCAL_URI;

  return new URL(urlPath, base).toJSON();
}