Jest酵素如何浅浅测试包裹组件的存在

时间:2018-12-14 09:56:12

标签: javascript reactjs jestjs enzyme

我正在测试有条件地呈现包装组件的组件。我正在使用酵素和开玩笑,并且根成分是通过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的存在?

2 个答案:

答案 0 :(得分:5)

只要测试中的WrappedComponent不是原始的组件类,而是包装在HOC中的组件,即HOC(WrappedComponent),就应该断言某个组件的存在。

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

import WrappedComponent from 'WrappedComponent'

...

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

答案 1 :(得分:3)

您可以使用选择器'HOC(WrappedComponent)'

test('WrappedComponent is rendered', () => {
    const wrapper = shallow(<RootComponent {...props}/>);
    expect(wrapper.find('HOC(WrappedComponent)').length).toEqual(1);
}