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

gloriamaris

Monique Dingding

Posted on January 9, 2020

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
Enter fullscreen mode Exit fullscreen mode

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
*/
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
})
Enter fullscreen mode Exit fullscreen mode

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
})
Enter fullscreen mode Exit fullscreen mode

Happy coding!

💖 💪 🙅 🚩
gloriamaris
Monique Dingding

Posted on January 9, 2020

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related