javascript - 使用 enzyme full mount 找到的组件实例等于 null

Question

我有想要测试的向导组件。

向导组件

class WizardComponent extends React.Component {
  render(){
    return (
      <div>
        {this.props.steps.map(({Component, ...props}) => <Component {...props} />)}
      </div>
    )
  }
}

测试

it('Provides props to the component', () => {
 const FakeComponent = props => <div>1</div>

    const fakeProps = {
        test:1,
        prop4:'test'
    }

    const wrapper = mount(<WizardComponent currentStepName="fakeComponent" steps={[
        {Component:FakeComponent, name:'fakeComponent'},
    ]}/>)

    const component = wrapper.find(FakeComponent);
    console.log(wrapper.contains(<FakeComponent />)) // logs true
    console.log(component) // logs ReactWrapper { length: 1 }
    console.log(component.instance()) // logs null

    expect(component.instance().props).objectContaining(fakeProps)

})

为什么我无法访问组件实例？我想测试它的子组件 props。有人可以帮忙吗？

Answer 1

根据 enyzme documentation ，使用 wrapper.props() 访问组件包装器的 props。

您使用了wrapper.instance().props。