How To Access Div Inside Props Like Avatar, Actions Of Cardheader(child Of Card Element From MaterialUI) Div Using Jest And Enzyme
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.
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>)
Related Questions
- → Import statement and Babel
- → should I choose reactjs+f7 or f7+vue.js?
- → Uncaught TypeError: Cannot read property '__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' of undefined
- → .tsx webpack compile fails: Unexpected token <
- → React-router: Passing props to children
- → ListView.DataSource looping data for React Native
- → React Native with visual studio 2015 IDE
- → Can't test submit handler in React component
- → React + Flux - How to avoid global variable
- → Webpack, React & Babel, not rendering DOM
- → How do I determine if a new ReactJS session and/or Browser session has started?
- → Alt @decorators in React-Native
- → How to dynamically add class to parent div of focused input field?