reactjs - 如何在 react 组件的 enzyme 中设置对象类型 Prop 值？

Question

我尝试了两种方法，

1.

const wrapper=shallow(<ActiveConversation />)
wrapper.setProps({activeConversation:c,agent:a});
expect(wrapper.prop('messagesList')).to.equal(messagesList);

2.

const wrapper=shallow(<ActiveConversation messagesList={messagesList}
       agent={agent} contactFormState={d} tagSuggestions={t}/>);

但是两个 Prop 仍然未定义

Answer 1

您正在设置props正确。问题是wrapper.prop()返回undefined在你的具体情况下。发生这种情况是因为实际上 wrapper不是<ActiveConversation /> ，这就是它返回的内容。所以你的prop()调用尝试获取 prop与 messagesList从 <ActiveConversation /> 返回的根节点的 key 。

例如，如果 <ActiveConversation />组件渲染如下:

<div className='conversation'>
  <ConversationRenderer
    messagesList={this.props.messagesList}
    activeConversation={this.props.activeConversation} 
    info={info? true: false}
  /> 
  {info} 
</div>

wrapper.prop('messagesList')将尝试在此节点 <div className='conversation'> 中找到 prop (不是它的 child )，并且由于没有 child ，因此将返回 undefined .

为了通过测试<ActiveConversation />应该呈现如下内容:

<div 
   messagesList={this.props.messagesList}
   className='conversation'
>
  <ConversationRenderer
    messagesList={this.props.messagesList}
    activeConversation={this.props.activeConversation} 
    info={info? true: false}
  /> 
  {info} 
</div>

但我想这不是你想要的。

顺便说一下，但是你的测试似乎没有意义。这有什么意义呢？测试是否 prop已设置？都是关于react功能，留给 facebook 来测试:)