Proper use of `MockedProvider` on searching query

Question

How to solve this error? when I run yarn test I receive this error:

Invariant Violation: Could not find "client" in the context or passed in as an option. Wrap the root component in an , or pass an ApolloClientApolloClient instance in via options.

gql

export const GETLOCATIONNAME = gql`
  query FindLocationByAddress($placeSearch: InputEsriGeoCode!) {
    findLocationByAddress(placeSearch: $placeSearch) {
      name
      address {
        street1
        street2
        city
        state
        zipCode
        country
      }
      geoCode {
        longitude
        latitude
      }
    }
  }
`;

location.test.js

it('should render location', async () => {
  const location = {
    request: {
      query: GETLOCATIONNAME,
      variables: {
        placeSearch: {
          address: inputString,
        },
      },
    },
    result: {
      data: {"data":{"findLocationByAddress":[{"name":"Manila, First District NCR, National Capital Region, PHL","address":{"street1":"","street2":"","city":"Manila","state":"National Capital Region","zipCode":"","country":"PHL"},"geoCode":{"longitude":14.604870000000062,"latitude":120.9862700000001}}]}}
    },
  };

  const component = TestRenderer.create(
    <MockedProvider mocks={[location]} addTypename={false}>
      <LocationSearch name="Manila, First District NCR, National Capital Region, PHL" />
    </MockedProvider>,
  );

  await new Promise(resolve => setTimeout(resolve, 0));

  const p = component.root.findByType('p');
  expect(p.children.join('')).toContain('Location');
});

resources https://www.apollographql.com/docs/react/development-testing/testing/

have you checked you are not using different packages? https://stackoverflow.com/a/58476065/1868008 — diedu, Feb 12 '22 at 23:21

score 0 · Answer 1 · answered Feb 14 '22 at 08:22

Intended outcome:

Test a graphql component with MockedProvider

Actual outcome:

The first test with Loading works. The second where the result should be <h1>hello world<h1> does not.

How to reproduce the issue:

Usual create-react-app with the following test in jest

import React from 'react'
import { mount } from 'enzyme'
import { MockedProvider } from 'react-apollo/test-utils'
import gql from 'graphql-tag'
import { graphql } from 'react-apollo'

const query = gql`
  query hello{
    hello
  }
`

const TestComp = props => {
  const { loading, hello } = props.data
  if (loading) {
    return <h1>Loading</h1>
  }

  return <h1>Hello {hello}</h1>
}

const TestCompHoc = graphql(query)(TestComp)

it('will render loading', () => {
  const mocks = [{ request: { query } }]
  const wrapper = mount(
    <MockedProvider mocks={mocks}>
      <TestCompHoc />
    </MockedProvider>
  )
  expect(wrapper).toContainReact(<h1>Loading</h1>)
})

it('will render data', async () => {
  const mocks = [
    {
      request: { query },
      result: { data: { hello: 'world' } }
    }
  ]
  const wrapper = mount(
    <MockedProvider mocks={mocks}>
      <TestCompHoc />
    </MockedProvider>
  )
  await new Promise(resolve => setTimeout(resolve))
  wrapper.update()
  expect(wrapper).toContainReact(<h1>Hello world</h1>)
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

For More Information Click Here

Proper use of `MockedProvider` on searching query

1 Answers1