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:

facebook/react-native#13469 (comment)
facebook/react-native#13291 (comment)

facebook/react-native#13291 (comment)

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]

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.

[deavial]

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.

[deavial]

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
facebook/react-native#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.