73

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?

Super Jade
  • 5,609
  • 7
  • 39
  • 61

4 Answers4

112

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.

Super Jade
  • 5,609
  • 7
  • 39
  • 61
  • 11
    2022 and still no released adapter for React 17 – Andrew Mar 03 '22 at 15:07
  • 6
    @Andrew Enzyme is in a dying stage, just go for react-testing-library – Pouya Ataei Mar 17 '22 at 23:29
  • @PouyaAtaei: Except that `react-testing-library` is designed to AVOID classical unit testing. It's creator writes: "Tests which [test implementation details] ultimately prevent you from modifying and refactoring the component without changing its tests." I write unit tests IN ORDER TO test implementation details. I change a component by first changing its unit tests (so that they fail) and then making the altered tests pass. That is why TDD exists. – Tom Stambaugh Sep 19 '22 at 13:23
  • 3
    @TomStambaugh you should not test implementation details, that's naive. You should aim to test the behaviour of your component, thus if you correctly abstracted a component and behaviour changes... you can capture it.... testing implementation details outweights the benefits that testing provides, is incredibly fragile, and may not even capture the requirements correctly.. – Pouya Ataei Sep 19 '22 at 22:39
6

I tried with unofficial adapter '@wojtekmaj/enzyme-adapter-react-17' and it works fine. Thanks @super Jade.

  1. clear the npm cache (clearing this may make npm slower, but give it a try).
  • npm cache verify and then npm cache clean --force
  1. remove your
  • node_modules and package-lock.json
  1. 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",
  2. npm i --legacy-peer-deps
  3. 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() });
Lenin
  • 570
  • 16
  • 36
Cyril Prince
  • 81
  • 1
  • 4
5

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() });

enter image description here

Hassan Saeed
  • 6,326
  • 1
  • 39
  • 37
3

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() });
Miguel Jara
  • 311
  • 2
  • 9