Common Issues in Migrating from Jest and Enzyme 2.x to 3.x and How to Fix Them
Monique Dingding
Posted on January 9, 2020
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!
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
January 9, 2020