title: Apollo GraphQL React - testing Mutations with MockedProvider
body: <p>I'm following the <a href="https://www.apollographql.com/docs/guides/testing-react-components.html#Testing-mutation-components" rel="nofollow noreferrer">docs</a> provided by Apollo GraphQL for testing React component mutations using MockedProvider.</p>
  
  <p>In the app I'm using <code>recompose</code> <code>styled-components</code> <code>react</code> <code>apollo-client</code> <code>react-apollo</code>
  For testing I use <code>jest</code> and <code>enzyme</code></p>
  
  <p>I have created mock queries using MockedProvider and tested my component successfully. I cannot, however, get the mutation testing to work properly. My component keeps displaying an error state for the HTML instead of displaying an OK state. </p>
  
  <p>NOTE: Through compose, I compose my <code>&lt;TestKey/&gt;</code> component with handler functions and a loading and error state that will render conditionally. </p>
  
  <p>Following the docs (linked above) I've created a test that looks similar to this:</p>
  
  <p><strong>COMPONENT</strong></p>
  
  <pre><code>const Key = ({
    className,
    columns,
    title,
    data,
    type,
    onClick,
    paginate,
    error,
    info,
  }) =&gt; (
    &lt;div className={className}&gt;
      &lt;div className="tableHeader"&gt;
        &lt;h4&gt;{title}&lt;/h4&gt;
        &lt;Wrapper&gt;
          &lt;Tooltip
            title={`What are ${title}?`}
            content={[&lt;TooltipContent key={title}&gt;{info}&lt;/TooltipContent&gt;]}
            trigger="hover"
            keyid={title}
          /&gt;
        &lt;/Wrapper&gt;
        &lt;Button type="primary" onClick={() =&gt; onClick(type)}&gt;
          &lt;ButtonIcon type="key" /&gt;
          Generate New Key
        &lt;/Button&gt;
      &lt;/div&gt;
      {error &amp;&amp; &lt;Alert type="danger"&gt;Error: {error}&lt;/Alert&gt;}
      {data.length === 0 ? (
        &lt;NoKeys&gt;There are no {title} generated for this account.&lt;/NoKeys&gt;
      ) : (
        &lt;Table
          columns={columns}
          data={data}
          defaultSorted={[
            {
              id: 'insertedAt',
              asc: false,
            },
          ]}
        /&gt;
      )}
    &lt;/div&gt;
  )
  </code></pre>
  
  <p><strong>MUTATION</strong></p>
  
  <pre><code>const CREATEMUTATION = gql`
      mutation createKey(
        $type: String!
      ) {
        createKey(
          type: $type
        ) {
            id
            token
            type
            insertedAt
          }
        }
  `
  </code></pre>
  
  <p><strong>EXPECTED RETURN FROM MUTATION</strong></p>
  
  <pre><code>const createKey = {
    id: '4',
    token: 'ucf345',
    type: 'public',
    insertedAt: '2018-06-20 20:42:15.189925',
  }
  </code></pre>
  
  <p><strong>TEST</strong></p>
  
  <pre><code>describe('Create Key', () =&gt; {
      let tree
  
      beforeEach(async () =&gt; {
        const mockedData = [{
          request: {
            query: CREATEMUTATION,
            variables: { type: 'public' },
          },
          result: {
            data: {
              createKey: createKey,
            },
          },
        }]
  
        tree = renderer.create(
          &lt;MockedProvider mocks={mockedData} removeTypename={true}&gt;
            &lt;ThemeProvider theme={theme}&gt;
              &lt;TestKey /&gt;
            &lt;/ThemeProvider&gt;
          &lt;/MockedProvider&gt;
        )
      })
  
  ****at this step in the test I should be able to call on the button in the component and trigger a click that calls the mutation****
      it('check', () =&gt; {
        //errors because it cannot find button
        const button = tree.root.findByProps({type: 'primary'})
  
        console.log(tree.toJSON().children);
      })
    })
  })
  </code></pre>
  
  <p><strong>CONSOLE.LOG RETURNS THE FOLLOWING IN THE TERMINAL</strong> 
  (it displays what's rendered when my component receives an error from GraphQL)</p>
  
  <pre><code>[ { type: 'div',
          props: { className: 'sc-bwzfXH kIOmnc' },
          children: 
           [ [Object],
             'Error connecting to the Platform. Wait for a second and then click the retry button below' ] 
  ]
  </code></pre>
  
  <p>I've tried this using Enzyme's mount instead of React's Test renderer and I get the same result (an error state).</p>