How to set the value of the property type of an object in an enzyme for a reacting component?

Question

I tried two ways

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

But still the props continue undefined

Answer 1

You set props . The problem is that wrapper.prop() returns undefined in your specific case. This is because wrapper is actually not <ActiveConversation /> , it is what it returns. So your prop() call is trying to get prop with the messagesList key from the root node returned from <ActiveConversation /> .

For example, if the <ActiveConversation /> component displays something like this:

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

wrapper.prop('messagesList') will try to find support in this node <div className='conversation'> (and not its children), and since it is not there, undefined will return.

To pass the test, <ActiveConversation /> should look something like this:

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

But I think this is not what you want.

By the way, but your test seems pointless. What's the point? Check if prop parameter is set? It's about react functionality, leave it to check on facebook :)