MockedProvider does not return mocks in a storybook.

Intended outcome: The MockedProvider should work in a storybook environment and return the mock request provided to the MockProvider as per the docs: https://www.apollographql.com/docs/react/api/react/testing/#mockedprovider

Actual outcome: When running a story with MockedProvider, the useQuery hook returns:

{
  error: undefined,
  loading: true,
  data: undefined
}

then it returns:

{
  error: undefined,
  loading: false,
  data: undefined
}

It does not return the mock I provided in my story

How to reproduce the issue:

Here is my story.tsx file

import React from 'react'
import { MockedProvider } from "@apollo/client/testing";
import LatestSells from '~/components/SalesPage/LatestSells'
import { LATEST_SELL_SIGNALS } from '~/common/queries'

export default {
  title: 'Sales page/latest sells',
}


const mocks = [
  {
    request: {
      query: LATEST_SELL_SIGNALS,
      variables: {},
    },
    result: {
      data: {
        dog: {
          name: "Douglas"
        }
      }
    }
  }
]

export const latest_sells = () => {
  return (
    <MockedProvider mocks={mocks} addTypename={false}>
      <LatestSells />
    </MockedProvider>
  )
}

I tried both with and without addTypename={false}

I made my component as simple as possible to troubleshoot, but it doesn’t work even when simplified down to the smallest possible react component.

component:

import React from 'react'
import { useQuery } from '@apollo/client'
import { LATEST_SELL_SIGNALS } from '~/common/queries'

const LatestSells = () => {
  const { loading, error, data } = useQuery(LATEST_SELL_SIGNALS)
  console.log(loading, error, data)
  return null
}

export default LatestSells

Even with the simplest possible setup, this does not work.

Lastly here is my query:

import { gql } from 'apollo-boost'

export const LATEST_SELL_SIGNALS = gql`
  query {
    latestSellSignalsList(orderBy: createdAt_DESC, first: 10) {
      items {
        name
        ticker
        boughtAt
        soldAt
      }
    }
  }
`

I’ve doubled checked that the query console logs correctly and the same in both the story and the actual component.

Versions System: OS: macOS 10.15.6 Binaries: Node: 14.4.0 - /usr/local/bin/node Yarn: 1.22.4 - /usr/local/bin/yarn npm: 6.14.5 - /usr/local/bin/npm Browsers: Chrome: 85.0.4183.121 Firefox: 81.0 Safari: 14.0 npmPackages: @apollo/client: ^3.2.1 => 3.2.1 apollo-boost: ^0.4.9 => 0.4.9 apollo-link: ^1.2.14 => 1.2.14 apollo-link-batch-http: ^1.2.14 => 1.2.14 apollo-link-context: ^1.0.20 => 1.0.20 apollo-link-error: ^1.1.13 => 1.1.13 apollo-utilities: ^1.3.4 => 1.3.4

[MarkLyck]

I find this a strange user-behaviour, but I figured it out.

I was testing it with dummy data this entire time because I just wanted to see the data return “something”.

However, apparently if you give the mockProvider a mock that doesn’t 100% match the expected schema, it will just give up and return undefined with no error, warning or anything.

When I replaced my dummy data, with a data matching the exact schema of my request it works corrrectly.

Wasted a lot of time on this detail. Please consider adding an error or warning if the mock doesn’t match the expected return, if this is the intended behaviour.

P.S. I also tried setting my apollo-link and apollo-boost imports to @apollo-client, but that did not affect anything.

[ben-gooding-sky]

Having the same issue. As a workaround you may set the fetchPolicy == “no-cache” in the useQuery options:

const { loading, error, data } = useQuery(LATEST_SELL_SIGNALS, {fetchPolicy: "no-cache"})

I had this exact issue which this fixes, but I don’t want to have to refetch my user both on the server and then again in the component, is there another work around for this?

Edit: After a lot of searching there’s a work around adding defaultOptions parameter to the mocked provider!

<MockedProvider
        mocks={mocks}
        addTypename={false}
        defaultOptions={{ watchQuery: { fetchPolicy: 'no-cache' } }}
      >