[Tests] useContext

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

@@ -1047,6 +1047,7 @@ describeWithDOM('mount', () => {
   describeHooks(
     { Wrap, Wrapper },
     'useCallback',
+    'useContext',
     'useEffect',
     'useLayoutEffect',
     'useMemo',

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

@@ -1228,6 +1228,7 @@ describe('shallow', () => {
   describeHooks(
     { Wrap, Wrapper },
     'useCallback',
+    'useContext',
     'useEffect',
     'useLayoutEffect',
     'useMemo',

packages/enzyme-test-suite/test/shared/hooks/_hook.template

@@ -19,6 +19,7 @@ import {
 
 import {
   useCallback,
+  useContext,
   useEffect,
   useLayoutEffect,
   useMemo,

packages/enzyme-test-suite/test/shared/hooks/useContext.jsx

@@ -0,0 +1,140 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { expect } from 'chai';
+import wrap from 'mocha-wrap';
+import sinon from 'sinon-sandbox';
+import { Portal } from 'react-is';
+
+import { render } from 'enzyme';
+import getAdapter from 'enzyme/build/getAdapter';
+
+import {
+  describeIf,
+  itIf,
+} from '../../_helpers';
+import {
+  is,
+  REACT16,
+} from '../../_helpers/version';
+
+import {
+  useContext,
+  useState,
+  createContext,
+} from '../../_helpers/react-compat';
+
+export default function describeUseContext({
+  hasHooks,
+  Wrap,
+  WrapRendered,
+  Wrapper,
+  WrapperName,
+  isShallow,
+  isMount,
+  makeDOMElement,
+}) {
+  describeIf(hasHooks, 'hooks: useContext', () => {
+    describe('simple example', () => {
+      let TitleContext;
+      beforeEach(() => {
+        TitleContext = createContext();
+      });
+
+      const UiComponent = props => {
+        let title = useContext(TitleContext);
+        return (
+          <div>
+            <b>UiComponent: </b>
+            {title}
+          </div>
+        );
+      };
+
+      const contextTitle = 'CustomTitle';
+
+      const App = () => {
+        return (
+          <TitleContext.Provider value={contextTitle}>
+            <UiComponent />
+          </TitleContext.Provider>
+        );
+      };
+
+      // TODO; useContext seems to not work in the shallow renderer's initial render
+      itIf(!isShallow, 'renders App with TitleContext', () => {
+        const wrapper = Wrap(<App />);
+        wrapper.update();
+        const subWrapper = isShallow ? wrapper.dive().dive() : wrapper;
+        expect(subWrapper.text()).to.equal(`UiComponent: ${contextTitle}`);
+      });
+    });
+
+    // TODO: useContext: enable when shallow dive supports createContext
+    describeIf(!isShallow, 'useContext: with Setting', () => {
+      const initialState = 10;
+      let context;
+      beforeEach(() => {
+        context = createContext(null);
+      });
+
+      const MyGrandChild = () => {
+        const myContextVal = useContext(context);
+
+        const increment = () => {
+          myContextVal.setState(myContextVal.state + 1);
+        };
+
+        return (
+          <div>
+            <button type="button" onClick={increment}>increment</button>
+            <span className="grandChildState">
+              {myContextVal.state}
+            </span>
+          </div>
+        );
+      };
+
+      const MyChild = () => (
+        <div>
+          <MyGrandChild />
+        </div>
+      );
+
+      const App = () => {
+        const [state, setState] = useState(initialState);
+
+        return (
+          <context.Provider value={{ state, setState }}>
+            <div>
+              <MyChild />
+            </div>
+          </context.Provider>
+        );
+      };
+
+      it('test render, get and set context value ', () => {
+        const wrapper = Wrap(<App />);
+
+        function getChild() {
+          const child = wrapper.find(MyChild);
+          return isShallow ? child.dive() : child;
+        }
+        function getGrandChild() {
+          const grandchild = getChild().find(MyGrandChild);
+          return isShallow ? grandchild.dive() : grandchild
+        }
+        expect(getGrandChild().find('.grandChildState').debug()).to.equal(`<span className="grandChildState">
+  ${String(initialState)}
+</span>`
+        );
+
+        getGrandChild().find('button').props().onClick();
+        wrapper.update();
+        expect(getGrandChild().find('.grandChildState').debug()).to.equal(`<span className="grandChildState">
+  ${String(initialState + 1)}
+</span>`
+        );
+      });
+    });
+  });
+}