We are currently using 15.6.1. Bug 1411904 is tracking some of the work to prep for an upgrade to 16, so once that's done we can do the upgrade here.

Because the React team switched to "rollup", which uses treeshaking and all of their production versions are stripped of comments, minimized etc. it took a while to work out how to switch off compression and treeshaking. Also, they have moved TestUtils to it's own module, which means updating the TestUtils path throughout our codebase. This was expected but because Enzyme tests the actual paths to decide which plugins to use we have to update these paths at the same time as upgrading to React 16.

Everything seems to run just fine but we have a lot of failing tests... I am currently testing **everything** and will then disable all the failing tests if that is possible. This way we can work on enabling the tests one by one.

I wish we had an edit button: (In reply to Mike Ratcliffe [:miker] [:mratcliffe] [:mikeratcliffe] from comment #3) > Everything seems to run just fine but we have a lot of failing tests... I am > currently testing **everything** and will then disable all the failing tests > if that is possible. This way we can work on enabling the tests one by one. Decided against this. The main issue at the moment is that we receive the following exception when ac_add_options --enable-debug-js-modules is set in mozconfig.

The latest try run now has only one failing test: https://treeherder.mozilla.org/#/jobs?repo=try&revision=0748f6a7d46e&selectedJob=160430633

Comment on attachment 8946235 [details] Bug 1416824 - Upgrade to React 16 https://reviewboard.mozilla.org/r/216202/#review223848 Only one error on try... time for review!

Comment on attachment 8946235 [details] Bug 1416824 - Upgrade to React 16 https://reviewboard.mozilla.org/r/216202/#review224144 I expect a green try this time.

Comment on attachment 8946235 [details] Bug 1416824 - Upgrade to React 16 https://reviewboard.mozilla.org/r/216204/#review224194 The changes look good to me (I did not checked vendor files, but I trust you). It would be nice to split this in multiple patch: - update of vendors - update of release documents - update of require calls to match the new vendors - fix on TabBar ::: devtools/client/shared/vendor/REACT_UPGRADING.md:55 (Diff revision 3) > + "ocument.createElementNS('http://www.w3.org/1999/xhtml', ") > + ); > + }, > + }, > + // Apply dead code elimination and/or minification. > + false && what is this ?

(In reply to Nicolas Chevobbe [:nchevobbe] from comment #11) > Comment on attachment 8946235 [details] > Bug 1416824 - Upgrade to React 16 > > https://reviewboard.mozilla.org/r/216204/#review224194 > > The changes look good to me (I did not checked vendor files, but I trust > you). > It would be nice to split this in multiple patch: > - update of vendors > - update of release documents > - update of require calls to match the new vendors > - fix on TabBar > We could but then that would create work for no real reason and complicate backing the patch out if it was needed. I think we are better leaving it inside a single patch. > ::: devtools/client/shared/vendor/REACT_UPGRADING.md:55 > (Diff revision 3) > > + "ocument.createElementNS('http://www.w3.org/1999/xhtml', ") > > + ); > > + }, > > + }, > > + // Apply dead code elimination and/or minification. > > + false && > > what is this ? You need to look at the short code sample above that one... you add a transformBundle and change `isProduction &&` to `false &&`.

So the question is should I land it on the current debugger bundle or wait for an update... let me test with the current bundle.

Decided to conform and split the patch as nchevobbe requested.

Comment on attachment 8949067 [details] Bug 1416824 - Patch 1: React 16 Require statements and paths https://reviewboard.mozilla.org/r/218474/#review224256

Comment on attachment 8949068 [details] Bug 1416824 - Patch 2: React 16 Vendor Files https://reviewboard.mozilla.org/r/218476/#review224260

Comment on attachment 8949069 [details] Bug 1416824 - Patch 3: React Upgrade Documentation https://reviewboard.mozilla.org/r/218478/#review224262

Pushed by mratcliffe@mozilla.com: https://hg.mozilla.org/integration/autoland/rev/f52006e2a1dc Patch 1: React 16 Require statements and paths r=nchevobbe https://hg.mozilla.org/integration/autoland/rev/b2aebf1d7ee7 Patch 2: React 16 Vendor Files r=nchevobbe https://hg.mozilla.org/integration/autoland/rev/dc4675fd3257 Patch 3: React Upgrade Documentation r=nchevobbe

Backed out for mochitest chrome failures at devtools/client/shared/components/test/mochitest/test_notification_box_01.html Push that caused the failures: https://treeherder.mozilla.org/#/jobs?repo=autoland&revision=dc4675fd32579a95bebe44f64cd14c3ff51c1e70 Failure log: https://treeherder.mozilla.org/logviewer.html#?job_id=160899005&repo=autoland&lineNumber=5667 Backout: https://hg.mozilla.org/integration/autoland/rev/10e735083a7cf2c337827f9dbebcc3b66bbde643

It turns out that we have some plain mochitests that use TestUtils.renderIntoDocument, which no longer exists in React 16. To fix this I need to: 1. Clone the reactjs Github repo. 2. Work out how to produce the react-test-renderer and react-test-renderer-shallow packages. 3. Apply any customizations that we need to those packages. 4. Make any devtools plain react mochitests work with react-test-renderer-shallow. I will only include the dev versions of these packages as they are only used when running tests and the extra feedback produced by the dev version could be useful in this case.

Also needed to use browserify to create a package we can use.

DAMP push: https://treeherder.mozilla.org/#/jobs?repo=try&revision=64c81fa93a19c9c1bf2035a7f87df57e77bd98bc

Comment on attachment 8949691 [details] Bug 1416824 - Patch 4: Use react-test-renderer-shallow https://reviewboard.mozilla.org/r/219032/#review224808

Pushed by mratcliffe@mozilla.com: https://hg.mozilla.org/integration/autoland/rev/72b2c4d0cfee Patch 1: React 16 Require statements and paths r=nchevobbe https://hg.mozilla.org/integration/autoland/rev/28d4e7ae6ae2 Patch 2: React 16 Vendor Files r=nchevobbe https://hg.mozilla.org/integration/autoland/rev/ef83d0da6f9c Patch 3: React Upgrade Documentation r=nchevobbe https://hg.mozilla.org/integration/autoland/rev/3fb1f0afdc6d Patch 4: Use react-test-renderer-shallow r=nchevobbe

https://hg.mozilla.org/mozilla-central/rev/72b2c4d0cfee https://hg.mozilla.org/mozilla-central/rev/28d4e7ae6ae2 https://hg.mozilla.org/mozilla-central/rev/ef83d0da6f9c https://hg.mozilla.org/mozilla-central/rev/3fb1f0afdc6d

https://hg.mozilla.org/mozilla-central/rev/72b2c4d0cfee https://hg.mozilla.org/mozilla-central/rev/28d4e7ae6ae2 https://hg.mozilla.org/mozilla-central/rev/ef83d0da6f9c https://hg.mozilla.org/mozilla-central/rev/3fb1f0afdc6d