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

Question

预期结果：

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()
    })
  })

似乎我遵循了官方文档中的所有步骤，但我仍然无法完成这项工作。你有什么建议吗？ 🙂

Answer 1

在官方文档中指出，我们应该将

addTypename={false}

添加到

<MockedProvider>

。当我查看错误消息时，我可以看到

__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',
        },
      },
    },
  },
];

Answer 2

万一其他人偶然发现这个问题，我通过打电话修复了我的问题

afterEach(() => {
  jest.clearAllMocks();
});

在测试的顶部，我将所有测试分成自己的描述/测试块，例如

test('rendering of component', () => {
  it('renders with no issues', () => {
  });
})

test('get some arbitrary call', () => {
  it('does not call error handler when button is clicked', () => {
  });
})

test('error handler', () => {
  it('calls logger when button is clicked and request fails', () => {
  });
})