1. 理解问题背景：Jest、MSW与fetch的挑战
在使用create-react-app等工具构建的react项目中，我们通常会选择jest作为测试框架，并结合mock service worker (msw) 来模拟网络请求，以实现高效且隔离的前端数据层测试。然而，在测试涉及fetch api的异步操作，尤其是graphql请求时，开发者常会遇到两个主要问题：
- ReferenceError: fetch is not defined: Jest的默认测试环境是Node.js。在Node.js环境中，全局对象中默认不包含浏览器原生的fetch API。因此，当测试代码尝试调用fetch时，会抛出此错误。
- MSW拦截失败: 即使解决了fetch未定义的问题，MSW可能也无法成功拦截到发出的请求，导致测试仍然尝试执行真实的网络请求，或者返回非预期的结果（如undefined）。这通常与请求URL的匹配方式或GraphQL操作的识别有关。
本教程将详细介绍如何解决这两个核心问题，确保您的GraphQL请求能够被Jest和MSW正确测试。
2. 解决ReferenceError: fetch is not defined
由于Jest在Node.js环境中运行测试，我们需要为fetch API提供一个polyfill。isomorphic-fetch是一个常用的解决方案，它提供了一个在Node.js和浏览器环境中都能工作的fetch实现。
2.1 安装isomorphic-fetch
首先，在您的项目中安装isomorphic-fetch：
npm install isomorphic-fetch --save-dev # 或者 yarn add isomorphic-fetch --dev
2.2 配置setupTests.js
create-react-app通常会包含一个src/setupTests.js文件，该文件会在每个测试文件运行之前被Jest加载。我们可以在这里导入isomorphic-fetch，使其在所有测试环境中可用。
src/setupTests.js:
import '@testing-library/jest-dom'; // 通常用于扩展Jest匹配器
import 'isomorphic-fetch'; // 导入fetch polyfill
import { server } from './__mocks__/server'; // 导入MSW服务器实例
// 在所有测试开始前启动MSW服务器
beforeAll(() => server.listen());
// 在每个测试结束后重置MSW处理程序，确保测试之间隔离
afterEach(() => server.resetHandlers());
// 在所有测试结束后关闭MSW服务器
afterAll(() => server.close());通过以上配置，fetch函数将在您的Jest测试环境中全局可用，从而解决了ReferenceError。
3. 确保MSW正确拦截GraphQL请求
解决了fetch的定义问题后，下一步是确保MSW能够成功拦截并模拟GraphQL请求。MSW在Node.js环境中拦截请求时，对URL的匹配方式与浏览器环境略有不同。此外，对于GraphQL请求，MSW提供了按操作名称匹配的强大功能。
3.1 调整fetch请求URL为绝对路径
在Node.js环境中，MSW的请求拦截器可能无法正确处理相对路径的请求。为了确保MSW能够可靠地拦截请求，建议在fetch调用中使用绝对路径。
src/store/favorites/utils.js:
export const FAVORITES_QUERY = `
query Favorites {
favorites
}
`;
export async function fetchFavorites() {
return fetch("http://example.com/graphql", { // 将相对路径改为绝对路径
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({ query: FAVORITES_QUERY })
})
.then((resp) => resp.json())
.then((result) => {
return result.data && result.data.favorites ? result.data.favorites : [];
})
.catch((err) => {
console.error("Error fetching favorites:", err); // 更好的错误处理
return undefined;
});
}注意事项：这里的http://example.com/graphql是一个占位符，您可以将其替换为任何有效的绝对URL，只要它与MSW处理程序中定义的拦截URL一致即可。重要的是它是一个完整的URL，而不是/graphql这样的相对路径。
3.2 MSW处理程序：按GraphQL操作名称匹配
对于GraphQL请求，MSW提供了一种更健壮的拦截方式：通过GraphQL操作名称（Operation Name）进行匹配，而不是仅仅依赖URL。这使得处理程序更加专注于业务逻辑，并能更好地适应不同的GraphQL端点URL。
src/__mocks__/handlers.js:
import { graphql } from 'msw';
export const handlers = [
// 拦截名为 'Favorites' 的GraphQL查询操作
graphql.query('Favorites', (req, res, ctx) => {
// 您可以通过 req.variables 访问请求的变量
// console.log('Intercepted Favorites query with variables:', req.variables);
return res(
ctx.data({
favorites: [1], // 返回模拟数据
}),
);
}),
// 如果有其他GraphQL操作，可以继续添加
// graphql.mutation('AddFavorite', (req, res, ctx) => { /* ... */ }),
];注意：FAVORITES_QUERY字符串中定义的query Favorites中的Favorites就是GraphQL操作名称。MSW的graphql.query()方法可以直接使用这个名称进行匹配。
3.3 MSW服务器配置
src/__mocks__/server.js保持不变，它负责初始化MSW服务器并导入处理程序。
src/__mocks__/server.js:
import { handlers } from "./handlers";
import { setupServer } from "msw/node";
export const server = setupServer(...handlers);4. 编写测试用例
现在，所有必要的配置都已到位，我们可以编写一个测试来验证fetchFavorites函数是否正确工作，并且MSW是否成功拦截了请求。
src/store/favorites/__tests__/utils.test.js:
import { fetchFavorites } from '../utils';
describe('fetchFavorites', () => {
it('应该成功获取收藏列表', async () => {
const mockFavorites = [1];
// 调用 fetchFavorites，MSW应该会拦截此请求并返回模拟数据
const favorites = await fetchFavorites();
expect(favorites).toEqual(mockFavorites);
});
it('应该在请求失败时返回 undefined', async () => {
// 模拟一个网络错误或服务器错误
server.use(
graphql.query('Favorites', (req, res, ctx) => {
return res(ctx.status(500), ctx.errors([{ message: 'Internal Server Error' }]));
})
);
const favorites = await fetchFavorites();
expect(favorites).toBeUndefined();
});
});运行您的测试：
npm test -- src/store/favorites/__tests__/utils.test.js # 或者 yarn test src/store/favorites/__tests__/utils.test.js
您应该会看到测试通过，这表明fetch已定义，并且MSW成功拦截了GraphQL请求并返回了模拟数据。
5. 总结与最佳实践
通过本文的指导，我们解决了在Jest和MSW环境中测试GraphQL请求时遇到的两个主要障碍：
- fetch polyfill: 使用isomorphic-fetch在Node.js测试环境中提供fetch API的实现。
-
MSW拦截优化:
- 在fetch请求中使用绝对路径，以确保MSW在Node.js环境中能够可靠地拦截请求。
- 利用MSW的graphql.query()或graphql.mutation()方法，通过GraphQL操作名称进行匹配，这是一种更健壮和语义化的拦截方式。
遵循这些步骤，您将能够构建一个稳定可靠的测试环境，有效模拟GraphQL请求，从而专注于您的React组件和业务逻辑的测试，提高代码质量和开发效率。记住，在编写测试时，始终优先考虑模拟外部依赖，以确保测试的隔离性、速度和可维护性。
