Как сделать Stub webpack require.ensure? - программирование

Я использую webpack функцию разделения кода (require.ensure), чтобы уменьшить начальный размер пакета моего приложения React путем загрузки компонентов, которые не видны при загрузке страницы из отдельного пакета, который загружается асинхронно.

Это работает отлично, но мне трудно написать unit test для него.

Моя тестовая установка основана на Mocha, Chai и Sinon.

Вот соответствующий отрывок из кода, который я пробовал до сих пор:

describe('When I render the component', () => {
    let component,
        mySandbox;
    beforeEach(() => {
        mySandbox = sandbox.create();
        mySandbox.stub(require, 'ensure');
        component = mount(<PageHeader />);
    });
    describe('the rendered component', () =>
        it('contains the SideNav component', () =>
            component.find(SideNav).should.have.length(1)
        )
    );
    afterEach(() => mySandbox.restore());
});

При запуске теста я получаю следующее сообщение об ошибке:

"перед тем, как каждый" hook for "содержит компонент SideNav": не может заглушить несуществующее собственное свойство, гарантируя

Это происходит потому, что require.ensure - это метод, который существует только в пакете webpack, но я не собираю свои тесты с помощью webpack и не хочу, потому что это создаст дополнительные накладные расходы и, предположительно, более длительные сроки выполнения тестов.

Итак, мой вопрос:

Есть ли способ заглушить webpack require.ensure с помощью Sinon без запуска тестов через webpack?

Ответ 1

Каждый модуль имеет свой собственный экземпляр, поэтому единственный способ издеваться над require.ensure - иметь некоторую абстракцию вокруг require, чтобы получить этот уникальный require из требуемого модуля в тесте, а затем добавить макет ensure() к этому экземпляру require.

Вы можете использовать babel-plugin-rewire и использовать getter для получения require, например

const require = myComponent.__get__('require');
require.ensure = () => { /* mock here */};

Я не уверен на 100%, что он будет работать, но определенно я постараюсь пойти в этом направлении. Я рекомендую прочитать эту проблему в github, которая связана с вашей проблемой и объясняет многое.