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/
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