使用 `fetch` 进行可组合数据获取时的测试难点：如何正确获取 `data` 结果？

使用 fetch 进行可组合数据获取时的测试难点

问题：在测试中无法获取预期的 data 结果

在使用可组合数据获取库（如 React Query）时，使用 fetch API 进行数据获取是一个常见的任务。然而，在编写测试时，直接使用 fetch 函数可能会导致意外的行为，因为在测试环境中浏览器提供的 fetch 函数不可用。

解决方法：手动调用 fetch 函数

为了在测试中正确模拟 fetch 行为，我们需要手动调用 fetch 函数并返回一个 Promise，该 Promise 解析为预期的响应。这包括设置响应的 json 方法，该方法解析为预期的测试数据。

const testData = {data: 'value'};

global.fetch = vi.fn(() => Promise.resolve({
        json: () => Promise.resolve(testData),
        ok: true,
      })) as any;

// 手动调用 `fetchData` 函数
const { data, error, isLoading } = useFetchData('test');
await data.value; // 等待 `data` Promise 解析

expect(error.value).toBeUndefined;
expect(isLoading.value).toBeFalsy;
expect(data.value).toBe(testData); // 通过！

通过手动调用 fetchData 函数并等待 data Promise 解析，测试可以模拟组件中实际发生的事件，从而获得预期的 data 结果。

常见问题解答

1. 为什么在测试中需要手动调用 fetch 函数？

在测试环境中，浏览器提供的 fetch 函数不可用。通过手动调用 fetch 函数，我们可以控制返回的响应并确保测试与预期结果一致。

2. fetch 函数应该返回什么？

fetch 函数应返回一个 Promise，该 Promise 解析为一个具有 json 方法的对象。json 方法解析为预期的测试数据。

3. 如何手动设置 json 方法？

可以通过以下方式手动设置 json 方法：

return Promise.resolve({
        json: () => Promise.resolve(testData),
        ok: true,
      })

4. 如何等待 data Promise 解析？

可以使用 await 语法来等待 data Promise 解析：

await data.value;

5. 如果测试失败，应该检查什么？

如果测试失败，请检查以下内容：

• fetch 函数是否被正确调用。
• 返回的响应是否与预期一致。
• data Promise 是否正确解析。