如何将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());
});

运行测试时,我收到以下错误消息:

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

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

所以我的问题是:

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

Answer 1

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

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

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

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