Enzyme: Support React 16

[JPeer264]

React is currently in v16.0.0-alpha.12, but is it already planned to support it by enzyme? My specific issue currently is #875.

Is it too early to implement it, as it is in alpha?

[stief510]

+1

[ljharb]

Generally we've supported RCs, but not alphas. That seems like the appropriate place to draw the line.

[mleduque]

React native 0.44 (actual release, not alpha/beta/rc) requires react 16 alpha.
How can we use enzyme with react-native 0.44 ?

[MoOx]

I have to admit the situation is a bit special: last 2 stable react-native version use react@16 alpha. Maybe we should reconsider where is "the line".

---

In my case, I am having the following issue:

    TypeError: window.addEventListener is not a function

      at Object.<anonymous> (node_modules/react-dom/lib/ReactDOMFrameScheduling.js:71:10)
      at Object.<anonymous> (node_modules/react-dom/lib/ReactDOMFiber.js:22:31)
      at Object.<anonymous> (node_modules/react-dom/index.js:3:18)

Using this simple code:

import React from 'react';
import { shallow } from 'enzyme';

Note that it's react native component, note sure why addEventListener is used/required somehow.

It seems just importing enzyme create the issue.

[ljharb]

The issue is react-native requiring an alpha version of react. This is a mistake, and the issue should be filed with them.

Either react 16 should be released, or it shouldn't be solely depended upon by libs (libs working with both 15 and 16 are fine, ofc)/

[jlhall]

Relevant info (I hope) for late/newcomers:

https://github.com/facebook/react-native/issues/13469#issuecomment-293666411
https://github.com/facebook/react-native/issues/13291#issuecomment-291583170

https://github.com/facebook/react-native/issues/13291#issuecomment-293665639

RN has said they’re sticking with the alpha through ~0.45/0.46, and Enzyme (as above), won’t support an alpha version. So, in the absence of a change in policy on either side, expect that for at least the next few versions of RN, the incompatibility with this package will remain.

At least until React 16 drops (or a RC, obviously).

The RN CLI currently gives you 0.44 (and therefore the alpha by default) so be aware if you love Enzyme... and try to use it straight off a newly rolled RN project, 2.8.2 and 0.44 are going to yell at you.

But I don't like getting yelled at. I want Enzyme and React Native to play nice right now!?

Ok, if you still want to run this package’s current version (2.8.2) with a RN project, you can downgrade (maybe? sorry if you’re stuck at 0.43+ somehow already, friend) your RN version to 0.42. Then, just fix the accompanying dependencies/peers etc. It should look like something similar to this:

"dependencies": {
    "enzyme": "^2.8.2",
    "prop-types": "^15.5.10",
    "react": "15.4.1",
    "react-native": "0.42.0"
  },
  "devDependencies": {
    "react-dom": "^15.5.4",
    "react-test-renderer": "^15.5.4",
    "babel-jest": "20.0.1",
    "babel-preset-react-native": "1.9.1",
    "jest": "20.0.1",
    "standard": "^10.0.2"
  }

Hopefully this helps anyone with questions about using enzyme with RN 0.44 (nope, get 0.42) and also allows this package’s maintainers to move on from this issue as there has already been a decision on their end. Cheers!

[hdsenevi]

Thanks @jlhall for the suggestion. Including the versions that you mentioned gets rid of the warnings.

I wanted to try something else out so I ended up doing the following

"dependencies": {
    "enzyme": "^2.8.2",
    "prop-types": "^15.5.10",
    "react": "16.0.0-alpha.6",
    "react-native": "0.44.0"
  },
  "devDependencies": {
    "react-dom": "^15.5.4",
    "react-test-renderer": "^15.5.4",
    "babel-jest": "20.0.1",
    "babel-preset-react-native": "1.9.1",
    "jest": "20.0.1",
    "standard": "^10.0.2"
  }

As you can see react is 16.0.0-alpha.6 and react-native is 0.44.0. This works fine. No warnings in tests etc.

My question is, is there any issues with this setup that i'm not immediately seeing?. As in would you not recommend using this setup until enzyme officially supports latest RN and React?

[ljharb]

For something to be "recommended" it usually has to have official support.

If enzyme collaborators were aware of why this setup was either bad or good, then it'd be trivial for us to support it officially :-) The issue is that we don't know - you're treading on uncharted territory.

[hdsenevi]

@ljharb, Understood. Thanks for your quick comment.

[tomitrescak]

Hmm, does 2.8.2 work with react 16? I'm getting "Cannot read property 'getPublicInstance' of undefined​​"

[ljharb]

@tomitrescak no, 16 doesn't exist, only 16 alpha. We don't support alphas.

[tomitrescak]

Ok, I thought so, just got confused with the comment above claiming that 2.8.2 worked fine. Rolling bask to 15.4.3 ;)

[TiraO]

A couple months ago, I selected a downgraded React Native in order to use Enzyme during development. However, I've hit a point where React Native is far enough ahead that I'm running into issues not being able to use various React Native libraries with an outdated React Native version.

I think it's pretty clear that the way the Facebook team has decided to version React Native and React 16 alphas is pretty non-standard, and issues have been filed with React Native on that subject.

@ljharb I understand the position of not supporting alphas, but surely Enzyme should work towards supporting React 16 in anticipation of its release? Is any work being done on that currently?

[ljharb]

@TiraO See #1007 for a rewrite that will potentially enable React 16 alpha support.

[TiraO]

@ljharb Thanks!

[ayleesedai]

@ljharb @TiraO
Sorry in advance for the horrible thing I'm going to write. I know, you all will blame me, just as I'm blaming myself too...
To remove the warning I patched a enzyme file within node-modules folder.
I wrote a little script to patch the file and added a postinstall line to the scripts section of my package.json to run the script.
I hate doing such a thing, but I hate those annoying warnings even more :) And I'd rather prefer not to downgrade.

The fix-enzyme-for-react-16.fix file:

var fs = require('fs');
var theFile = './node_modules/enzyme/build/react-compat.js';
fs.readFile(theFile, 'utf-8', function(err, data){
    if (err) throw err;
    var result = data.replace("TestUtils = require('react-addons-test-utils');", "TestUtils = require('react-dom/test-utils');");
    fs.writeFile(theFile, result, 'utf8', function (err) {
        if (err) return console.log(err);
  });
});

The package.json line:

"scripts": {
    "postinstall": "node fix-enzyme-for-react-16.fix"
}

I know. It's ugly. But it's also temporary. And it seems to work...

[ljharb]

@ayleesedai i'd really prefer we not have something like that on the repo, since it's an incredibly bad idea to modify things inside node_modules. Separately, that's definitely not sufficient to make everything work in React 16 - you'll get a number of surprising subtle bugs.

[ayleesedai]

@ljharb you definitively convinced me. Actually I always thought it was a bad idea, but sometimes the evil developer inside me awakes and makes me think of horrible things. Shame on me.

[guysegal]

react 16 beta was released, is there a plan to support it soon? the claim was that alpha versions are not supported by default, but but version do

[JPeer264]

Refering to this comment, it will possibly be enabled by #1007.

[ljharb]

Certainly a beta version is better than alpha; but generally we only support release candidates, or actual versions.

Either way, it'd have to wait until #1007 is resolved.

[ThaJay]

Would it be smart to release alpha versions of enzyme in the future so alpha versions of dependecies like react can be supported and completion of the next rc / release version can be much faster and easier?

[ljharb]

@ThaJay no, it would be smart for React and React Native not to release anything in the future that requires an alpha version of React.

[m-vdb]

is there at least a PR in development that we can reference in our projects so that we can continue to use enzyme with latest react-native? I had to upgrade to react-native latest version (not really my choice) and now my CI stack is just broken. Tried to play around and use different versions of enzyme dependencies but didn't work at all. It would really help 😄

[ljharb]

@m-vdb nothing official yet. when v3 is released, you can use that.

[m-vdb]

thanks @ljharb . Is there an expected release date for that? Can we help?

[ljharb]

No expected date; hopefully soon. The most help right now is patience :-)

[appelstroop]

I managed to make it work in react 16 + RN 47 by using the recent updates on the master branch.

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

configure({ adapter: new Adapter() })
...

[Baptiste-Garcin]

@appelstroop Great news but please, can you tell me where the enzyme-adaptater-react-16 package comes from ?
Thanks !

[appelstroop]

To be clear, not an official solution. But for those who desperately need enzyme in react-16. Clone the project, npm install && npm run build. Copy the relevant packages in 'packages' to your node_modules.

[Baptiste-Garcin]

Well thanks ! I was expecting something like that.
And you were clear about the unofficial character of this work around :wink:

[duranmla]

Looks like we may want to dive in some unofficial approach but just to be clear @appelstroop what yo did is to clone the enzyme project and then npm install && npm run build take out the enzyme-adapter-react-16 and put it on the root of npm modules?

I am quite surprised there is something called enzyme-adapter-react-16 so I will assume I am wrong with something.

TL;DR

@appelstroop @Baptiste-Garcin can you guys provide a more clear walkthrough what to do in order to use the adapter?

[Baptiste-Garcin]

I try for 2 hours then, I gave up. I am actually downgrading react-native because it seems to me a better way

[duranmla]

Just as update @Baptiste-Garcin I just take what is on the enzyme repo directly to my npm modules, the problem I got by now is:

react-dom is an implicit dependency in order to support [email protected]. Please add the appropriate version to your devDependencies. See https://github.com/airbnb/enzyme#installation

Which I think is discussed before, but still checking what to do. If I solve the issue I think the approach will be to add the npm dependency to pull right from the repo (at least by now)

[ljharb]

Please do not recommend people try out enzyme v3 from git before it's ready; please instead be patient.

[appelstroop]

Sorry @ljharb! Check

[tobob]

Temporary solution that works for me

add to package.json in devDependecies:

    "@npmsoluto/enzyme-react-16": "github:Soluto/enzyme-react-16",

Change imports of enzyme across specs into:

import { shallow } from '@npmsoluto/enzyme-react-16';

my versions of packages:

"react": "16.0.0-alpha.12",
"react-native": "0.46.4",
"react-dom": "16.0.0-beta.5",
"react-test-renderer": "16.0.0-beta.5",
"jest": "20.0.3"
"enzyme-to-json": "1.5.1",

[crismali]

The following worked for me.

In my package.json:

"enzyme": "^2.9.1",
"enzyme-to-json": "^1.5.1",
"jest": "^21.0.1",
"jest-enzyme": "^3.8.2",
"react": "16.0.0-alpha.12",
"react-native": "0.48.1",
"react-dom": "16.0.0-beta.5",
"react-test-renderer": "16.0.0-beta.5",

Then in my jest/setup.js (runs before all of the tests):

import { ShallowWrapper } from 'enzyme'

ShallowWrapper.prototype.instance = function() {
  if (this.root !== this) {
    throw new Error('ShallowWrapper::instance() can only be called on the root')
  }
  return this.renderer._instance ? this.renderer._instance : null
}

(The only difference from the instance method in 2.9.1 is that instead of this.renderer._instance._instance we have this.renderer._instance)

[ljharb]

There's other differences; it's best to stick with react 15 until enzyme v3 comes out.

[victoriafrench]

react is now RC 2 FYI

[ljharb]

Great! It's now precisely zero closer to actually being a thing :-)

Either it's released, or it's not. Candidates don't count, whether they're rc 2 or rc 473.

Enzyme v3 is coming soon, and with it, react 16 support. Be patient.

[victoriafrench]

Sorry I was just posting that because of this reply you had made earlier.

Generally we've supported RCs, but not alphas. That seems like the appropriate place to draw the line.

[ljharb]

Ha, touché :-)

Once enzyme v3 comes out, we'll be able to easily support future RCs, and even alphas and betas. At this point, v2 is never going to support anything past v15.

Soon!

[skovhus]

@ljharb I would like to help with getting enzyme@3 out, but I cannot seem to find any milestone ticket that notes what needs to be done. : )

[ljharb]

There's a label called "v3 blockers"

[ljharb]

v3.0.0 is now released.

[asapzacy]

there's a typo in the docs
npm i --save-dev enzyme enzyme-react-adapter-16 should be npm i --save-dev enzyme enzyme-adapter-react-16

[ljharb]

@asapzacy fixed in #1142

[Fatxx]

Anyone facing ReferenceError: Unknown plugin "transform-replace-object-assign" specified in "/Users/fatxx/Development/scorepad/node_modules/enzyme/.babelrc" at 0, attempted to resolve relative to "/Users/fatxx/Development/scorepad/node_modules/enzyme" after ugrapding to v3?

[skovhus]

@Fatxx I've been getting that a lot recently... As a temporary workaround you can put "postinstall": "rm -f node_modules/enzyme/.babelrc" in your package.json.

Seems to have been fixed in newer version of react-native
https://github.com/facebook/react-native/issues/14530

[nbkhope]

Does any minor version v2 of Enzyme support React 16? I'm upgrading and don't want to do enzyme v3 yet.

[ljharb]

@nbkhope no; enzyme v2 will never support react 16. Migrate to enzyme 3 first; and then upgrade to React 16.

[B4bharat]

Hi @ljharb Does enzyme v3 supports beta version of React 16?
We are presently on the following versions:

• react: 16.0.0-beta.5
• react-native: 0.49.5

[ljharb]

@B4bharat yes, the React 16 adapter should work with that; however, to get it properly working, someone would have to build a react-native adapter.