Component with useSubscription hook breaks tests.

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]

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]

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.