How to access Child component state and lifecycle methods and validate in React with Jest+Enzyme?

问题

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 rendered 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 and componentDidMount 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'

来源：https://stackoverflow.com/questions/49487409/how-to-access-child-component-state-and-lifecycle-methods-and-validate-in-react

标签

javascript

reactjs

unit-testing

jestjs

enzyme