Which Enzyme adapter works with React 17?
ReactjsUnit TestingEnzymeReactjs Problem Overview
I have a React app, and I want to start writing unit tests with Enzyme. Enzyme's documentation discusses versions of React up to 16.
In src/setupTests.js
I currently have
import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
Enzyme.configure({ adapter: new Adapter() });
But my app uses React version 17.0.1. What enzyme adapter is there for React 17?
Reactjs Solutions
Solution 1 - Reactjs
> What enzyme adapter is there for React 17?
If you have React version 17, you can use this unofficial adapter for React 17 for enzyme.
// src/setupTests.js
import { configure } from 'enzyme';
import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
configure({ adapter: new Adapter() });
See this GitHub issue for more information on the unofficial adapter.
Solution 2 - Reactjs
I tried with unofficial adapter '@wojtekmaj/enzyme-adapter-react-17' and it works fine. Thanks @super Jade.
- clear the npm cache (clearing this may make npm slower, but give it a try).
npm cache verify
and thennpm cache clean --force
- remove your
node_modules
andpackage-lock.json
- update npm dependencies in your
package.json
with"@testing-library/react": "^11.2.5","@wojtekmaj/enzyme-adapter-react-17": "^0.4.1","react": "^17.0.1","react-dom": "^17.0.1",
npm i --legacy-peer-deps
- as @wojtekmaj/enzyme-adapter-react-17 mentioned making a change in the test file.
- import Adapter from
'@wojtekmaj/enzyme-adapter-react-17';
- configure
({ adapter: new Adapter() });
Solution 3 - Reactjs
add this code in setupTests.js file
// jest-dom adds custom jest matchers for asserting on DOM nodes.
// allows you to do things like:
// expect(element).toHaveTextContent(/react/i)
// learn more: https://github.com/testing-library/jest-dom
import '@testing-library/jest-dom';
import Enzyme from 'enzyme';
import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
Enzyme.configure({ adapter: new Adapter() });
Solution 4 - Reactjs
I've tried @wojtekmaj/enzyme-adapter-react-17 for React 17, and it does work just fine.
After using npm install --save-dev @wojtekmaj/enzyme-adapter-react-17
you also need to set up enzyme to use the adapter you want it to use, you do so by adding the top level configure API:
/* src/setupTests.js */
import Enzyme from 'enzyme';
import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
Enzyme.configure({ adapter: new Adapter() });