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.