JEST/酶类组件测试中的反应暂停和反应延迟子组件
因此,我将类组件中使用的导入转换为React.lazy导入API,并将其包装在一个挂起标记中。当我测试那个类组件时,酶抛出一个错误"Enzyme Internal Error: unknown node with tag 13"
。是否有一种方法可以呈现和测试延迟加载组件的装载,而不是使用浅层呈现?
我已经尝试了异步等待,直到延迟加载的承诺解决,但也不起作用,如下所示:
it('async await mount', () async () => {
const wrapper = await mount(<Component />)
}
以下是示例代码:
Component.js
import React, { PureComponent, Suspense } from 'react'
const ChildComponent = React.lazy(() => import('../ChildComponent'))
export default class Component extends PureComponent {
constructor() {
super()
this.state = {
example: null
}
}
doSomething = () => this.setState({
example: 'example'
})
render() {
return (
<div>
<p>Example</p>
<Suspense fallback={<div>...loading</div>}>
<ChildComponent
example={this.state.example}
doSomething={this.doSomething}
/>
</Suspense>
</div>
)
}
}
Component.test.js
import React from 'react'
import renderer from 'react-test-renderer'
import { mount } from 'enzyme'
import Component from '../../Component'
describe('Component', () => {
// snapshot renders loading and not children
it('example snapshot of tree', () => {
const tree = renderer.create(<Component />).toJSON()
expect(tree).toMatchSnapshot()
})
it('example mount test', () => {
// this test fails and throws error I state above
const wrapper = mount(<Component />)
wrapper.setState({ example: 'example' })
expect(wrapper.state.example).toBe('example')
})
})
我读到酶还不支持Reaction 16.6 Suspense API,但我想知道是否还有方法测试挂载的,以便我可以使用酶的simulate
和find
API。
解决方案
解决方案
ChuckJHardy链接的GitHub问题已解决、合并并发布。从1.14.0开始,您可以在酵素中使用挂载API。
引用
https://github.com/airbnb/enzyme/pull/1975
相关文章