Question

我有以下测试失败（它期待 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",
            quantity: 1,
          },
        ],
      },
    },
  },
}

当用户触发的 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

Apollo 客户端反应组件测试

0 个答案: