title: React Apollo Testing is not working. Query data is always coming undefined
body: <p>I am getting loading state only and data as undefined in testing. I don't know why I am following everything in the given example. Please help.</p>
  
  <p>Testing file. When i am waiting thsi line toexecute <code>await wait(() =&gt; getByTestId('edit-category'));</code>. It is giving response data of query as undefined. 
  Error: <code>TypeError: Cannot read property 'getCategory' of undefined</code> 
  Line 34 on <code>editConatinerCategory.tsx</code> => <code>category={data!.getCategory!}</code></p>
  
  <pre><code>import React from 'react';
  import gql from 'graphql-tag';
  import { cleanup, wait } from 'react-testing-library';
  import { customRender } from '../../../test-utils/customRender';
  import { EditCategoryContainer } from './Container';
  
  afterEach(() =&gt; {
    cleanup();
    console.error;
  });
  console.error = jest.fn();
  
  const getCategoryMock = {
    request: {
      query: gql`
        query getCategory($id: Int!) {
          getCategory(id: $id) {
            id
            name
            active
            position
          }
        }
      `,
      variables: {
        id: 1
      }
    },
    result: {
      data: {
        getCategory: {
          id: 1,
          name: 'category',
          active: true,
          position: 1
        }
      }
    }
  };
  
  describe('create edit category module', () =&gt; {
    test('Rendering correct', async () =&gt; {
      const { container, debug, getByTestId } = customRender(&lt;EditCategoryContainer /&gt;, [
        getCategoryMock
      ]);
      await wait(() =&gt; getByTestId('edit-category'));
      await wait(() =&gt; expect(container).toMatchSnapshot());
  //Getting this TypeError: Cannot read property 'getCategory' of undefined. Because i am data as undefined from my query response
  
    });
  });
  </code></pre>
  
  <p>CustomRender.tsx</p>
  
  <pre><code>import React from 'react';
  import { render } from 'react-testing-library';
  import { MockedProvider, MockedResponse } from 'react-apollo/test-utils';
  import { Router, Switch } from 'react-router-dom';
  import { createMemoryHistory } from 'history';
  
  export const customRender = (
    node: JSX.Element | null,
    mocks?: MockedResponse[],
    {
      route = '/',
      history = createMemoryHistory({ initialEntries: [route] })
    } = {}
  ) =&gt; {
    return {
      history,
      ...render(
        &lt;MockedProvider mocks={mocks} addTypename={false}&gt;
          &lt;Router history={history}&gt;
            &lt;Switch&gt;{node}&lt;/Switch&gt;
          &lt;/Router&gt;
        &lt;/MockedProvider&gt;
      )
    };
  };
  </code></pre>
  
  <p>EditCategoryContainer.tsx</p>
  
  <pre><code>import React from 'react';
  import { withRouter } from 'react-router';
  import { Spin } from 'antd';
  import {
    AddCategoryComponent,
    GetCategoryComponent
  } from '../../../generated/graphql';
  import { EditCategory } from './Edit';
  import { LoadingComponent } from '../../../components/LoadingComponent';
  
  export const EditCategoryContainer = withRouter(({ history, match }) =&gt; {
    const id: number = parseInt(match.params.id, 10);
    return (
      &lt;GetCategoryComponent
        variables={{
          id
        }}
      &gt;
        {({ data, loading: getCategoryLoading }) =&gt; {
          console.log(getCategoryLoading, 'getCategoryLoading');
          if (getCategoryLoading) {
            return &lt;LoadingComponent /&gt;;
          }
          if (data &amp;&amp; !data.getCategory) {
            return &lt;div&gt;Category not found!&lt;/div&gt;;
          }
          console.log(data);
          return (
            &lt;AddCategoryComponent&gt;
              {(addCategory, { loading, error }) =&gt; {
                return (
                  &lt;EditCategory
                    data-testid="edit-category"
                    category={data!.getCategory!}
                    loading={loading || getCategoryLoading}
                    onSubmit={values =&gt; {
                      addCategory({ variables: values }).then(() =&gt; {
                        history.push('/dashboard/categories');
                      });
                    }}
                  /&gt;
                );
              }}
            &lt;/AddCategoryComponent&gt;
          );
        }}
      &lt;/GetCategoryComponent&gt;
    );
  });
  
  </code></pre>
  
  <p>Edit: 
  I tried @mikaelrs solution which is passed match. But it is not working. I also tried to pass id:1 as fixed. But it is still giving error.  </p>
  
  <pre><code> &lt;GetCategoryComponent
        variables={{
          id:1
        }}
      &gt;
  ...rest of code.
  &lt;/GetCategoryComponent&gt;
  </code></pre>
  
  <p>This is not working. My query without veriable is working fine. Mutation is also working fine. I am having only problem with this. When i have to pass like varible like this.</p>