我正在测试一个有条件地渲染包装组件的组件.我正在使用酶和jest,并且通过shallow()方法呈现根组件.
问题是测试Root组件是否包含包装组件.
如何在不使用mount()render方法的情况下测试包装的组件是否存在?
hoc.component.jsx
export function HOC(Component) {
render() {
return <Component />
}
}
wrapped.component.jsx
class WrappedComponent extends React.Component {
...
}
export default HOC(WrappedComponent)
root.component.jsx
class RootComponent extends React.Component {
render() {
return (
condition ? ... :
<WrappedComponent/>
)
}
}
在测试root.component.jsx时,我想检查WrappedComponent是否存在.
root.component.spec.js
从’WrappedComponent’导入{WrappedComponent}
const wrapper = shallow(<RootComponent {...props}/>);
wrapper.find(WrappedComponent).length => returns 0
如果我记录wrapper.debug(),我会看到以下内容:
...<HOC(WrappedComponent) />
在测试RootComponent时,如何测试WrappedComponent的存在?
解决方法:
只要测试中的WrappedComponent不是原始组件类,而是包含在HOC中的组件,即HOC(WrappedComponent),就应该可以断言组件的存在.
如果HOC(WrappedComponent)是默认导出,它应该是:
import WrappedComponent from 'WrappedComponent'
...
const wrapper = shallow(<RootComponent {...props}/>);
expect(wrapper.find(WrappedComponent).length).toBe(1);