Apollo-client: Component with useSubscription hook breaks tests.

[martdavidson]

Intended outcome:
A component under test that calls the useSubscription hook should not require a MockedResponse for that subscription.

Actual outcome:
A component under test with a useSubscription hook where no mock is provided results in the No more mocked responses for the query: subscription SubscriptionName and the test fails. Relevant stack trace:

at MockLink.request (node_modules/@apollo/react-testing/lib/react-testing.cjs.js:85:13)
      at execute (node_modules/apollo-link/src/link.ts:131:10)
      at QueryManager.getObservableFromLink (node_modules/apollo-client/bundle.umd.js:2066:58)
      at makeObservable (node_modules/apollo-client/bundle.umd.js:1884:22)
      at QueryManager.startGraphQLSubscription (node_modules/apollo-client/bundle.umd.js:1914:14)
      at ApolloClient.subscribe (node_modules/apollo-client/bundle.umd.js:2600:32)
      at SubscriptionData.initialize (node_modules/@apollo/react-hooks/lib/react-hooks.cjs.js:803:64)
      at new SubscriptionData (node_modules/@apollo/react-hooks/lib/react-hooks.cjs.js:751:11)
      at getSubscriptionDataRef (node_modules/@apollo/react-hooks/lib/react-hooks.cjs.js:892:37)
      at useSubscription (node_modules/@apollo/react-hooks/lib/react-hooks.cjs.js:902:26)
     ...

It shouldn't require a mock to be provided unless you are explicitly triggering an event that the subscription is subscribed to, for instance a websocket message or what have you.

The implication here is that if I have a useSubscription at the top level of my app, then every single integration test requires that I provide a MockedResponse object for the subscription, even though the subscription should not be firing.

If I _do_ provide a MockedReponse with a null response, for instance:

{
        request: {
          query: someSubscription,
          variables: someSubscriptionVariables,
        },
        result: { data: null },
}

the test passes without the above error. This is cumbersome and shouldn't be needed.

How to reproduce the issue:
Create a component that calls a useSubscription hook, and put that component under test wrapped in a MockedProvider.
Don't provide a MockedResponse for the subscription.

Versions
System:
OS: macOS 10.15.2
Binaries:
Node: 12.14.1
Yarn: 1.22.5
npm: 6.13.4
Browsers:
Chrome: 85.0.4183.102
Firefox: 77.0.1
Safari: 13.0.4
npmPackages:
@apollo/react-hooks: ^3.0.1 => 3.1.5
@apollo/react-testing: ^3.1.3 => 3.1.4
apollo: ^2.18.0 => 2.30.3
apollo-cache-inmemory: ^1.6.6 => 1.6.6
apollo-client: ^2.6.10 => 2.6.10
apollo-link: ^1.2.13 => 1.2.14
apollo-link-error: ^1.1.12 => 1.1.13
apollo-link-http: ^1.5.16 => 1.5.17
apollo-link-ws: ^1.0.20 => 1.0.20

Looks like this has already been raised but not answered in the deprecated react-apollo repo: https://github.com/apollographql/react-apollo/issues/3530

https://github.com/apollographql/react-apollo/issues/3530#issuecomment-555110386_ comment is exactly what I'm trying to do, and it's looking like it's either not possible, or undocumented.

Related issues:

7493

7313

[martdavidson]

It looks like there is a MockSubscriptionLink you can use: https://github.com/apollographql/react-apollo/blob/%40apollo/react-testing%403.1.3/packages/testing/src/mocks/mockSubscriptionLink.ts

Here's an example of it being used in a test: https://github.com/apollographql/react-apollo/blob/%40apollo/react-testing%403.1.3/packages/hooks/src/__tests__/useSubscription.test.tsx

The problem is you can't use MockLink and MockSubscriptionLink together, so how do I test a component that uses both useQuery and useSubscription? There's no way to pass mocks to MockSubscriptionLink in the same way you can with a normal MockLink.

[martdavidson]

I can't find _any_ documentation on testing subscriptions - should this be a feature request to document how to do it? Or is what I want just not possible? @hwillson

[martdavidson]

Is this something that anyone in the community has figured out? Triggering events manually that fire a subscription is a real chore, and not being able to write tests around them makes it difficult to refactor anything subscription related.

[martdavidson]

@benjamn Sorry to be _that guy_. Can you give this a quick skim, let me know if I'm missing something obvious, and if not let me know if I can do anything to help make this clearer. I know this ticket is a bit of a mess.