title: Testing Apollo React Hooks with Jest & React Testing Library
body: <p>I have a form that uses an Apollo mutation hook:</p>
  
  <pre class="lang-js prettyprint-override"><code>import React from 'react'
  import { useFormik } from 'formik'
  import { useLoginMutation } from '../generated'
  
  const LoginContainer = () =&gt; {
    const [loginMutation, { data, loading, error }] = useLoginMutation()
  
    const formik = useFormik({
      initialValues: {
        email: '',
        password: '',
      },
      onSubmit: values =&gt; {
        loginMutation({
          variables: {
            input: {
              email: String(values.email).trim(),
              password: values.password,
            },
          },
        })
      },
    })
  
    return (
      &lt;form
        onSubmit={event =&gt; {
          event.preventDefault()
          formik.handleSubmit(event)
        }}
      &gt;
        &lt;input
          data-testid="login-email-input"
          name="email"
          placeholder="Email address"
          //  label="Email"
          required
          type="email"
          value={formik.values.email}
          onChange={formik.handleChange}
        /&gt;
        &lt;input
          data-testid="login-password-input"
          name="password"
          placeholder="password"
          //  label="Password"
          required
          type="password"
          value={formik.values.password}
          onChange={formik.handleChange}
        /&gt;
        &lt;button data-testid="login-submit-input" type="submit"&gt;
          LOGIN
        &lt;/button&gt;
      &lt;/form&gt;
    )
  }
  
  export default LoginContainer
  </code></pre>
  
  <p>I am trying to make sure the login mutation is called when the user fills in the form and clicks the submit button. </p>
  
  <p>The test runs successfully sometimes and fails other times. I suspect that the loginMutation promise is not being resolved before the expect block is run.</p>
  
  <p>The console also has the following warning:</p>
  
  <pre><code>  Warning: An update to LoginContainer inside a test was not wrapped in act(...).
  
      When testing, code that causes React state updates should be wrapped into act(...):
  
      act(() =&gt; {
        /* fire events that update state */
      });
      /* assert on the output */
  </code></pre>
  
  <p>Here is the test:</p>
  
  <pre class="lang-js prettyprint-override"><code>describe('login container', () =&gt; {
    let loginMutationCalled = false
  
    const variables = {
      input: {
        email: 'test@example.com',
        password: '123',
      },
    }
  
    const result = () =&gt; {
      loginMutationCalled = true
      return {
        data: {
          Login: {
            accountId: '123',
          },
        },
      }
    }
  
    const mocks = [
      {
        request: {
          query: LOGIN_MUTATION,
          variables,
        },
        result,
      },
    ]
  
    it('should call the login mutation', async () =&gt; {
      await act(async () =&gt; {
        const { findByTestId } = render(
          &lt;MockedProvider mocks={mocks} addTypename={false}&gt;
            &lt;LoginContainer /&gt;
          &lt;/MockedProvider&gt;,
        )
  
        fireEvent.change(await findByTestId('login-email-input'), {
          target: {
            value: 'test@example.com',
          },
        })
  
        fireEvent.change(await findByTestId('login-password-input'), {
          target: {
            value: '123',
          },
        })
  
        await wait(async () =&gt;
          fireEvent.click(await findByTestId('login-submit-input')),
        )
      })
  
      expect(loginMutationCalled).toBe(true)
    })
  })
  </code></pre>
  
  <p>How do I make sure the loginMutation promise has been resolved before running the assertions?</p>