Update to React 16, handle React.Fragment better (#5816)

* Add React.Fragment to snapshots in unhandled cases

* Add test

* Upgrade to React 16

* Fix flow

* Convert to class component

examples/enzyme/__tests__/checkbox_with_label.test.js

@@ -3,7 +3,11 @@
 /* eslint-disable no-unused-vars */
 
 import React from 'react';
-import {shallow} from 'enzyme';
+import Enzyme, {shallow} from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+
+Enzyme.configure({adapter: new Adapter()});
+
 import CheckboxWithLabel from '../CheckboxWithLabel';
 
 it('CheckboxWithLabel changes the text after click', () => {

examples/react/__tests__/checkbox_with_label.test.js

@@ -4,7 +4,7 @@
 
 import React from 'react';
 import ReactDOM from 'react-dom';
-import TestUtils from 'react-addons-test-utils';
+import * as TestUtils from 'react-dom/test-utils';
 import CheckboxWithLabel from '../CheckboxWithLabel';
 
 it('CheckboxWithLabel changes the text after click', () => {

examples/typescript/CheckboxWithLabel.tsx

@@ -2,31 +2,33 @@
 
 import * as React from 'react'
 
-interface CheckboxWithLabelProps extends React.Props<any> {
+interface CheckboxWithLabelProps {
   labelOff: string;
   labelOn: string;
 }
 
-var CheckboxWithLabel = React.createClass<CheckboxWithLabelProps, any>( {
-  getInitialState: function() {
-    return {isChecked: false}
-  },
-  onChange: function() {
-    this.setState({isChecked: !this.state.isChecked});
-  },
+interface CheckboxWithLabelState {
+  isChecked: boolean;
+}
+
+class CheckboxWithLabel extends React.Component<CheckboxWithLabelProps, CheckboxWithLabelState> {
+  constructor(props: CheckboxWithLabelProps) {
+    super(props);
+    this.state = {isChecked: false};
+  }
 
-  render: function() {
+  render() {
     return (
       <label>
         <input
           type="checkbox"
           checked={this.state.isChecked}
-          onChange={this.onChange}
+          onChange={() => this.setState(current => ({isChecked: !current.isChecked}))}
         />
         {this.state.isChecked ? this.props.labelOn : this.props.labelOff}
       </label>
     );
   }
-});
+}
 
 export = CheckboxWithLabel;

package.json

@@ -25,7 +25,8 @@
     "codecov": "^3.0.0",
     "cross-spawn": "^6.0.4",
     "debug": "^3.0.1",
-    "enzyme": "^2.8.2",
+    "enzyme": "^3.3.0",
+    "enzyme-adapter-react-16": "^1.1.1",
     "eslint": "~4.13.0",
     "eslint-config-prettier": "^2.9.0",
     "eslint-plugin-babel": "^4.1.1",
@@ -58,10 +59,9 @@
     "prettier": "^1.11.0",
     "prettylint": "^1.0.0",
     "progress": "^2.0.0",
-    "react": "^15.4.2",
-    "react-addons-test-utils": "^15.4.2",
-    "react-dom": "^15.6.1",
-    "react-test-renderer": "^15.4.2",
+    "react": "^16.2.0",
+    "react-dom": "^16.2.0",
+    "react-test-renderer": "^16.2.0",
     "regenerator-runtime": "^0.11.0",
     "resolve": "^1.4.0",
     "rimraf": "^2.6.2",

packages/pretty-format/src/__tests__/react.test.js

@@ -13,6 +13,7 @@ const React = require('react');
 const renderer = require('react-test-renderer');
 
 const elementSymbol = Symbol.for('react.element');
+const fragmentSymbol = Symbol.for('react.fragment');
 const testSymbol = Symbol.for('react.test.json');
 
 const prettyFormat = require('..');
@@ -300,6 +301,32 @@ test('supports undefined element type', () => {
   );
 });
 
+test('supports a fragment with no children', () => {
+  expect(
+    formatElement({$$typeof: elementSymbol, props: {}, type: fragmentSymbol}),
+  ).toEqual('<React.Fragment />');
+});
+
+test('supports a fragment with string child', () => {
+  expect(
+    formatElement({
+      $$typeof: elementSymbol,
+      props: {children: 'test'},
+      type: fragmentSymbol,
+    }),
+  ).toEqual('<React.Fragment>\n  test\n</React.Fragment>');
+});
+
+test('supports a fragment with element child', () => {
+  expect(
+    formatElement({
+      $$typeof: elementSymbol,
+      props: {children: React.createElement('div', null, 'test')},
+      type: fragmentSymbol,
+    }),
+  ).toEqual('<React.Fragment>\n  <div>\n    test\n  </div>\n</React.Fragment>');
+});
+
 test('supports a single element with React elements with a child', () => {
   assertPrintedJSX(
     React.createElement('Mouse', {

packages/pretty-format/src/plugins/react_element.js

@@ -17,6 +17,7 @@ import {
 } from './lib/markup';
 
 const elementSymbol = Symbol.for('react.element');
+const fragmentSymbol = Symbol.for('react.fragment');
 
 // Given element.props.children, or subtree during recursive traversal,
 // return flattened array of children.
@@ -38,6 +39,9 @@ const getType = element => {
   if (typeof element.type === 'function') {
     return element.type.displayName || element.type.name || 'Unknown';
   }
+  if (element.type === fragmentSymbol) {
+    return 'React.Fragment';
+  }
   return 'UNDEFINED';
 };