在搜索查询中正确使用“MockedProvider”答案

【问题标题】：Proper use of `MockedProvider` on searching query在搜索查询中正确使用“MockedProvider”
【发布时间】：2022-02-14 16:22:49
【问题描述】：

如何解决这个错误？当我运行yarn test 时收到此错误：

不变违规：在上下文中找不到“客户”或通过作为一个选项。将根组件包裹在 , 或通过选项传入一个 ApolloClientApolloClient 实例。

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');
});

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

【问题讨论】：

你检查过你没有使用不同的包吗？ stackoverflow.com/a/58476065/1868008
@diedu 是的。我已经检查过了

标签： javascript reactjs

【解决方案1】：

预期结果：

用MockedProvider测试一个graphql组件

实际结果：

使用 Loading 的第一个测试有效。结果应该是<h1>hello world<h1> 的第二个没有。

如何重现问题：

通常的 create-react-app 带有以下开玩笑的测试

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>

欲了解更多信息Click Here

【讨论】：