title: Apollo Client - How to test a component that uses multiple queries, using HOC components that use compose
body: <p>I am reading over the docs for testing React/Apollo components <a href="https://www.apollographql.com/docs/react/development-testing/testing/" rel="nofollow noreferrer">Link</a>. If the component has one query, it seems pretty simple to test it.</p>
  <pre><code>const mocks = [
    {
      request: {
        query: GET_DOG_QUERY,
        variables: {
          name: 'Buck',
        },
      },
      result: {
        data: {
          dog: { id: '1', name: 'Buck', breed: 'bulldog' },
        },
      },
    },
  ];
  
  it('renders without error', () =&gt; {
    renderer.create(
      &lt;MockedProvider mocks={mocks} addTypename={false}&gt;
        &lt;Dog name=&quot;Buck&quot; /&gt;
      &lt;/MockedProvider&gt;,
    );
  });
  </code></pre>
  <p>My component is a little different than the one provided in the documentation.</p>
  <ol>
  <li>It doesn't use the <code>useQuery</code> hook, instead I am opting for the HOC approach as <a href="https://www.apollographql.com/docs/react/api/react-hoc/" rel="nofollow noreferrer">outlined here</a>.</li>
  <li>I have two queries that my function uses, and so I use two <code>graphql</code> functions and combine them together using <code>compose</code>, <a href="https://www.apollographql.com/docs/react/api/react-hoc/" rel="nofollow noreferrer">as recommended in the docs</a>.</li>
  </ol>
  <p>My component is exported like this:</p>
  <pre><code>export default compose(withQueryA, withQueryB)(MyComponent);
  
  const withQueryA = graphql(QUERY_A, {
      name: &quot;QueryA&quot;,
      options: (props) =&gt; ({
          variables: {
              foo: props.foo,
          },
      }),
  });
  
  const withQueryB = graphql(QUERY_B, {
      name: &quot;QueryB &quot;,
      options: (props) =&gt; ({
          variables: {
              bar: props.bar,
          },
      }),
  });
  </code></pre>
  <p>What I'm trying to do is provide the <code>mocks</code> object with multiple objects, each containing a <code>request</code>/<code>result</code> for the corresponding query. I just wanted to know if anyone has been testing their components in a similar way or if there is a better suggestion.</p>
  <pre><code>const mocks = [
      {
          request: {
              query: QUERY_A,
              variables: {
                  foo: &quot;bar&quot;,
              },
          },
          result: {
              data: {
                  ...,
              },
          },
      },
      {
          request: {
              query: QUERY_B,
              variables: {
                  foo: &quot;bar&quot;,
              },
          },
          result: {
              data: {
                  ...,
              },
          },
      },
  ];
  </code></pre>
  <p>I'm also confused about what to put in the <code>result</code> object. When I <code>console.log</code> what is actually returned to the component when making a query in production, it has the data plus <code>error</code>, <code>fetchMore</code>, <code>loading</code>, <code>networkStatus</code>. Do I have to put all those things in the mocks as well?</p>