small medium large xlarge

Back to: All Forums  React for Real
29 Sep 2017, 13:11
Ludovico Fischer (4 posts)

While the code samples in the book use React 15, you can use React 16 without major problems. I have gone through all the samples and the applications all run under React 16 without errors or additional warnings. You might see an error message mentioning requestAnimationFrame in the jest command output. This is a known issue with React 16 and Jest, but it does not affect the reliability of the test results.

The biggest changes involve the Enzyme library. Some of the tests we write in Chapter 4 use the Enzyme library. The Enzyme version used in the book is 2.9. If you upgrade to React 16, the tests still pass but print a warning on the console because Enzyme 2.9 does not officially support React 16. Upgrading to Enzyme 3.0 requires you to change how the tests in wordcounter/src/__tests__/WordCounter.test.js.

I’ll explain the shortest way I found to get the tests in the book running under Enzyme 3.0. To make Enzyme less dependent on React internals, Enzyme now requires a different adapter package for every supported React version. To use React 16, you’ll need the React 16 adapter. If you want to migrate to Enzyme 3.0 but keep React 15, follow the same instructions, replacing 16 with 15.

  1. Install enzyme-adapter-react-16: in the wordcounter directory, run npm i enzyme-adapter-react-16
  2. Add an import to WordCounter.test.js: import Adapter from 'enzyme-adapter-react-16';
  3. Tell Enzyme to use the adapter you just imported. Add this line before the test suite (the first describe() call), Enzyme.configure({ adapter: new Adapter() });

Once you’ve completed this set up, you’ll be able to run the tests with Enzyme 3.0, but they will fail because Enzyme won’t register the changes that occur when you simulate typing in the text area. To fix this, you’ll need to tell the root Enzyme wrapper to update. At the end of the test set up code, after textarea.simulate(), add a new line to update the Enzyme wrapper for the WordCounter element: wordCounter.update().

With these changes, I have managed to make the tests that use Enzyme report the correct results once again. The tests that Jest alone and those that use snapshots work without any change.

You must be logged in to comment