Jest Enzyme如何对包裹成分的存在进行浅层测试

Question

我正在测试一个有条件地渲染包装组件的组件.我正在使用酶和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的存在？

Answer 1

应该可以断言组件的存在,只要WrappedComponent在测试中不是原始组件类而是包含在HOC中的组件,即HOC(WrappedComponent).

如果HOC(WrappedComponent)是默认导出,则应为:

import WrappedComponent from 'WrappedComponent'

...

const wrapper = shallow(<RootComponent {...props}/>);
expect(wrapper.find(WrappedComponent).length).toBe(1);