测试中如何处理 Http 请求？

前言

哈喽，大家好，我是海怪。

不知道大家平时写单测时是怎么处理 网络请求 的，可能有的人会说：“把请求函数 Mock ，返回 Mock 结果就行了呀”。

但在真实的测试场景中往往需要多次改变 Mock 结果，Mock fetch 或者 axios.get 就不太够用了。

带着上面这个问题我找到了 Kent 的这篇 《Stop mocking fetch》。今天就把这篇文章分享给大家。

---

正片开始

我们先来看下面这段测试代码有什么问题：

// __tests__/checkout.js
import * as React from 'react'
import {
   render, screen} from '@testing-library/react'
import userEvent from '@testing-library/user-event'
import {
   client} from '~/utils/api-client'

jest.mock('~/utils/api-client')

test('clicking "confirm" submits payment', async () => {
   
  const shoppingCart = buildShoppingCart()
  render(<Checkout shoppingCart={
   shoppingCart} />)

  client.mockResolvedValueOnce(() => ({
   success: true}))

  userEvent.click(screen.getByRole('button', {
   name: /confirm/i}))

  expect(client).toHaveBeenCalledWith('checkout', {
   data: shoppingCart})
  expect(client).toHaveBeenCalledTimes(1)
  expect(await screen.findByText(/success/i)).toBeInTheDocument()
})

如果不告诉你 <Checkout /> 的功能和 /checkout API 的用法，你可能发现不了这里的问题。

好吧，我来公布一下答案：首先第一个问题就是把 client 给 Mock 掉了，问问自己：你怎么知道 client 是一定会被正确调用的呢？当然，你可能会说：client 可以用别的单测来做保障呀。但你又怎么能保证 client 不会把返回值里的 body 改成 data 呢？哦，你是想说你用了 TypeScript 是吧？彳亍！但由于我们把 client Mock 了，所以肯定不会完全保证 client 的功能正确性。你可能还会说：我还有 E2E 测试！

但是，如果我们在这里能真的调用一下 client 不是更能提高我们对 client 的信心么？好过一直猜来猜去嘛。

不过，我们肯定也不是想真的调用 fetch 函数，所以我们会选择把 window.fetch 给 Mock 了：

// __tests__/checkout.js
import * as React from 'react'
import {
   render, screen} from '@testing-library/react'
import userEvent from '@testing-library/user-event'

beforeAll(() => jest.spyOn(window, 'fetch'))

// Jest 的 rsetMocks 设置为 true
// 我们就不用担心要 cleanup 了
// 这里假设你用了类似 `whatwg-fetch` 的库来做 fetch 的 Polyfill

test('clicking "confirm" submits payment', async () => {
   
  const shoppingCart = buildShoppingCart()
  render(<Checkout shoppingCart={
   shoppingCart} />)

  window.fetch.mockResolvedValueOnce({
   
    ok: true,
    json: async () => ({
   success: true}