React 16, Enzyme 3, Jest 21 — The Triforce

What a week! It’s time to update all of it again!

Image for post
Image for post
I think Enzyme needs a official logo! #justsaying

This week was full of news! We saw the long awaited React 16 release:

With great free content around new features:

We also had the new version of Enzyme fixing a lot of annoying bugs:

On top of that, for the surprise of the whole community, and especially, making the day more joyful for our omnipresent friend Dan Abramov, no more patents for React 15/16, Jest, Flow and friends:

I already saw it in Twitter, so what?

Hold my 🍺 dear reader. These releases have one important thing in common:

They are not inflicting pain on ecosystem and library maintainers.

At least, not in the minor version! 🎉, if you’ve been here for a while, maybe you remember last time, we had some issues:

But, NOT THIS TIME!!1

It is a marvellous work, congratulations everybody involved!

It's time to update your configuration, without much pain!

I've prepared 2 examples:

  • React 15.6.2, Enzyme 3.0.0 and Jest 21.2.1
  • React 16.0.0, Enzyme 3.0.0 and Jest 21.2.1

You don’t need to update to React 16 to use Enzyme 3 and vice-versa. Beautiful, isn’t it?

You can check the repositories here:

How about the main changes?

Glad you asked! Let's see a basic overview about the changes:

  • To better support others "React-like" libraries, Preact/Inferno, we've the new concept of Adapters. They’re pluggable libraries, responsible for handle the rendering of the UI Library you’re using.
  • Officially, Enzyme 3 was released with full support for React 13~16. (FYI, we already have a Preact Adapter).
  • Properties like .node , .renderer and .options , they have been removed from the shallow and mount instances.
  • You can disable the lifecycle globally with disableLifecycleMethods option in your Enzyme configuration.

And many many more goodies! You can check the complete list in the migration guide.

Are you keen to know the new features? Check the free course by Nik Graf. Let’s talk specifically, what have changed for test purpose:

  • Now is required a environment with the new ES6 data structure, Set and Map. You can use core-js or babel-polyfill for it.
  • React also depends on requestAnimationFrame , even in test environments. In my examples, I've used the npm package raf@3.3.2
  • Don't believe me? Good for me, I just git cherry-pick words from this Gist created by Dan 2 months ago.

I can't say much here, I'm a fan of Jest, (*cough*2015*cough*) has always been awesome for me! And now, is MIT!

If you’re still in doubt, I recommend you to check the repositories!

There's almost zero pain migrating to Enzyme 3, "..Airbnb has one of the largest enzyme test suites, coming in at around 30,000 enzyme unit tests. After upgrading enzyme to v3.x in Airbnb’s code base, 99.6% of these tests succeeded.." (from the migration guide).

React 16 introduces a bit of friction, but is worth it!

Already using these new versions? Share with us in the comment! Would be awesome to hear from you, dear reader!

That's all folks, thanks for your time, and see you in the next major version! 👋

Written by

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store