javascript - 如何 Stub webpack 的 require.ensure？

Question

我使用 webpack的代码拆分功能 ( require.ensure ) 以减少我的 React 的初始包大小通过从异步加载的单独包中加载在页面加载时不可见的组件来应用程序。

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

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

运行测试时，我收到此错误消息:

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

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

所以我的问题是:

有没有办法在不通过 webpack 运行测试的情况下使用 Sinon 对 webpack 的 require.ensure 进行 stub ？

Answer 1

每个模块都有自己的 require 实例，所以模拟 require.ensure 的唯一方法是围绕 require 进行某种抽象以获得这个独特的 require 来自测试中所需的模块，然后将 ensure() 的模拟添加到该 require 实例。

你可以使用 babel-plugin-rewire并使用 getter 获取 require，比如

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

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