Update React & Jest (#3611)

* Update to the latest jest version

* Update react dependencies

* Migrate React.PropTypes to PropTypes package

* Add prop-types to the package.json

* Update transition-group import to its new package

* Update jest snapshots

* Exclude node_modules from webpack babel-loader

client/src/components/Button/Button.js

@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React from 'react';
 
 const getClassName = (className, icon) => {
@@ -60,18 +61,18 @@ const Button = ({
 };
 
 Button.propTypes = {
-  href: React.PropTypes.string,
-  className: React.PropTypes.string,
-  icon: React.PropTypes.oneOfType([
-    React.PropTypes.string,
-    React.PropTypes.arrayOf(React.PropTypes.string),
+  href: PropTypes.string,
+  className: PropTypes.string,
+  icon: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.arrayOf(PropTypes.string),
   ]),
-  target: React.PropTypes.string,
-  children: React.PropTypes.node,
-  accessibleLabel: React.PropTypes.string,
-  onClick: React.PropTypes.func,
-  isLoading: React.PropTypes.bool,
-  preventDefault: React.PropTypes.bool,
+  target: PropTypes.string,
+  children: PropTypes.node,
+  accessibleLabel: PropTypes.string,
+  onClick: PropTypes.func,
+  isLoading: PropTypes.bool,
+  preventDefault: PropTypes.bool,
 };
 
 Button.defaultProps = {

client/src/components/Explorer/Explorer.js

@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React from 'react';
 import { connect } from 'react-redux';
 
@@ -28,13 +29,13 @@ const Explorer = ({
 };
 
 Explorer.propTypes = {
-  isVisible: React.PropTypes.bool.isRequired,
-  path: React.PropTypes.array.isRequired,
-  nodes: React.PropTypes.object.isRequired,
+  isVisible: PropTypes.bool.isRequired,
+  path: PropTypes.array.isRequired,
+  nodes: PropTypes.object.isRequired,
 
-  pushPage: React.PropTypes.func.isRequired,
-  popPage: React.PropTypes.func.isRequired,
-  onClose: React.PropTypes.func.isRequired,
+  pushPage: PropTypes.func.isRequired,
+  popPage: PropTypes.func.isRequired,
+  onClose: PropTypes.func.isRequired,
 };
 
 const mapStateToProps = (state) => ({

client/src/components/Explorer/ExplorerHeader.js

@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React from 'react';
 import { ADMIN_URLS, STRINGS } from '../../config/wagtailConfig';
 
@@ -26,12 +27,12 @@ const ExplorerHeader = ({ page, depth, onClick }) => {
 };
 
 ExplorerHeader.propTypes = {
-  page: React.PropTypes.shape({
-    id: React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.number]),
-    title: React.PropTypes.string,
+  page: PropTypes.shape({
+    id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    title: PropTypes.string,
   }).isRequired,
-  depth: React.PropTypes.number.isRequired,
-  onClick: React.PropTypes.func.isRequired,
+  depth: PropTypes.number.isRequired,
+  onClick: PropTypes.func.isRequired,
 };
 
 export default ExplorerHeader;

client/src/components/Explorer/ExplorerItem.js

@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React from 'react';
 
 import { ADMIN_URLS, STRINGS } from '../../config/wagtailConfig';
@@ -46,14 +47,14 @@ const ExplorerItem = ({ item, onClick }) => {
 };
 
 ExplorerItem.propTypes = {
-  item: React.PropTypes.shape({
-    id: React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.number]).isRequired,
-    title: React.PropTypes.string.isRequired,
-    meta: React.PropTypes.shape({
-      status: React.PropTypes.object.isRequired,
+  item: PropTypes.shape({
+    id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+    title: PropTypes.string.isRequired,
+    meta: PropTypes.shape({
+      status: PropTypes.object.isRequired,
     }).isRequired,
   }).isRequired,
-  onClick: React.PropTypes.func.isRequired,
+  onClick: PropTypes.func.isRequired,
 };
 
 export default ExplorerItem;

client/src/components/Explorer/ExplorerPanel.js

@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React from 'react';
 import FocusTrap from 'focus-trap-react';
 
@@ -161,15 +162,15 @@ export default class ExplorerPanel extends React.Component {
 }
 
 ExplorerPanel.propTypes = {
-  nodes: React.PropTypes.object.isRequired,
-  path: React.PropTypes.array,
-  page: React.PropTypes.shape({
-    isFetching: React.PropTypes.bool,
-    children: React.PropTypes.shape({
-      items: React.PropTypes.array,
+  nodes: PropTypes.object.isRequired,
+  path: PropTypes.array,
+  page: PropTypes.shape({
+    isFetching: PropTypes.bool,
+    children: PropTypes.shape({
+      items: PropTypes.array,
     }),
   }),
-  onClose: React.PropTypes.func.isRequired,
-  popPage: React.PropTypes.func.isRequired,
-  pushPage: React.PropTypes.func.isRequired,
+  onClose: PropTypes.func.isRequired,
+  popPage: PropTypes.func.isRequired,
+  pushPage: PropTypes.func.isRequired,
 };

client/src/components/Explorer/ExplorerToggle.js

@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React from 'react';
 import { connect } from 'react-redux';
 
@@ -18,8 +19,8 @@ const ExplorerToggle = ({ children, onToggle }) => (
 );
 
 ExplorerToggle.propTypes = {
-  onToggle: React.PropTypes.func.isRequired,
-  children: React.PropTypes.node.isRequired,
+  onToggle: PropTypes.func.isRequired,
+  children: PropTypes.node.isRequired,
 };
 
 const mapStateToProps = () => ({});

client/src/components/Explorer/PageCount.js

@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React from 'react';
 
 import { ADMIN_URLS, STRINGS } from '../../config/wagtailConfig';
@@ -20,7 +21,7 @@ const PageCount = ({ page }) => {
 };
 
 PageCount.propTypes = {
-  page: React.PropTypes.object.isRequired,
+  page: PropTypes.object.isRequired,
 };
 
 export default PageCount;

client/src/components/Explorer/__snapshots__/Explorer.test.js.snap

@@ -16,6 +16,23 @@ exports[`Explorer renders 1`] = `
       "subscribe": [Function],
     }
   }
+  storeSubscription={
+    Subscription {
+      "listeners": Object {
+        "notify": [Function],
+      },
+      "onStateChange": [Function],
+      "parentSub": undefined,
+      "store": Object {
+        "dispatch": [Function],
+        "getState": [Function],
+        "replaceReducer": [Function],
+        "subscribe": [Function],
+        Symbol(observable): [Function],
+      },
+      "unsubscribe": null,
+    }
+  }
 />
 `;
 
@@ -57,6 +74,23 @@ exports[`Explorer visible 1`] = `
       "subscribe": [Function],
     }
   }
+  storeSubscription={
+    Subscription {
+      "listeners": Object {
+        "notify": [Function],
+      },
+      "onStateChange": [Function],
+      "parentSub": undefined,
+      "store": Object {
+        "dispatch": [Function],
+        "getState": [Function],
+        "replaceReducer": [Function],
+        "subscribe": [Function],
+        Symbol(observable): [Function],
+      },
+      "unsubscribe": null,
+    }
+  }
 />
 `;
 

client/src/components/Explorer/__snapshots__/ExplorerPanel.test.js.snap

@@ -1,7 +1,8 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`ExplorerPanel #isError 1`] = `
-<Component
+<FocusTrap
+  _createFocusTrap={[Function]}
   active={true}
   className="explorer"
   focusTrapOptions={
@@ -67,11 +68,12 @@ exports[`ExplorerPanel #isError 1`] = `
       />
     </div>
   </Transition>
-</Component>
+</FocusTrap>
 `;
 
 exports[`ExplorerPanel #isFetching 1`] = `
-<Component
+<FocusTrap
+  _createFocusTrap={[Function]}
   active={true}
   className="explorer"
   focusTrapOptions={
@@ -127,11 +129,12 @@ exports[`ExplorerPanel #isFetching 1`] = `
       </div>
     </div>
   </Transition>
-</Component>
+</FocusTrap>
 `;
 
 exports[`ExplorerPanel #items 1`] = `
-<Component
+<FocusTrap
+  _createFocusTrap={[Function]}
   active={true}
   className="explorer"
   focusTrapOptions={
@@ -211,11 +214,12 @@ exports[`ExplorerPanel #items 1`] = `
       </div>
     </div>
   </Transition>
-</Component>
+</FocusTrap>
 `;
 
 exports[`ExplorerPanel no children 1`] = `
-<Component
+<FocusTrap
+  _createFocusTrap={[Function]}
   active={true}
   className="explorer"
   focusTrapOptions={
@@ -267,11 +271,12 @@ exports[`ExplorerPanel no children 1`] = `
       </div>
     </div>
   </Transition>
-</Component>
+</FocusTrap>
 `;
 
 exports[`ExplorerPanel renders 1`] = `
-<Component
+<FocusTrap
+  _createFocusTrap={[Function]}
   active={true}
   className="explorer"
   focusTrapOptions={
@@ -321,5 +326,5 @@ exports[`ExplorerPanel renders 1`] = `
       </div>
     </div>
   </Transition>
-</Component>
+</FocusTrap>
 `;

client/src/components/Explorer/__snapshots__/ExplorerToggle.test.js.snap

@@ -3,6 +3,24 @@
 exports[`ExplorerToggle basic 1`] = `
 <ExplorerToggle
   onToggle={[Function]}
+  storeSubscription={
+    Subscription {
+      "listeners": Object {
+        "notify": [Function],
+      },
+      "onStateChange": [Function],
+      "parentSub": undefined,
+      "store": Object {
+        "clearActions": [Function],
+        "dispatch": [Function],
+        "getActions": [Function],
+        "getState": [Function],
+        "replaceReducer": [Function],
+        "subscribe": [Function],
+      },
+      "unsubscribe": null,
+    }
+  }
 >
   <span>
     To infinity and beyond!

client/src/components/Icon/Icon.js

@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React from 'react';
 
 /**
@@ -16,9 +17,9 @@ const Icon = ({ name, className, title }) => (
 );
 
 Icon.propTypes = {
-  name: React.PropTypes.string.isRequired,
-  className: React.PropTypes.string,
-  title: React.PropTypes.string,
+  name: PropTypes.string.isRequired,
+  className: PropTypes.string,
+  title: PropTypes.string,
 };
 
 Icon.defaultProps = {

client/src/components/PublicationStatus/PublicationStatus.js

@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React from 'react';
 
 /**
@@ -10,9 +11,9 @@ const PublicationStatus = ({ status }) => (
 );
 
 PublicationStatus.propTypes = {
-  status: React.PropTypes.shape({
-    live: React.PropTypes.bool.isRequired,
-    status: React.PropTypes.string.isRequired,
+  status: PropTypes.shape({
+    live: PropTypes.bool.isRequired,
+    status: PropTypes.string.isRequired,
   }).isRequired,
 };
 

client/src/components/Transition/Transition.js

@@ -1,6 +1,7 @@
+import PropTypes from 'prop-types';
 import React from 'react';
 
-import CSSTransitionGroup from 'react-addons-css-transition-group';
+import CSSTransitionGroup from 'react-transition-group/CSSTransitionGroup';
 
 const TRANSITION_DURATION = 210;
 
@@ -10,7 +11,7 @@ export const POP = 'pop';
 export const FADE = 'fade';
 
 /**
- * Wrapper arround react-addons-css-transition-group with default values.
+ * Wrapper arround react-transition-group with default values.
  */
 const Transition = ({
   name,
@@ -31,11 +32,11 @@ const Transition = ({
 );
 
 Transition.propTypes = {
-  name: React.PropTypes.oneOf([PUSH, POP, FADE]).isRequired,
-  component: React.PropTypes.string,
-  className: React.PropTypes.string,
-  duration: React.PropTypes.number,
-  children: React.PropTypes.node,
+  name: PropTypes.oneOf([PUSH, POP, FADE]).isRequired,
+  component: PropTypes.string,
+  className: PropTypes.string,
+  duration: PropTypes.number,
+  children: PropTypes.node,
 };
 
 Transition.defaultProps = {

client/src/components/Transition/__snapshots__/Transition.test.js.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Transition basic 1`] = `
-<ReactCSSTransitionGroup
+<CSSTransitionGroup
   className={null}
   component="div"
   transitionAppear={false}

client/webpack/base.config.js

@@ -42,7 +42,8 @@ module.exports = function exports() {
       loaders: [
         {
           test: /\.js$/,
-          loader: 'babel'
+          loader: 'babel',
+          exclude: /node_modules/,
         },
       ]
     },

package.json

@@ -25,14 +25,14 @@
   "devDependencies": {
     "babel-cli": "^6.22.2",
     "babel-core": "^6.22.1",
-    "babel-jest": "^19.0.0",
+    "babel-jest": "^20.0.3",
     "babel-loader": "^6.2.10",
     "babel-plugin-lodash": "^3.2.11",
     "babel-polyfill": "^6.22.0",
     "babel-preset-es2015": "^6.22.0",
-    "babel-preset-react": "^6.22.0",
-    "enzyme": "^2.3.0",
-    "enzyme-to-json": "^1.4.5",
+    "babel-preset-react": "^6.24.1",
+    "enzyme": "^2.8.2",
+    "enzyme-to-json": "^1.5.1",
     "eslint": "^2.9.0",
     "eslint-config-wagtail": "0.1.1",
     "eslint-import-resolver-webpack": "^0.8.1",
@@ -47,22 +47,24 @@
     "gulp-sourcemaps": "~1.5.2",
     "gulp-util": "~2.2.14",
     "imports-loader": "^0.6.5",
-    "jest": "^19.0.0",
+    "jest": "^20.0.4",
     "mustache": "^2.2.1",
     "react-addons-test-utils": "^15.4.2",
+    "react-test-renderer": "^15.5.4",
     "redux-mock-store": "^1.2.2",
     "require-dir": "^0.3.0",
     "webpack": "^1.12.14"
   },
   "dependencies": {
-    "focus-trap-react": "^3.0.2",
+    "focus-trap-react": "^3.0.3",
     "lodash": "^4.17.4",
-    "react": "^15.4.2",
-    "react-addons-css-transition-group": "^15.4.2",
-    "react-dom": "^15.4.2",
-    "react-redux": "^5.0.2",
+    "prop-types": "^15.5.10",
+    "react": "^15.5.4",
+    "react-dom": "^15.5.4",
+    "react-redux": "^5.0.5",
+    "react-transition-group": "^1.1.3",
     "redux": "^3.6.0",
-    "redux-actions": "^1.2.1",
+    "redux-actions": "^2.0.3",
     "redux-thunk": "^2.2.0",
     "whatwg-fetch": "^2.0.2"
   },