我如何存根 webpack 的 require.ensure？

Question

我使用 webpack's code splitting feature (require.ensure) to reduce the initial bundle size of my React 应用程序是通过从异步加载的单独包加载在页面加载时不可见的组件。

这很完美，但是我在为它编写单元测试时遇到了问题。

我的测试设置基于 Mocha, Chai and 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());
});

当运行测试时，我得到这个错误信息：

"before each" hook for "contains the SideNav component": Cannot stub non-existent own property ensure

发生这种情况是因为 require.ensure 是一种只存在于 webpack 包中的方法，但我没有将我的测试与 webpack 捆绑在一起，我也不想这样做，因为它会产生更多的开销并且可能会更长测试执行时间。

所以我的问题是：

有没有办法在没有运行通过 webpack 测试的情况下用 Sinon 存根 webpack 的 require.ensure？

Answer 1

每个模块都有自己的 require 实例，因此模拟 require.ensure 的唯一方法是围绕 require 进行某种抽象，以便从所需模块中获取这个唯一的 require在测试中，然后向该 require 实例添加 ensure() 的模拟。

您可以使用 babel-plugin-rewire 并使用 getter 来获得 require，例如

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

我不是 100% 确定它会起作用，但我肯定会尝试朝这个方向前进。我建议阅读 github 上的 this issue，这与您的问题有关并且解释了很多。

我如何存根 webpack 的 require.ensure？

How Do I Stub webpack's require.ensure?

javascript

mocha.js

sinon

reactjs

webpack