如何使用Jest测试fetch请求实现100%代码覆盖率？是否值得测试？

这类属于业务底层通用工具函数，一旦逻辑出错（比如请求方法传错、参数序列化逻辑错误、Header缺漏），所有依赖它的上层业务逻辑都会受影响，且测试成本极低，性价比很高。

你只需要Mock全局的fetch方法，覆盖所有逻辑分支即可，具体实现如下：

1. 编写测试文件 #

假设你的原函数存放在api.js中，测试文件api.test.js内容如下：

import { fetchGetCard } from './api';

// 每次测试前重置mock的fetch
beforeEach(() => {
  global.fetch = jest.fn();
});

// 每次测试后清空mock调用记录
afterEach(() => {
  jest.clearAllMocks();
});

test('调用时传入正确的请求参数且正常返回结果', async () => {
  const testLang = 'zh';
  const testWord = '测试';
  const mockReturnContent = '卡片测试内容';

  // 模拟正常请求返回
  fetch.mockResolvedValueOnce({
    text: jest.fn().mockResolvedValueOnce(mockReturnContent)
  });

  const result = await fetchGetCard(testLang, testWord);

  // 断言fetch调用符合预期
  expect(fetch).toHaveBeenCalledTimes(1);
  expect(fetch).toHaveBeenCalledWith('/getCard', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({ lang: testLang, word: testWord })
  });
  // 断言返回结果符合预期
  expect(result).toBe(mockReturnContent);
});

test('请求异常时正常抛出错误', async () => {
  const mockError = new Error('网络请求失败');
  // 模拟请求异常
  fetch.mockRejectedValueOnce(mockError);

  await expect(fetchGetCard('en', 'test')).rejects.toThrow(mockError);
});

2. 覆盖率验证 #

运行上述测试用例后，所有代码行、分支、函数、语句都会被覆盖，即可达到100%测试覆盖率：

• 正常请求用例覆盖了函数入参、fetch配置、response.text()的逻辑
• 异常请求用例覆盖了请求失败的分支逻辑

内容的提问来源于stack exchange，提问作者Kyatt