Add tests

[trojanowski]

Use Jest and react-testing-library.

[ramsaylanier]

just out of curiosity, how can I go about testing components using these hooks? I'm currently getting a Cannot read property 'watchQuery' of undefined error in my tests because ApolloClient isn't available.

[ramsaylanier]

@trojanowski apologies as I'm still new to testing Apollo components, but there should be a way to use ApolloProvider with MockedProvider from react-apollo/test-utils, but I can't figure out how to use the client from MockedProvider with this. Something like this, but not sure how to pass client into the ApolloHooksProvider.

const wrapper = mount(
  <MockedProvider mocks={mocks}>
    <ApolloHooksProvider>
      <SearchResults />)
    </ApolloHooksProvider>
  </MockedProvider>
)

[trojanowski]

HI @ramsaylanier

I created a repo with a sample test: https://github.com/trojanowski/react-apollo-hooks-sample-test. A few notes:

1. Instead of using MockedProvider you can use ApolloProvider from react-apollo-hooks with a client using MockLink from apollo-link-mock. You can just reuse the createClient function.
2. Your component should be wrapped in <Suspense />. Initially the fallback is rendered and, after fetching data, your component.
3. If you are using react-testing-library you have to invoke render(null); to run queued useEffect hooks (at least until fix(hooks): flush useEffect hooks with a rerender testing-library/react-testing-library#216 and Provide a way to trigger useEffect from tests facebook/react#14050 are solved). I guess there is a similar trick for enzyme.
4. You have to wait for the next tick untill data are "loaded".

[ramsaylanier]

@trojanowski thanks! I had figured out the first two steps last night, but 3 and 4 are what brought it home for me. Awesome work!