Update to React 16, handle React.Fragment better

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

@@ -1,13 +1,14 @@
 /// <reference path="./typings/react/react.d.ts" />
 
 import * as React from 'react'
+import * as createReactClass from 'create-react-class';
 
 interface CheckboxWithLabelProps extends React.Props<any> {
   labelOff: string;
   labelOn: string;
 }
 
-var CheckboxWithLabel = React.createClass<CheckboxWithLabelProps, any>( {
+var CheckboxWithLabel = createReactClass<CheckboxWithLabelProps, any>( {
   getInitialState: function() {
     return {isChecked: false}
   },

package.json

@@ -23,9 +23,11 @@
     "browserify": "^16.1.0",
     "chalk": "^2.0.1",
     "codecov": "^3.0.0",
+    "create-react-class": "^15.6.3",
     "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 +60,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';
 };