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

但这两个道具仍未定义

Answer 1

您正在正确设置props。问题是wrapper.prop()会在您的特定情况下返回undefined。发生这种情况是因为实际上wrapper不是<ActiveConversation />，而是它返回的内容。因此，prop()调用会尝试从prop返回的根节点获取messagesList <ActiveConversation />个密钥。

例如，如果<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'>（不是它的子节点）中找到道具，并且由于没有一个，将返回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测试:)

如何在反应组分的酶中设置对象类型道具值？

1 个答案: