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

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

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

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

所以我的问题是：

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

Answer 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并解释很多。

如何存储webpack的require.ensure？

1 个答案: