Vitest 中的 Mocking React Query Hook

Question

我的組件：

export const Product = () => {
  const navigate = useNavigate()
  const { id } = useParams()
  const { data } = useFetchQueries()
  return (
    <Modal>
      <Box>
        {data.data
          .filter((elem: TableElemType) => elem.id.toString() === id)
          .map((elem: TableElemType) => {
            return <ProductData data={elem} key={elem.id} />
          })}
      </Box>
    </Modal>
  )
}

使用獲取查詢：

export const useFetchQueries = () => {
  const fetcher = async () => {
    const res = await fetch(`https://reqres.in/api/products`)
      .then((res) => res.json())
      .then((data) => {
        return data
      })
      .catch((err) => {
        return err.message
      })
    console.log(res)
    return res
  }
  return useQuery(['products'], async () => fetcher())
}

我想測試它並模擬從 Vitest 中的 useFetchQueries 接收到的數據。 怎么做？

我做了這樣的事情，但我不知道如何對我的組件實現這個模擬。

vi.mock('./useFetchQueries', () => ({
    useFetchQueries: vi.fn().mockReturnValue({ data: { data: ['string'] } }),
}))

describe('ProducData', () => {
    it('if renders proper data', async () => {
        render(renderWithRouter(<Product />, '/5'))
        expect(useFetchQueries).toHaveBeenCalled()
    })
})

Answer 1

推薦的方法是不模擬鈎子的結果，而是模擬 .network 響應：

• https://tanstack.com/query/v4/docs/react/guides/testing#testing.network-calls
• https://tkdodo.eu/blog/testing-react-query