Common Issues in Migrating from Jest and Enzyme 2.x to 3.x and How to Fix Them

Last year I had a task to migrate our React application from 15.4 to 16.9 (yes, it's about time) and unit tests broke along with a few other outdated packages.

Here are two of the issues I most frequently encountered and solutions on how to fix them (all credit goes to the fine people of the Internet):

1. Enzyme Internal Error: Enzyme expects an adapter to be configured, but found none.

If you are too lazy to read the migration guide written by the folks over at Enzyme, essentially the library now runs in an "Adapter system". You just have to install the adapter for your version of React.

Since our app now runs on React 16.x, I needed to install the enzyme-adapter-react-16 adapter:

npm install enzyme-adapter-react-16

and then configured it to my test:

import { configure } from 'enzyme'
import Adapter from 'enzyme-adapter-react-16'

configure({ adapter: new Adapter() })

/*
* unit test code goes here
*/

2. Cannot find module 'react/lib/ReactTestUtils'
This library is very old, it was deprecated 5 years ago. To fix this, I used the react-test-renderer/shallow renderer in place of ReactTestUtils to shallow render a component.

Install the package:

npm install react-test-renderer

Then, I replaced the renderer with the utility functions from the new library.

OLD CODE

describe('TestComponent:', () => {
  const props = {
    open: false
  }

  beforeEach(function () {
    const renderer = TestUtils.createRenderer() // from this
    renderer.render(<TestComponent {...props} />)
    renderer.getRenderOutput()
  })

  // rest of the code
})

NEW CODE

describe('TestComponent:', () => {
  const props = {
    open: false
  }

  beforeEach(function () {
    const renderer = new ShallowRenderer() //to this
    renderer.render(<TestComponent {...props} />)
    renderer.getRenderOutput()
  })

  // rest of the code
})

Happy coding!