Question

在使用Apollo Client的React应用程序中，我有以下逻辑。

1-我获取联系人

const { data } = useQuery(FETCH, { variables })

2-我删除联系人

const [deleteContactMutation] = useMutation(DELETE, refetch)

3-重新触发触发操作（在删除突变之后），这又是获取功能：

const refetch = { refetchQueries: [{ query: FETCH, variables }] }

问题出在测试中，我无法期待refetch

describe('Delete contact', () => {
  it('deletes contact', async () => {
    const { getAllByTestId, queryAllByTestId } = renderComponent(deleteMocks)
    await new Promise((resolve) => setTimeout(resolve))

    await waitFor(() => getAllByTestId('delete-button')[0].click())
    await new Promise((resolve) => setTimeout(resolve))

    await waitFor(() => {
      const contactsAfterDeletion = queryAllByTestId('contact-row')
      expect(contactsAfterDeletion.length).toEqual(0)
    })
  })
})

在deleteMocks中，我有一组模拟查询/突变：

const deleteMocks: MockedResponse[] = [
  contactsRequest('1.234', 1),
  deleteContactMutation(),
  contactsRequest('1.234', 0)
]

因此，我首先获得1个联系人，然后模拟deletion mutation，然后再次模拟没有联系人的联系人的获取

不幸的是，由于联系人列表仍然为1，所以期望失败了。我通过此策略通过了测试：

setTimeout(() => {
  const contactsAfterDeletion = queryAllByTestId('contact-row')
  console.log('### after deleting contacts.length', contactsAfterDeletion.length)
  expect(contactsAfterDeletion.length).toEqual(0)
}, 10000);

但是感觉很片状。我如何等待第二次提取？

模拟突变后模拟阿波罗useQuery

0 个答案: