Reactjs、jest、Ezyme、react通用组件-如何使用动态导入测试组件结构？

我试图确定在使用React Universal Component 2.0使用动态导入时，如何最好地编写单元测试

TestableComponent是我想要测试的组件。我想测试“ChildComp”是否正确返回。事实上，这涉及到很多逻辑和转换，但作为基本情况，我只是想测试“ChildComp”是否存在。我正在使用Universal组件动态导入“ChildComp”

TestableComponent.js

import React，{Component}来自“React”
从“反应通用组件”导入通用组件
const ChildComp=universal（（）=>import（/*webpackChunkName:'child'*/'common/ChildComp'）{
resolve:（）=>require.resolve弱（'common/ChildComp'），
chunkName:'孩子'
})
类TestableComponent扩展组件{
建造师（道具）{
超级（道具）
this.childNodes=[]
}
组件将安装（）{
this.childNodes.push（）
}
渲染（）{
返回(
{this.childNodes}
)
}
}
导出默认可测试组件

可测试组件单元测试

从“React”导入React
从“../TestableComponent”导入TestableComponent
从“酶”导入{mount，shallow}
const waitFor=ms=>newpromise（解析=>setTimeout（解析，ms））
描述（'可测试组件测试'，（）=>{
它（'tests transformation'，async（）=>{
常数compMount=mount（（））
console.log（compMount.debug（））
/*输出：
加载。。。
*/
常量compMountWait=mount（（））
wait waitFor（1000）//动态导入
console.log（compMountWait.debug（））
/*输出：
*/
})
})

请注意，在第一个debug（）中没有显示最初的ChildComp。正在加载组件导入尚未完成的信息

等待（1000）之后，您可以看到ChildComp可用

---

问题：在结构测试之前，使用超时让动态导入完成是否合适，或者是否有一种编程方式来确定动态导入何时完成？

我使用mock in Jest实现了一个解决方案，以便能够覆盖react universal组件的默认行为，并在所有组件中添加对preload函数的调用。您只需在每次测试中使用此代码，因此我建议将其放在测试设置文件中。这意味着您不必更改代码中的任何内容，并允许您在不等待X秒的情况下测试组件

模拟解决方案：

jest.mock('react-universal-component', () => ({
    __esModule: true,
    default: (spec, options) => {
        const universal = jest.
            requireActual('react-universal-component').
            default; // Get original default behavior from the library. 

        const UniversalComponent = universal(spec, options); // Call original function.
        UniversalComponent.preload(); // Preload component.

        return UniversalComponent; // Return loaded Universal Component.
    },
}));

您的代码保持不变：

const ChildComp = universal(() => import(/* webpackChunkName: 'child' */ 
    'common/ChildComp'), {
    resolve: () => require.resolveWeak('common/ChildComp'),
    chunkName: 'child'
})

jest.mock('react-universal-component', () => ({
    __esModule: true,
    default: (spec, options) => {
        const universal = jest.
            requireActual('react-universal-component').
            default; // Get original default behavior from the library. 

        const UniversalComponent = universal(spec, options); // Call original function.
        UniversalComponent.preload(); // Preload component.

        return UniversalComponent; // Return loaded Universal Component.
    },
}));

const ChildComp = universal(() => import(/* webpackChunkName: 'child' */ 
    'common/ChildComp'), {
    resolve: () => require.resolveWeak('common/ChildComp'),
    chunkName: 'child'
})