Ad

How To Access Div Inside Props Like Avatar, Actions Of Cardheader(child Of Card Element From MaterialUI) Div Using Jest And Enzyme

- 1 answer

I am trying to write test cases for a react js class using Jest and Enzyme frameworks.My react class uses Card class in material UI. Part of my code looks like this .

<Card>
     <CardHeader
        avatar = {<div className={classes.imgHolder}><img src='/opt/imgs.png'/></div>} 
        actions = {<div/>}
        title = {<div/>}
      />
</Card>

Part of my test code looks like this.

let  wrapper=shallow(<PlainHeader {...props}/>).dive();
let header_ = wrapper.find('WithStyles(CardHeader)'

So my question here is , how do I access div inside avatar prop or check if there is a node existed in the avatar using any enzyme methods like find ? wrapper.find('WithStyles(CardHeader)').props().avatar.prop('img') did not work.

I do not find any references in web for such question.

Have browsed many links and have tried many airbnb enzyme functions but that gives errors.

Ad

Answer

If you are testing a component that renders CardHeader I would only check in those tests that the component is passing the right props to CardHeader, not that CardHeader is really rendering them (I would test that in the tests for CardHeader).

So, a test to check that CardHeader is indeed receiving the right props would look like:

const  wrapper = shallow(<PlainHeader {...props} />);
expect(wrapper.find(CardHeader).props().avatar).toEqual(<div><img src='/opt/imgs.png'/></div>)
Ad
source: stackoverflow.com
Ad