React-apollo: MockedProvider doesn't work with @apollo/react-hooks

[helloncanella]

Intended outcome:

Reproduction of the example of documentation, available here without trouble.

There, it is being used, at same time, MockedProvider and the hook useQuery.

// dog.test.js

import { MockedProvider } from '@apollo/react-testing';

// The component AND the query need to be exported
import { GET_DOG_QUERY, Dog } from './dog';

const mocks = [
  {
    request: {
      query: GET_DOG_QUERY,
      variables: {
        name: 'Buck',
      },
    },
    result: {
      data: {
        dog: { id: '1', name: 'Buck', breed: 'bulldog' },
      },
    },
  },
];

it('renders without error', () => {
  renderer.create(
    <MockedProvider mocks={mocks} addTypename={false}>
      <Dog name="Buck" />
    </MockedProvider>,
  );
});

import React from "react"
import gql from "graphql-tag"
import { useQuery } from "@apollo/react-hooks/"

// Make sure the query is also exported -- not just the component
export const GET_DOG_QUERY = gql`
  query getDog($name: String) {
    dog(name: $name) {
      id
      name
      breed
    }
  }
`

export function Dog({ name }) {
  const { loading, error, data } = useQuery(GET_DOG_QUERY, {
    variables: { name }
  })

  if (loading) return <p>Loading...</p>

  if (error) return <p>Error!</p>

  return (
    <p>
      {data.dog.name} is a {data.dog.breed}
    </p>
  )
}



md5-5e2c0e4898f3e86fd8387919fee69b3f



System:
    OS: macOS 10.14.6
  Binaries:
    Node: 8.15.0 - ~/.nvm/versions/node/v8.15.0/bin/node
    Yarn: 1.12.1 - /usr/local/bin/yarn
    npm: 6.11.2 - ~/.nvm/versions/node/v8.15.0/bin/npm
  Browsers:
    Chrome: 76.0.3809.132
    Firefox: 67.0
    Safari: 12.1.2
  npmGlobalPackages:
    apollo: 2.11.0

[hwillson]

@helloncanella We use MockedProvider extensively in the hooks test suite, and it's working properly. Any chance you can turn this into a runnable reproduction using something like http://codesandbox.io?

[helloncanella]

I've tested it in a new setup and it worked. Certainly, something was wrong with the old one.

[leahwchang]

@helloncanella what is your new setup? I've also replicated the test using the apollo example and my own data but I'm getting the same error "Invariant Violation"

[helloncanella]

@leahwchang check https://codesandbox.io/s/toggling-menu-euqrk?from-embed

[dylantf]

I'm getting this error as well with the copy/pasted Dog component/test, with all up-to-date modules. It seems to work fine in a new create-react-app project, so I think it may have something to do with jest configuration. I started with a new, blank jest config and kept seeing invariant violation.

Using the jest config from an ejected CRA seems to fix it.

[svengau]

Updating from react-scripts 3.1.2 to 3.2.0 and react-apollo 3.1.1 to 3.1.3 fixed the issue for me.