I am trying to snapshot test my React components with Jest and Enzyme. Some components have the animation component (imported from react-spring/react-motion
) in them, which renders a function as its child. This makes testing incredibly hard. I did quite a bit of research and came up with 3 ideas:
- Use Enzyme's
mount
to render everything, and snapshot test it. I found it impossible/ineffective for expensive components, and the snapshots produced are often really heavy (1MB - 2MB). - Use Enzyme's
shallow
and snapshot test the component. Then find the animation component, render the children inside it using Enzyme'srenderProp()
and snapshot test them. This worked great until I found thatrenderProp()
doesn't work nicely with<StaggeredMotion />
forreact-motion
andreact-spring
. A workaround for this issue is explicitly call the function as.prop('children')()
, then shallow the whole thing, but the code will then look messy and tough to read. - Just use Enzyme's
shallow
and snapshot test the component. The rest are on the library's side.
The question is: Which one should I use? If none of these are good enough, what are the alternatives? Thanks in advance.
(If you need a code sample, I am more than happy to provide)
Aucun commentaire:
Enregistrer un commentaire