React Apollo 错误:查询不再有模拟响应:突变

Posted

技术标签:

【中文标题】React Apollo 错误:查询不再有模拟响应:突变【英文标题】:React Apollo Error: No more mocked responses for the query: mutation 【发布时间】:2019-09-18 03:03:07 【问题描述】:

预期结果:

MockedProvider 应该模拟我的 createPost 突变。

实际结果:

Error: No more mocked responses for the query: mutation...

如何重现问题:

我有一个非常简单的存储库。我还使用示例提交创建了一个单独的分支,它破坏了 apollo 模拟提供程序。

1) 突变定义在这里:https://github.com/developer239/react-apollo-graphql/blob/create-post-integration-tests/src/modules/blog/gql.js#L23

export const CREATE_POST = gql`
  mutation createPost($title: String!, $text: String!) 
    createPost(title: $title, text: $text) 
      id
      title
      text
    
  
`

2) 虚假请求在这里:https://github.com/developer239/react-apollo-graphql/blob/create-post-integration-tests/test/utils/gql-posts.js#L68

export const fakeCreatePostSuccess = 
  request: 
    query: CREATE_POST,
    variables: 
      title: 'Mock Title',
      text: 'Mock lorem ipsum text. And another paragraph.',
    
  ,
  result: 
    data: 
      createPost: 
        id: '1',
        title: 'Mock Title',
        text: 'Mock lorem ipsum text. And another paragraph.',
      ,
    ,
  ,

3) 我正在测试的组件在这里:https://github.com/developer239/react-apollo-graphql/blob/create-post-integration-tests/src/pages/Blog/PostCreate/index.js#L24

    <Mutation
      mutation=CREATE_POST
      update=updatePostCache
      onCompleted=( createPost:  id  ) => push(`/posts/$id`)
    >
      mutate => (
        <>
          <H2>Create New Post</H2>
          <PostForm submit=values => mutate( variables: values ) />
        </>
      )
    </Mutation>

4) 失败的测试用例在这里:https://github.com/developer239/react-apollo-graphql/blob/create-post-integration-tests/src/pages/Blog/PostCreate/index.test.js#L33

  describe('on form submit', () => 
    it('should handle success', async () => 
      const renderer = renderApp(<App />, ROUTE_PATHS.createPost, [
        fakeCreatePostSuccess,
      ])
      const  formSubmitButton  = fillCreatePostForm(renderer)
      fireEvent.click(formSubmitButton)
      await waitForElement(() => renderer.getByTestId(POST_DETAIL_TEST_ID))
      expect(renderer.getByTestId(POST_DETAIL_TEST_ID)).toBeTruthy()
    )
  )

似乎我遵循了official documentation 中的所有步骤,但我仍然无法完成这项工作。你有什么建议吗? ????

【问题讨论】:

【参考方案1】:

在官方文档中声明我们应该将addTypename=false 添加到&lt;MockedProvider&gt;。当我查看错误消息时,我可以看到 __typename 已添加到它正在查找的查询中。

类似:

 Error: Network error: No more mocked responses for the query: query getDog($dogId: ID!) 
  dog(dogId: $dogId) 
    name
    __typename
  

所以在删除addTypename=false 后我又遇到了一个错误:

Missing field __typename in 
  "name": "dog"

现在,在我的模拟响应中添加 __typename 时,它开始工作了。

例如

const mocks = [
  
    request: 
      query: dogQuery,
      variables: 
        dogId: 1,
      ,
    ,
    result: 
      data: 
        dog: 
          name: 'dog',
          __typename: 'Dog',
        ,
      ,
    ,
  ,
];

【讨论】:

我将对此进行调查并批准答案,如果它有效。 ??

以上是关于React Apollo 错误:查询不再有模拟响应:突变的主要内容,如果未能解决你的问题,请参考以下文章

在 jest-react 中使用 MockedProvider 会导致错误“查询没有更多的模拟响应”

react-apollo 网络错误:查询“Hello”的服务器响应丢失

通过 Apollo 在 React Native 应用程序上使用 GraphQL 查询

React-Apollo:带变量的查询导致 UI 不再乐观

所有 apollo 查询错误都会引发网络 400 错误

如何模拟 graphQL/Apollo 查询响应以在 redux 中测试 action-creator?