如何在反應組分的酶中設置對象類型道具值？

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()調用嘗試從<ActiveConversation />返回的根節點獲取帶有messagesList鍵的prop 。

例如，如果<ActiveConversation />組件呈現如下內容：

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

wrapper.prop('messagesList')將嘗試在此節點中找到prop <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測試:)