我如何存根 webpack 的 require.ensure？答案

【问题标题】：How Do I Stub webpack's require.ensure?我如何存根 webpack 的 require.ensure？
【发布时间】：2017-05-22 13:55:24
【问题描述】：

我使用 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());
});

运行测试时，我收到以下错误消息：

“包含 SideNav 组件”的“每个之前”钩子：不能存根不存在的自己的属性确保

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

所以我的问题是：

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

【问题讨论】：

你是对的。每个模块都有一个独特的require 函数。这比我想象的要复杂。你可以阅读更多关于这个here。猴子补丁require.esnure 将非常困难。我还建议您考虑 @hinok 建议的 babel-plugin-rewire 之类的东西
您的问题已在此处得到解答：stackoverflow.com/questions/33070482/…
问题是，我在开始我的项目时使用 rewire 进行了评估，发现 Mockery 的性能要好得多，所以我想我必须弄清楚如何使用该帖子中的 rewire 解决方案嘲讽。

标签： javascript reactjs webpack mocha.js sinon

【解决方案1】：

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

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

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

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

【讨论】：