Add support for react context element types, fixes #1509

packages/enzyme-adapter-react-16/package.json

@@ -40,12 +40,12 @@
     "object.values": "^1.0.4",
     "prop-types": "^15.6.0",
     "react-reconciler": "^0.7.0",
-    "react-test-renderer": "^16.0.0-0"
+    "react-test-renderer": "^16.0.0-0  || ^16.3.0-0"
   },
   "peerDependencies": {
     "enzyme": "^3.0.0",
-    "react": "^16.0.0-0",
-    "react-dom": "^16.0.0-0"
+    "react": "^16.0.0-0 || ^16.3.0-0",
+    "react-dom": "^16.0.0-0 || ^16.3.0-0"
   },
   "devDependencies": {
     "babel-cli": "^6.26.0",

packages/enzyme-adapter-react-16/src/ReactSixteenAdapter.js

@@ -29,6 +29,9 @@ const FunctionalComponent = 1;
 const HostPortal = 4;
 const HostComponent = 5;
 const HostText = 6;
+const Mode = 11;
+const ContextConsumer = 12;
+const ContextProvider = 13;
 
 function nodeAndSiblingsArray(nodeWithSibling) {
   const array = [];
@@ -82,8 +85,6 @@ function toTree(vnode) {
         instance: node.stateNode,
         rendered: childrenToTree(node.child),
       };
-    case Fragment: // 10
-      return childrenToTree(node.child);
     case FunctionalComponent: // 1
       return {
         nodeType: 'function',
@@ -111,6 +112,11 @@ function toTree(vnode) {
     }
     case HostText: // 6
       return node.memoizedProps;
+    case Fragment: // 10
+    case Mode: // 11
+    case ContextProvider: // 13
+    case ContextConsumer: // 12
+      return childrenToTree(node.child);
     default:
       throw new Error(`Enzyme Internal Error: unknown node with tag ${node.tag}`);
   }

packages/enzyme-test-suite/package.json

@@ -49,4 +49,4 @@
     "eslint-plugin-jsx-a11y": "^6.0.3",
     "eslint-plugin-react": "^7.6.1"
   }
-}
+}

packages/enzyme-test-suite/test/ReactWrapper-spec.jsx

@@ -11,15 +11,15 @@ import {
 import { ITERATOR_SYMBOL, sym } from 'enzyme/build/Utils';
 
 import './_helpers/setupAdapters';
-import { createClass, createPortal } from './_helpers/react-compat';
+import { createClass, createContext, createPortal } from './_helpers/react-compat';
 import {
   describeWithDOM,
   describeIf,
   itIf,
   itWithData,
   generateEmptyRenderData,
 } from './_helpers';
-import { REACT013, REACT014, REACT16, is } from './_helpers/version';
+import { REACT013, REACT014, REACT16, REACT163, is } from './_helpers/version';
 
 const getElementPropSelector = prop => x => x.props[prop];
 const getWrapperPropSelector = prop => x => x.prop(prop);
@@ -165,6 +165,22 @@ describeWithDOM('mount', () => {
       expect(wrapper.context('name')).to.equal(context.name);
     });
 
+    itIf(REACT163, 'should find elements through Context elements', () => {
+      const { Provider, Consumer } = createContext('');
+
+      class Foo extends React.Component {
+        render() {
+          return (
+            <Consumer>{value => <span>{value}</span>}</Consumer>
+          );
+        }
+      }
+
+      const wrapper = mount(<Provider value="foo"><div><Foo /></div></Provider>);
+
+      expect(wrapper.find('span').text()).to.equal('foo');
+    });
+
     describeIf(!REACT013, 'stateless components', () => {
       it('can pass in context', () => {
         const SimpleComponent = (props, context) => (

packages/enzyme-test-suite/test/ShallowWrapper-spec.jsx

@@ -6,9 +6,9 @@ import { shallow, render, ShallowWrapper, mount } from 'enzyme';
 import { ITERATOR_SYMBOL, withSetStateAllowed, sym } from 'enzyme/build/Utils';
 
 import './_helpers/setupAdapters';
-import { createClass } from './_helpers/react-compat';
+import { createClass, createContext } from './_helpers/react-compat';
 import { describeIf, itIf, itWithData, generateEmptyRenderData } from './_helpers';
-import { REACT013, REACT014, REACT15, REACT150_4, REACT16, is } from './_helpers/version';
+import { REACT013, REACT014, REACT15, REACT150_4, REACT16, REACT163, is } from './_helpers/version';
 
 // The shallow renderer in react 16 does not yet support batched updates. When it does,
 // we should be able to go un-skip all of the tests that are skipped with this flag.
@@ -96,6 +96,32 @@ describe('shallow', () => {
       expect(wrapper.context('name')).to.equal(context.name);
     });
 
+    itIf(REACT163, 'should find elements through Context elements', () => {
+      const { Provider, Consumer } = createContext('');
+
+      class Consumes extends React.Component {
+        render() {
+          return (
+            <span>
+              <Consumer>{value => <span>{value}</span>}</Consumer>
+            </span>
+          );
+        }
+      }
+
+      class Provides extends React.Component {
+        render() {
+          return (
+            <Provider value="foo"><div><Consumes /></div></Provider>
+          );
+        }
+      }
+
+      expect(shallow(<Consumes />).find('span')).to.have.length(1);
+      expect(shallow(<Provides />).find(Consumes)).to.have.length(1);
+
+    });
+
     describeIf(!REACT013, 'stateless function components', () => {
       it('can pass in context', () => {
         const SimpleComponent = (props, context) => (

packages/enzyme-test-suite/test/_helpers/react-compat.js

@@ -9,8 +9,9 @@ import { is } from './version';
 let createClass;
 let renderToString;
 let createPortal;
+let createContext;
 
-if (is('>=15.5 || ^16.0.0-alpha')) {
+if (is('>=15.5 || ^16.0.0-alpha || ^16.3.0-alpha')) {
   // eslint-disable-next-line import/no-extraneous-dependencies
   createClass = require('create-react-class');
 } else {
@@ -24,14 +25,21 @@ if (is('^0.13.0')) {
   ({ renderToString } = require('react-dom/server'));
 }
 
-if (is('^16.0.0-alpha')) {
+if (is('^16.0.0-alpha || ^16.3.0-alpha')) {
   ({ createPortal } = require('react-dom'));
 } else {
   createPortal = null;
 }
 
+if (is('^16.3.0-0')) {
+  ({ createContext } = require('react'));
+} else {
+  createContext = null;
+}
+
 export {
   createClass,
   renderToString,
   createPortal,
+  createContext,
 };

packages/enzyme-test-suite/test/_helpers/version.js

@@ -11,6 +11,7 @@ export const REACT15 = major === '15';
 export const REACT150_4 = REACT15 && minor < 5;
 export const REACT155 = REACT15 && minor >= 5;
 export const REACT16 = major === '16';
+export const REACT163 = REACT16 && minor >= 3;
 
 export function gt(v) { return semver.gt(VERSION, v); }
 export function lt(v) { return semver.lt(VERSION, v); }