small medium large xlarge

Back to: All Forums  React for Real
12 Nov 2017, 16:47
Ludovico Fischer (9 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. Import Enzyme into WordCounter.test.js by adding this line to the top of the file: import Enzyme from 'enzyme';
  3. Import the adapter into WordCounter.test.js by adding this line to the top of the file: import Adapter from 'enzyme-adapter-react-16';
  4. 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.

12 Nov 2017, 04:42
Jonathan Kinney (1 post)

I had to do the following to get the enzyme adapter to fully work:

import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

Enzyme.configure({ adapter: new Adapter() });

Otherwise I was getting “Enzyme is not defined”.

In the context of setting up WordCounter.text.js it looks like this:

import React from 'react';
import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import { shallow } from 'enzyme';
import WordCounter from '../wordCounter';
import countWords from '../countWords';
import Counter from '../counter';
import Editor from '../editor';
import ProgressBar from '../progressBar';

Enzyme.configure({ adapter: new Adapter() });

describe('When I type some words', () => {
  const target = 10;
  const inputString = 'One two three four';
  const wordCounter = shallow(<WordCounter targetWordCount={target} />);
  const textarea = wordCounter.find(Editor).dive().find('textarea');

  textarea.simulate('change', { target: { value: inputString } });


  it('displays the correct count as a number', () => {
    const counter = wordCounter.find(Counter);
12 Nov 2017, 16:43
Ludovico Fischer (9 posts)

True, I should also have specified that you need to import Enzyme. Thanks for the precision!

23 Nov 2017, 02:09
Stanford Guillory (2 posts)

This fix (updating the wordCounter) was exactly what I came here looking for. Thanks. Love the book.

You must be logged in to comment