jeudi 27 décembre 2018

Snapshot testing with react-spring/react-motion

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's renderProp() and snapshot test them. This worked great until I found that renderProp() doesn't work nicely with <StaggeredMotion /> for react-motion and react-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