Upgrade to React 16

[jeremyyap]

Reference #2641

It turns out that upgrading to React 16 actually doesn't require much changes. It's mostly the Enzyme tests that break.

To test Material UI dialogs, we now remount the dialog contents in a new wrapper. We might be able to remove this workaround once we upgrade to Material UI v1, since v1 uses React Portals instead of its own implementation for dialogs.

Old:

const dialogInline = eventFormDialog.find('RenderToLayer').first().instance().layerElement;
const eventForm = new ReactWrapper(dialogInline, true).find('form');

New:

const dialogInline = eventFormDialog.find('RenderToLayer').first().instance();
const eventForm = mount(dialogInline.props.render(), contextOptions).find('form');

There are 2 remaining frontend test failures for the shallowUntil test helper. Have disabled them for now.

[kxmbrian]

LGTM. Would be good to upgrade the other packages and clear test warnings next.

What do you guys think if we removed shallowUntil and used (repeated) dives instead in a subsequent PR?

• dive seems to be purposed built for testing HoCs.
• Context passing for our current version of shallowUntil and the gist we originally referenced seem broken for Enzyme 3. One breaking change is that Stateless Functional Components don't have instances in React 16. This was recently documented in [Docs] Update docs around SFC instances in React 16 enzymejs/enzyme#1243 but hasn't been published yet.
• We can wait for the upcoming 'more robust' API mentioned here and here. The first comment also suggests that using chained dives is the current best practice at AirBnB.
• One ugly thing is that we would have to manually pass down the context for dives until shallow-rendering component with getChildContext should work enzymejs/enzyme#664 is fixed.
• If we remove shallowUntil, we will go back to having the original problem we were trying to solve (Improve shallow rendering for use with higher-order components enzymejs/enzyme#539). I'm not sure if this is really a big issue for us at the moment, since we use it in very few tests. An alternative is to have diveTo instead.

[weiqingtoh]

I think we can take the discussion to figure out whether to use shallowUntil, dive, or diveTo to a separate discussion, as there are quite a few complexities wrt Enzyme and React. Will get this merged first, and we create an issue for this?

[weiqingtoh]

Thanks @jeremyyap! 👍