[Compat] support React@15.5 #876

kentcdodds · 2017-04-07T23:33:03Z

A few deprecation warnings were added in React 15.5. This supports the new APIs that React recommends.

Closes #875

ljharb · 2017-04-07T23:42:36Z

README.md

+
+```bash
+npm i --save-dev react-dom
+npm i --save-dev prop-types


Does prop-types work with every version of React?

If it does, then let's just depend on it explicitly instead of making it funky. airbnb-prop-types will likely depend on it very soon anyways, and enzyme will be depending on that soon if it doesn't already :-)

Sounds great to me 👍

ljharb · 2017-04-07T23:43:19Z

src/react-compat.js

+  // eslint-disable-next-line import/no-extraneous-dependencies
+  PropTypes = require('prop-types');
+  // eslint-disable-next-line import/no-extraneous-dependencies
+  createClass = require('create-react-class');


does this package work with React versions prior to 15.5? 15.0-15.4, or 14, or 13?

I think so. Maybe we should get @acdlite involved here.

@acdlite fwiw, if both of these packages happened to work down to react 0.13, we could drop a lot of our crappy conditional requires here :-)

create-class should work, but I think the signature for prop-types may have changed recently. I'll check.

aweary · 2017-04-07T23:51:48Z

src/react-compat.js

+    } else {
+      // eslint-disable-next-line import/no-extraneous-dependencies
+      TestUtils = require('react-addons-test-utils');
+    }
  } catch (e) {
    // eslint-disable-next-line no-console
    console.error(


Does this need to be in the try block? The error logged in catch only mentions react-addons-test-utils so it might be confusing if requiring react-dom/test-utils throws for whatever reason.

The error message should be conditional just like the require is, good catch.

This error message still needs updating.

kentcdodds · 2017-04-07T23:56:37Z

I realize this is kinda high priority, but I can't work on it any more. If we need this fixed asap, someone else will have to take it from here. Good luck friends!

ljharb · 2017-04-08T00:11:28Z

I filed facebook/react#9371 to fix the fact that prop-types does not properly specify its dependencies.

bvaughn · 2017-04-08T00:23:53Z

Nice work @kentcdodds !

There's also a small issue with ShallowWrapper which uses react-compat which calls TestUtils.createRenderer. The shallow renderer has also moved to react-test-renderer/shallow in 15.5

ljharb · 2017-04-08T01:45:01Z

note: If a non-collaborator wants to add to this PR, please push some commits up to your fork, and simply paste a link to them here - I'll be happy to cherry-pick them into the PR so we can all get this done together.

bvaughn · 2017-04-08T05:49:20Z

Created a patch (here) with the changes I mentioned above but notice that we seem to still have problems with the new shallow renderer import. 😦 Using TestUtils.createRenderer logs a deprecation warning but otherwise works. Using react-test-renderer/shallow causes 5 tests to fail:

It's getting late here now so I'm going to call it a night. Will look more tomorrow.

Edit: The problems with 'react-test-renderer/shallow' are related to batching. Two instances of ReactDefaultBatchingStrategy are being used. Simulated events (eg "click") use a batching strategy in 'react-dom' but setState calls use one in 'react-test-renderer'.

nfcampos · 2017-04-08T06:13:51Z

package.json

@@ -23,7 +23,7 @@
    "react:clean": "rimraf node_modules/react node_modules/react-dom node_modules/react-addons-test-utils",
    "react:13": "rimraf node_modules/.bin/npm && npm run react:clean && npm i react@0.13 && npm install",
    "react:14": "rimraf node_modules/.bin/npm && npm run react:clean && npm i react@0.14 react-dom@0.14 react-addons-test-utils@0.14 && npm install",
-    "react:15": "rimraf node_modules/.bin/npm && npm run react:clean && npm i react@15 react-dom@15 react-addons-test-utils@15 && npm install",
+    "react:15": "rimraf node_modules/.bin/npm && npm run react:clean && npm i react@15 react-dom@15 react-addons-test-utils@15 prop-types@15 create-react-class@15 && npm install",


shouldn't we be removing react-addons-test-utils from this line?

nfcampos · 2017-04-08T06:15:34Z

src/react-compat.js

@@ -18,6 +18,8 @@ let childrenToArray;
 let renderWithOptions;
 let unmountComponentAtNode;
 let batchedUpdates;
+let PropTypes;
+let createClass;


should we start importing createClass from here in the tests that use it? otherwise we'll have plenty of warnings

yes, all the tests should pull it from here too.

gaearon · 2017-04-08T20:57:19Z

Shallow rendering turns out to be trickier to decouple from ReactDOM than we expected.

We didn’t know that people use shallow() together with Simulate, which Enzyme allows and relies on. In React documentation they are not described together, but it seems like people already rely on this coupling and so any attempts to separate shallow rendering from ReactDOM will break that. Similarly, we didn’t realize people rely on findDOMNode() working with shallow renderer. (It's shallow after all 😉 )

Perhaps we should reverse the course on that one and revisit it in 16.

gaearon · 2017-04-08T21:27:28Z

Never mind my previous comment, I misunderstood how Enzyme works. I was reading ReactWrapper but should have looked at ShallowWrapper. Looks like the issue is fixable.

bvaughn · 2017-04-08T21:47:44Z

A problem was discovered while testing the new shallow renderer but has since been fixed by @gaearon (facebook/react/pull/9382) and will be re-released with a point update shortly.

Consider adding this commit to pull the shallow renderer from the correct place and this commit to accompany Dan's above PR change.

ljharb · 2017-04-09T01:09:40Z

@bvaughn thanks, I've cherry-picked in those two commits!

gaearon · 2017-04-09T03:35:43Z

Please bump react-test-renderer to 15.5.4 and Brian's changes should work. I'll deprecate versions 15.5.x until 15.5.4.

ljharb · 2017-04-09T06:13:16Z

@gaearon the install command installs 15 so it should automatically grab that. I'm rerunning the build now; but it appears there's still some failures.

nfcampos · 2017-04-09T06:15:38Z

shouldn't we start testing both 15.4 and 15.5, if not on CI at least have the command to do it locally?

nfcampos · 2017-04-09T06:16:57Z

README.md

+the following npm modules installed if they were not already:
+
+```bash
+npm i --save-dev react-dom create-react-class


can't we use create-react-class for all versions, like prop-types?

Most likely yes #876 (comment)

There's one subtle difference. If you pair create-react-class with react-dom < 15.5.0 then the callback param of replaceState won't work.

Otherwise I've tested back to 0.14.0 and I think it's okay.

@bvaughn is that because that's a new feature in v15.5, or would that work with React.createClass prior to 15.5?

react-dom create-react-class works?

15.4.2 N/A ✓

15.4.2 15.5+ ×

15.5+ 15.5+ ✓

@nfcampos for the tests can't we just import conditionally create-react-class ourselves? If the main reason for keeping it is for our tests we should restructure it so our testing requirements aren't being leaked to consumers

(its use in ReactWrapperComponent can be replaced with an ES6 class easily)

I've submitted a PR for that. #877
It doesn't depend on this PR, but can I change the target branch to here?

@aweary if we want to keep running our tests from 0.13 to 15.5 with createClass components we could create something like the react-compat file just for the tests and import createClass from there. makes sense?
cc @ljharb

That seems better - making a test/react-compat file that handles createClass, and we can import that for tests, and add create-react-class as a dev dependency.

@ljharb i've done that in my latest commit (also removed changes to src/ReactWrapperComponent.jsx now that that's being done in #877)

bvaughn · 2017-04-09T06:17:34Z

Script should probably be updated to test both 15.4.2 and 15.5+ yeah.

ljharb · 2017-04-09T06:18:21Z

Let's definitely both 15.4 and 15.5 on CI; local testing that's not enforced by CI is useless :-)

nfcampos · 2017-04-09T06:42:37Z

@ljharb ive pushed a commit testing both react 15 versions

ljharb · 2017-04-09T06:48:33Z

README.md

+the following npm modules installed if they were not already:
+
+```bash
+npm i --save-dev react-dom create-react-class


@bvaughn thanks; if that's the case, then we shouldn't use create-react-class at all prior to react 15.5 :-/

Is this a bug we could file on the create-react-class repo and get fixed?

ljharb · 2017-04-09T06:49:23Z

src/ShallowWrapper.js

+  batchedUpdates(fn) {
+    const renderer = this.root.renderer;
+    if (renderer.unstable_batchedUpdates) {
+      // React 15.5+ exposes batching on shallow renderer itself


should this use REACT155 (or other version constants) so that it's only checked there?

ljharb · 2017-04-09T06:50:07Z

src/ShallowWrapper.js

@@ -142,6 +142,16 @@ class ShallowWrapper {
    this.complexSelector = new ComplexSelector(buildPredicate, findWhereUnwrapped, childrenOfNode);
  }

+  batchedUpdates(fn) {


instead of exposing another prototype method, what do you think about using a standalone function?

And pass root there?

Addressed below

Yes, exactly - pass root, or this

ljharb · 2017-04-09T06:51:37Z

src/version.js

@@ -4,3 +4,4 @@ export const VERSION = React.version;
 export const REACT013 = VERSION.slice(0, 4) === '0.13';
 export const REACT014 = VERSION.slice(0, 4) === '0.14';
 export const REACT15 = VERSION.slice(0, 3) === '15.';
+export const REACT155 = VERSION.slice(0, 4) === '15.5';


maybe = REACT15 && VERSION.slice(3, 5) === '5.'; would be more accurate? I don't want this matching 15.50 one day ;-)

well wouldn't your suggestion match 16.5.0 which is more likely than 15.50? ;)

no, REACT15 && ensures it starts with 15..

ah sorry didn't notice that. then i agree

plemarquand · 2017-04-13T17:28:59Z

@gaearon Enzyme tests are frequently run in Node, thats where I have trouble getting the stack and have to fallback to hacks like @jwalton suggested.

gaearon · 2017-04-13T17:42:33Z

@plemarquand I understand—just saying that it might be easier to find deprecation sites while working on the app than from running tests.

plemarquand · 2017-04-13T17:49:00Z

@gaearon In the case of this patch/issue a lot of people like myself fixed all the deprecations inside their running app, but were still getting them when running their tests because enzyme (and/or other testing libraries) were/are emitting them.

gaearon · 2017-04-13T17:50:29Z

Oh I see. To be honest I’m a little surprised third party components have already updated. Are you using very little of them?

travi · 2017-04-13T17:53:03Z

as mentioned above, getting these to throw and show the full stack trace when running tests is to cause console.error to throw:

console.error = warning => { throw new Error(warning); };

i set this up in any test framework that i use and the framework will typically catch the thrown error the same way that it would an assertion error, causing a failure and showing the full stack trace

plemarquand · 2017-04-13T17:58:38Z

@gaearon Yeah I only ran in to it with enzyme, and only for a day before this patch was merged. Most if not all of the major libraries have updated by now. Serves me right for being on the bleeding edge, typically I like to wait a week or two before upgrading but it was a slow day at work...

Enzyme recently made a fix for console warning if we use React v15.5+ , See issue here: enzymejs/enzyme#876 To fix that, we have to install react-test-render instead of react-addons-test-utils Warning: ``` console.error node_modules/fbjs/lib/warning.js:36 Warning: ReactTestUtils has been moved to react-dom/test-utils. Update references to remove this warning. console.error node_modules/fbjs/lib/warning.js:36 Warning: Shallow renderer has been moved to react-test-renderer/shallow. Update references to remove this warning. ```

* install react-test-render for removing enzyme warning Enzyme recently made a fix for console warning if we use React v15.5+ , See issue here: enzymejs/enzyme#876 To fix that, we have to install react-test-render instead of react-addons-test-utils Warning: ``` console.error node_modules/fbjs/lib/warning.js:36 Warning: ReactTestUtils has been moved to react-dom/test-utils. Update references to remove this warning. console.error node_modules/fbjs/lib/warning.js:36 Warning: Shallow renderer has been moved to react-test-renderer/shallow. Update references to remove this warning. ``` * Update TutorialReact.md

kopax · 2017-04-28T21:04:46Z

Is this merged in enzyme v2.8.2 ? I still get some warnings :


console.error node_modules/fbjs/lib/warning.js:36
  Warning: Accessing PropTypes via the main React package is deprecated. Use the prop-types package from npm instead.
console.error node_modules/fbjs/lib/warning.js:36
  Warning: ReactTestUtils has been moved to react-dom/test-utils. Update references to remove this warning.

kentcdodds · 2017-04-28T21:26:44Z

Hi @kopax,
Like other comments above, this is likely coming from some other package you're using.

enzyme folks, it may not be a bad idea to add a final comment explaining this and locking this PR. In any case, I'll just unsubscribe from updates.

kopax · 2017-04-28T21:34:01Z

@kentcdodds do you have an idea on how I could trace this error ? I am trying to find which library is creating this warning. I am not using a lot but all the maintainers says they have corrected it. Would be just nice to know how to produce a more verbose message. I have tried to set "jest":{ "verbose": true } in my package.json but it did not change.

kentcdodds · 2017-04-28T21:37:49Z

I would try going to where that warning log is (node_modules/fbjs/lib/warning.js:36) and add a console.log(new Error('here I am')) which will give you a stacktrace (which you'll normally have in the browser). Good luck.

bvaughn · 2017-04-28T21:42:48Z

@kopax You could add something like this to the header of your test:

const decorated = console.error;
console.error = message => decorated(new Error(message).stack);

kopax · 2017-04-28T21:54:45Z

@kentcdodds, @bvaughn

console.log node_modules/fbjs/lib/warning.js:36
  Error: here I am
      at printWarning (/workspace/module.kopaxgroup.com/styled-components/bootstrap-styled/node_modules/fbjs/lib/warning.js:36:21)
       ...
      at Object.<anonymous> (/workspace/module.kopaxgroup.com/styled-components/bootstrap-styled/src/components/Modal/tests/Fade.test.js:6:15)
      ...

Where the line 6:15 of that file is import { mount } from 'enzyme';

I have checked for all of my errors and it all comes from lines where I do import { shallow, mount } from 'enzyme';

In my package.json, I am using enzyme v2.8.2. Why do I still have this error if it's corrected?

Looking at this merge, I should not need react-addons-test-utils anymore ?

Apparently I still need it and if I remove it I have real error coming from my tests.

    Cannot find module 'react-addons-test-utils' from 'react-compat.js'

* install react-test-render for removing enzyme warning Enzyme recently made a fix for console warning if we use React v15.5+ , See issue here: enzymejs/enzyme#876 To fix that, we have to install react-test-render instead of react-addons-test-utils Warning: ``` console.error node_modules/fbjs/lib/warning.js:36 Warning: ReactTestUtils has been moved to react-dom/test-utils. Update references to remove this warning. console.error node_modules/fbjs/lib/warning.js:36 Warning: Shallow renderer has been moved to react-test-renderer/shallow. Update references to remove this warning. ``` * Update TutorialReact.md

peterheard01 · 2017-05-09T09:10:17Z

I'm getting this error too. React 15.5.

Ballpin · 2017-05-10T08:57:09Z

@peterheard01 For me it was resolved by adding react-test-renderer as a dependency.

Source #875
Check what OscarBarrett wrote in his comment.

enzymejs/enzyme#876

* Upgrade XO * Upgrade style-loader and yargs * Upgrade eslint-config-xo-react * Upgrade jest and eslint-plugin-react * Bulk dep upgrade * Bulk package dep upgrade * Fix omit call for lodash@4 * Fix resolveFrom call * Fix loaderUtils usage * Migrate to prop-types and create-react-class packages Closes #338 * Add react-test-renderer dep enzymejs/enzyme#876 * Remove react/react-dom peerDependencies There are two cases of extraneous-dependencies imported: - react/react-dom, which is expected to be present in the user’s codebase - enzyme and other test utils used inside packages, which rely on the root node_modules * Use yarn command consistently throughout docs

… React 15.5 see enzymejs/enzyme#876

donaldpipowitch · 2017-06-02T08:19:21Z

@kopax @kentcdodds @bvaughn

Could it be that the Shallow renderer has been moved to react-test-renderer/shallow. warning is still shown in certain webpack based projects?

@kopax says he gets an error like Cannot find module 'react-addons-test-utils' from 'react-compat.js'. I get something similar Can't resolve 'react-addons-test-utils' in 'build/react-compat.js'.

I think it comes from this try/catch-block. It looks like requireing react-dom/test-utils and/or react-test-renderer/shallow fail while bundling (or: they are bundled at build time and something fails inside this try/catch at runtime), so it tries to get react-addons-test-utils. Or does webpack try to bundled things inside a catch by default?

Because I have installed react-dom and react-test-renderer.

ljharb · 2017-06-02T08:23:10Z

@donaldpipowitch please file a new issue; this one's pretty long already and posting here pings a lot of people. It's certainly possible tho that webpack detects the requires and bundles them up anyways; you need to configure webpack to ignore all the dynamically required things in enzyme. It should all be in the docs.

donaldpipowitch · 2017-06-02T08:27:26Z

Okay, done: #968 👍

kentcdodds mentioned this pull request Apr 7, 2017

Support react-dom/test-utils #875

Closed

ljharb reviewed Apr 7, 2017

View reviewed changes

ljharb added the semver: patch label Apr 7, 2017

aweary reviewed Apr 7, 2017

View reviewed changes

kentcdodds mentioned this pull request Apr 8, 2017

fix(react): add react-compat to deal with the warnings paypal/glamorous#32

Merged

nfcampos requested changes Apr 8, 2017

View reviewed changes

birkir mentioned this pull request Apr 8, 2017

Prepare React 15.5 ctrlplusb/react-universally#413

Merged

7 tasks

thymikee mentioned this pull request Apr 8, 2017

Deprication Warnings from spec files? with react 15.5 jestjs/jest#3270

Closed

gaearon mentioned this pull request Apr 8, 2017

Expose batchedUpdates on shallow renderer facebook/react#9382

Merged

gaearon mentioned this pull request Apr 8, 2017

15.5 addon bugs facebook/react#9384

Closed

10 tasks

ljharb force-pushed the pr/support-15.5 branch from 7c030cb to 098623c Compare April 9, 2017 01:09

ljharb force-pushed the pr/support-15.5 branch from fe21976 to ac73ce8 Compare April 9, 2017 01:18

Timer mentioned this pull request Apr 9, 2017

Unexpected warnings generated during npm test when using enzyme. facebook/create-react-app#1951

Closed

nfcampos reviewed Apr 9, 2017

View reviewed changes

ljharb reviewed Apr 9, 2017

View reviewed changes

jwalton mentioned this pull request Apr 13, 2017

Make enzyme work for react ^15.4.x. #896

Merged

andykog mentioned this pull request Apr 14, 2017

add react-test-renderer as a devDependency to fix broken tests mobxjs/mobx-react#243

Merged

davidctj mentioned this pull request Apr 19, 2017

install react-test-render to fix Enzyme console warning jestjs/jest#3323

Merged

jpoo90 mentioned this pull request Apr 24, 2017

terminal console warning: updated reference to ReactTestUtils to be react-dom/test-utils thescientist13/github-dashboard#151

Closed

ghost mentioned this pull request May 1, 2017

Migrate to React 15.5 brijeshb42/medium-draft#73

Merged

EvanBoyle mentioned this pull request May 4, 2017

Evboyle/testing setup react testing with jest Yahnoosh/AzSearch.js#21

Merged

ovidiuch added a commit to react-cosmos/react-cosmos that referenced this pull request May 13, 2017

Add react-test-renderer dep

5787a2b

enzymejs/enzyme#876

Lawton pushed a commit to Lawton/react-testing-example that referenced this pull request May 29, 2017

update dependencies to fix depracation warning coming from enzyme and…

d76a1cb

… React 15.5 see enzymejs/enzyme#876

enzymejs locked and limited conversation to collaborators Jun 2, 2017

[Compat] support React@15.5 #876

[Compat] support React@15.5 #876

Conversation

kentcdodds commented Apr 7, 2017 • edited by ljharb Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kentcdodds commented Apr 7, 2017

ljharb commented Apr 8, 2017

bvaughn commented Apr 8, 2017

ljharb commented Apr 8, 2017

bvaughn commented Apr 8, 2017 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

gaearon commented Apr 8, 2017 • edited Loading

gaearon commented Apr 8, 2017

bvaughn commented Apr 8, 2017

ljharb commented Apr 9, 2017

gaearon commented Apr 9, 2017

ljharb commented Apr 9, 2017

nfcampos commented Apr 9, 2017

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

bvaughn Apr 9, 2017 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

bvaughn commented Apr 9, 2017 via email

ljharb commented Apr 9, 2017

nfcampos commented Apr 9, 2017

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

plemarquand commented Apr 13, 2017

gaearon commented Apr 13, 2017

plemarquand commented Apr 13, 2017

gaearon commented Apr 13, 2017

travi commented Apr 13, 2017

plemarquand commented Apr 13, 2017

kopax commented Apr 28, 2017

kentcdodds commented Apr 28, 2017 • edited Loading

kopax commented Apr 28, 2017

kentcdodds commented Apr 28, 2017

bvaughn commented Apr 28, 2017 • edited Loading

kopax commented Apr 28, 2017 • edited Loading

peterheard01 commented May 9, 2017

Ballpin commented May 10, 2017 • edited Loading

donaldpipowitch commented Jun 2, 2017 • edited Loading

ljharb commented Jun 2, 2017

donaldpipowitch commented Jun 2, 2017

kentcdodds commented Apr 7, 2017 •

edited by ljharb

Loading

bvaughn commented Apr 8, 2017 •

edited

Loading

gaearon commented Apr 8, 2017 •

edited

Loading

bvaughn Apr 9, 2017 •

edited

Loading

kentcdodds commented Apr 28, 2017 •

edited

Loading

bvaughn commented Apr 28, 2017 •

edited

Loading

kopax commented Apr 28, 2017 •

edited

Loading

Ballpin commented May 10, 2017 •

edited

Loading

donaldpipowitch commented Jun 2, 2017 •

edited

Loading