我正在尝试确定在使用 React Universal Component 2.0 使用动态导入时如何最好地编写单元测试
https://github.com/faceyspacey/react-universal-component
TestableComponent 是我要测试的组件。我想测试“ChildComp”是否正确返回。实际上,这涉及到很多逻辑和转换,但作为基本案例,我只是为了能够测试“ChildComp”是否存在。我正在使用通用组件来动态导入“ChildComp”
可测试组件.js
import React, { Component } from 'react'
import universal from 'react-universal-component'
const ChildComp = universal(() => import(/* webpackChunkName: 'child' */ 'common/ChildComp'), {
resolve: () => require.resolveWeak('common/ChildComp'),
chunkName: 'child'
})
class TestableComponent extends Component {
constructor (props) {
super(props)
this.childNodes = []
}
componentWillMount () {
this.childNodes.push(<ChildComp id='myLink' key='myLink' />)
}
render () {
return (
<div>{this.childNodes}</div>
)
}
}
export default TestableComponent
可测试组件单元测试
import React from 'react'
import TestableComponent from '../TestableComponent'
import { mount, shallow } from 'enzyme'
const waitFor = ms => new Promise(resolve => setTimeout(resolve, ms))
describe('Testable Component test', () => {
it('tests transformation', async () => {
const compMount = mount((<TestableComponent />))
console.log(compMount.debug())
/* output: <TestableComponent >
<div>
<UniversalComponent id="myLink">
<DefaultLoading id="myLink">
<div>
Loading...
</div>
</DefaultLoading>
</UniversalComponent>
</div>
</TestableComponent> */
const compMountWait = mount((<TestableComponent />))
await waitFor(1000) // dynamic import
console.log(compMountWait.debug())
/* output: <TestableComponent>
<div>
<UniversalComponent id="myLink">
<ChildComp id="myLink" />
</UniversalComponent>
</div>
</TestableComponent> */
})
})
请注意,在第一个 debug() 中最初没有显示 ChildComp。只是加载组件导入尚未完成的信息。
在 waitFor(1000) 之后,您可以看到 ChildComp 可用。
问题:在结构测试之前使用超时让动态导入完成是否合适,或者是否有编程方式来确定动态导入何时完成?