javascript - Jest Enzyme 如何对包装组件的存在进行浅层测试

Question

我正在测试一个有条件地呈现包装组件的组件。我正在使用 enzyme 和 jest，根组件是通过 shallow() 方法呈现的。问题是测试 Root 组件是否包含包装组件。

如何在不使用 mount() 渲染方法的情况下测试包装组件是否存在？

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);