title: Enzyme/Jest Context API Injection (React) Not Working
body: <p>So I want to test a component that uses React's context api and it's not working. It should be seemingly pretty simple - as stated here (<a href="https://stackoverflow.com/questions/36143925/react-js-how-to-mock-context-when-testing-component">React js - How to mock Context when testing component</a>) all you would have to do is something like this: </p>
  
  <pre><code>const context = { name: 'foo' };
  const wrapper = mount(&lt;SimpleComponent /&gt;, { context });
  </code></pre>
  
  <p>However, I have something very similar and it doesn't seem to be picking up on it.</p>
  
  <p>Here is my test file - </p>
  
  <pre><code>import * as React from 'react'
  import Enzyme, { shallow, mount } from "enzyme";
  import Home from '../pages/home/index'
  import Adapter from "enzyme-adapter-react-16";
  
  import stateVals from '../__mocks__/stateVals';
  
  console.log('value of stateVals: ', stateVals)
  
  describe('Pages', () =&gt; {
    describe('Index', () =&gt; {
      it('should render without throwing an error', function () {
        const wrap = mount(&lt;Home/&gt;, { stateData: { state: stateVals } })
        expect(wrap.find('div').text()).toBe('hello there main home')
      })
    })  
  })
  </code></pre>
  
  <p>Here is my stateVals object I import: </p>
  
  <pre><code>const stateVals = {
    ContextNext: "ldjkfs",
    route: "/home",
    styledcomponent: "sfsdfsdfsdf",
    name: "dfasfasfasdf", 
    renderCloseAbout: false,
    aboutCardStatus: "closed",
    uploadedHistory: null, 
    greptchaTime: Date.now(), 
    loginStatus: "initial",
    registrationStatus: "N/A",
    userEmail: "N/A",
    completeRegistration: {}, 
    pageVal: "", 
    addPurchaseSubsJSON: ["empty"], 
    admins: ['SUPERDOOPERSECRET'],
    modal: {
      open: false, 
      message: ''
    }
  }
  export default stateVals
  </code></pre>
  
  <p>And here is the beginning of the component I want to test - </p>
  
  <pre><code>class Home extends Component {
  
    render(){
      return(
        &lt;MainContext.Consumer&gt;
        {stateData =&gt; {
          return(
            &lt;div className='grid-container abspos'&gt;
              {renderIf(stateData.state.modal.open==true)(
                &lt;Modal/&gt;
              )}
  </code></pre>
  
  <p>It throws this error: </p>
  
  <pre><code>TypeError: Cannot read property 'state' of undefined
  
    26 |         return(
    27 |           &lt;div className='grid-container abspos'&gt;
  &gt; 28 |             {renderIf(stateData.state.modal.open==true)(
       |                                 ^
    29 |               &lt;Modal/&gt;
    30 |             )}
  </code></pre>
  
  <p>Why is this happening?</p>
  
  <p>EDIT: </p>
  
  <p>This also doesn't work: </p>
  
  <pre><code>import * as React from 'react'
  import Enzyme, { shallow, mount } from "enzyme";
  import Home from '../pages/home/index'
  import Adapter from "enzyme-adapter-react-16";
  
  import stateVals from '../__mocks__/stateVals';
  
  console.log('value of stateVals: ', stateVals)
  let context = {state: stateVals }
  console.log('value of context: ', context)
  
  describe('Pages', () =&gt; {
    describe('Index', () =&gt; {
      it('should render without throwing an error', function () {
        const wrap = mount(&lt;Home/&gt;,  context )
        expect(wrap.find('div').text()).toBe('hello there main home')
      })
    })  
  })
  </code></pre>
  
  <p>Nor this; </p>
  
  <pre><code>  const wrap = mount(&lt;Home/&gt;,   {context: stateVals})
  </code></pre>
  
  <p>Nor using this: </p>
  
  <pre><code>  const wrap = mount(&lt;Home/&gt;,  {context: {stateData: stateVals}})
  </code></pre>
  
  <p>Nor this:</p>
  
  <pre><code>  const wrap = mount(&lt;Home/&gt;,  {context: {stateData: {state: stateVals}}})
  </code></pre>
  
  <p>Nor this; </p>
  
  <pre><code>const wrap = mount(&lt;Home/&gt;,  {stateData: stateVals})
  </code></pre>