Need help with enzyme
for testing. I have checked here but it did not help: How does one access state on a nested React component wrapped by an HOC?
Here is my problem:
How can I check function called or not and state of Child component? I also need to check lifecycle, so I used mount of parent component, but haven't done that yet.
I used below when I render
ed one component:
expect(searchWrapper.find('select [selected]').val()).to.equal('someId')
,
but with mount
, this is not working, as it complains searchWrapper.find(...).val
is not a function which I believe is a cheer IO and it worked with render
only. So what will be the proper way for me?
What I intend to do: On child select change, check (and/or match):
- child func is called once
- parent func is called once (called inside 1.)
- parent state
- child state
- lifecyle methods like
componentWillReceiveProps
andcomponentDidMount
etc - Result rendered output validation, also including some of the above.
Component is like
class ParentWrapper {
// state and other functions and lifecycle methods
render(){
....
<SearchWrapper {...props}/>
<ResultWrapper {...props}/>
}
}
class SearchWrapper {
// state
// lifecycle methods
// functions
}
and same for ResultWrapper
.
Summarizing it again with some code: I want to access state and other objects of Child node, just like we can do with root. Also access rendered objects like selected option from the select menu, for example.
// state is not a function, as it has to be called for root only, then whats the alternative
expect(parentWrapper.find(SearchWrapper).state().searchId).to.equal('someValue');
// Below also did not work, it worked when I tested SearchWrapper individually using render()
// which is a CheerIO function, but I need to use mount of parent for whole component testing
// and inter-component interactions
searchWrapper.find('.form1 select').simulate('change', {target : {value : 'someValue'}});
// sinon spy on change is triggered
expect(searchWrapper.render().find('select [selected]').val()).to.equal('someValue');
// AssertionError: expected undefined to equal 'someValue'