Apollo 客户端反应组件测试

问题描述

我有以下测试失败（它期待 5 但它仍然是 4）

  it(`should increase the quantity of basket items to ${
    basketTotalItems + 1
  }`,async () => {
    const result: RenderResult = render(
      <MockedProvider mocks={[MOCKED_RESPONSE]} addTypename={false}>
        <Basket />
      </MockedProvider>
    )

    await new Promise((resolve) => setTimeout(resolve,0))

    const allIncreaseButtons = result.getAllByTestId("basket-add-icon")
    const firstIncreaseButton = allIncreaseButtons[0]

    expect(result.getByTestId("basket-icon")).toHaveTextContent(
      `${basketTotalItems}`
    )

    fireEvent.click(firstIncreaseButton)

    await new Promise((resolve) => setTimeout(resolve,0))

    const updatedBasketItems = basketTotalItems + 1
    expect(result.getByTestId("basket-icon")).toHaveTextContent(
      `${updatedBasketItems}`
    )
  })

其中 MOCKED_RESPONSE 的总数为 4：

const MOCKED_RESPONSE = {
  request: {
    query: GET_USER,variables: {
      userId: "john-smith",},result: {
    data: {
      user: {
        id: "john-smith",basket: [
          {
            id: "1017163",quantity: 2,{
            id: "1016953",quantity: 1,{
            id: "1016954",],}

当用户触发的 UI 调用 API 时，我试图测试该数量增加 1。

API 调用如下：

export async function editBasketItem(
  userId: string,item: ItemInput
): Promise<ItemType | null> {
  if (!userId || !item) return null
  try {
    const result = await client.mutate({
      mutation: EDIT_BASKET_ITEM,variables: {
        userId,item,update: (cache,{ data }) => {
        if (!data?.editBasketItem) return
        client.writeFragment({
          id: cache.identify(data.editBasketItem),fragment: ITEM_FRAGMENT,data,fragmentName: "ItemFragment",})
      },})
...

是否需要向 EDIT_BASKET_ITEM 提供第二个模拟响应 (mocks={[MOCKED_RESPONSE]} ) 还是我走错了方向？

额外说明 我相信它仍然是 4 的原因是因为模拟响应总共有 4，这让我认为我需要提供更新的响应作为 click

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）