unit testing - Using Enzyme to test React components that don't use classes or IDs -


i have following in render method of 1 of components:'

  return <paper key={insight._id} style={styles[viewmode]}>     {cardcover}      <div style={styles[viewmode].content}>       <div         style={styles[viewmode].name}         ontouchtap={_ => onclickinsight(insight._id)}       >         {insight.title}       </div>       [...] 

it seems since enzyme works around using selectors, best option use put classname="something" on divs, if i'm not using them css classes @ all. otherwise, have figure out how many divs within material ui's paper component, , work out overly complicated query dig x levels deep divs, clickable div want test. not mention, if happen move clickable div down or bit, breaks test though div technically still being rendered , still clickable.

unless there's way?

enzyme gives few options here on top of css selectors. find() using react component constructor first find paper component, , use css selector there.

const mycomponent = wrapper.find(paper);

if want verify child has ontouchtap set, can use prop syntax css selector.


Popular posts from this blog

php - How should I create my API for mobile applications (Needs Authentication) -

5 Reasons to Blog Anonymously (and 5 Reasons Not To)

Google AdWords and AdSense - A Dynamic Small Business Marketing Duo