Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Compat] support React@15.5 #876

Merged
merged 21 commits into from
Apr 12, 2017
Merged

Conversation

kentcdodds
Copy link
Contributor

@kentcdodds kentcdodds commented Apr 7, 2017

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

Closes #875

README.md Outdated

```bash
npm i --save-dev react-dom
npm i --save-dev prop-types
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 :-)

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sounds great to me 👍

// 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');
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@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 :-)

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks!

} 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(
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This error message still needs updating.

@kentcdodds
Copy link
Contributor Author

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
Copy link
Member

ljharb commented Apr 8, 2017

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

@bvaughn
Copy link
Contributor

bvaughn commented Apr 8, 2017

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
Copy link
Member

ljharb commented Apr 8, 2017

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
Copy link
Contributor

bvaughn commented Apr 8, 2017

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:

screen shot 2017-04-08 at 9 38 34 am

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'.

package.json Outdated
@@ -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",
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

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

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

@gaearon
Copy link
Contributor

gaearon commented Apr 8, 2017

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
Copy link
Contributor

gaearon commented Apr 8, 2017

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
Copy link
Contributor

bvaughn commented Apr 8, 2017

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
Copy link
Member

ljharb commented Apr 9, 2017

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

@gaearon
Copy link
Contributor

gaearon commented Apr 9, 2017

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
Copy link
Member

ljharb commented Apr 9, 2017

@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
Copy link
Collaborator

nfcampos commented Apr 9, 2017

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

README.md Outdated
the following npm modules installed if they were not already:

```bash
npm i --save-dev react-dom create-react-class
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Most likely yes #876 (comment)

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Contributor

@bvaughn bvaughn Apr 9, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

react-dom create-react-class works?
15.4.2 N/A
15.4.2 15.5+ ×
15.5+ 15.5+

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@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

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

(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?

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@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

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@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
Copy link
Contributor

bvaughn commented Apr 9, 2017 via email

@ljharb
Copy link
Member

ljharb commented Apr 9, 2017

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

@nfcampos
Copy link
Collaborator

nfcampos commented Apr 9, 2017

@ljharb ive pushed a commit testing both react 15 versions

README.md Outdated
the following npm modules installed if they were not already:

```bash
npm i --save-dev react-dom create-react-class
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@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?

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

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

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

batchedUpdates(fn) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

And pass root there?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Addressed below

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, exactly - pass root, or this

src/version.js Outdated
@@ -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';
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ah sorry didn't notice that. then i agree

@plemarquand
Copy link

@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
Copy link
Contributor

gaearon commented Apr 13, 2017

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

@plemarquand
Copy link

@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
Copy link
Contributor

gaearon commented Apr 13, 2017

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
Copy link

travi commented Apr 13, 2017

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
Copy link

@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...

davidctj added a commit to davidctj/jest that referenced this pull request Apr 19, 2017
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.
```
cpojer pushed a commit to jestjs/jest that referenced this pull request Apr 19, 2017
* 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
Copy link

kopax commented Apr 28, 2017

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
Copy link
Contributor Author

kentcdodds commented Apr 28, 2017

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
Copy link

kopax commented Apr 28, 2017

@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
Copy link
Contributor Author

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
Copy link
Contributor

bvaughn commented Apr 28, 2017

@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
Copy link

kopax commented Apr 28, 2017

@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'

skovhus pushed a commit to skovhus/jest that referenced this pull request Apr 29, 2017
* 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
Copy link

I'm getting this error too. React 15.5.

@Ballpin
Copy link

Ballpin commented May 10, 2017

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

Source #875
Check what OscarBarrett wrote in his comment.

ovidiuch added a commit to react-cosmos/react-cosmos that referenced this pull request May 13, 2017
ovidiuch added a commit to react-cosmos/react-cosmos that referenced this pull request May 13, 2017
* 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
Lawton pushed a commit to Lawton/react-testing-example that referenced this pull request May 29, 2017
@donaldpipowitch
Copy link

donaldpipowitch commented Jun 2, 2017

@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
Copy link
Member

ljharb commented Jun 2, 2017

@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
Copy link

Okay, done: #968 👍

@enzymejs enzymejs locked and limited conversation to collaborators Jun 2, 2017
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

Successfully merging this pull request may close these issues.