在现代react应用开发中，使用fetch api与graphql后端进行数据交互是常见模式。为了确保代码质量和功能正确性，编写单元测试至关重要。jest作为流行的javascript测试框架，结合msw（mock service worker）进行网络请求模拟，能够提供强大的测试能力。然而，在实际操作中，开发者可能会遇到一些挑战，特别是当测试环境为node.js时。本教程将深入探讨在jest和msw环境下测试graphql fetch请求时可能遇到的两个核心问题，并提供详细的解决方案。
1. 解决 ReferenceError: fetch is not defined 错误
当在Jest测试环境中运行包含fetch API调用的代码时，你可能会遇到ReferenceError: fetch is not defined的错误。这是因为Jest默认的测试环境是Node.js，而Node.js环境中原生并不提供浏览器fetch API。
问题原因： Jest的默认testEnvironment配置为node。在Node环境中，全局对象（global）不包含fetch函数，因此当你的代码尝试调用fetch时，就会抛出ReferenceError。
解决方案： 为了在Node环境中模拟fetch API，我们需要引入一个polyfill。isomorphic-fetch是一个常用的选择，它提供了在Node和浏览器环境中都能工作的fetch实现。
集成步骤：
-
安装 isomorphic-fetch：
npm install isomorphic-fetch --save-dev # 或者 yarn add isomorphic-fetch --dev
-
在 setupTests.js 中引入：setupTests.js（或你的Jest setup文件，例如jest.setup.js）是在每个测试文件运行前执行的脚本，是引入全局polyfill的理想位置。
// setupTests.js import '@testing-library/jest-dom'; // 如果你使用了react-testing-library import 'isomorphic-fetch'; // 引入fetch polyfill // MSW setup import { server } from './src/__mocks__/server'; beforeAll(() => server.listen()); afterEach(() => server.resetHandlers()); afterAll(() => server.close());
通过在setupTests.js中引入isomorphic-fetch，fetch函数将在所有测试运行前被全局定义，从而解决ReferenceError。
2. 确保 MSW 正确拦截 GraphQL 请求
即使fetch错误解决了，你可能还会发现MSW未能按预期拦截GraphQL请求，导致测试仍然尝试执行真实的网络请求，或者返回undefined等非预期结果。这通常与MSW在Node环境下的请求URL匹配机制以及GraphQL处理器配置有关。
问题原因：
- Node环境中的URL匹配： 在Node.js环境中，MSW在拦截请求时对URL的匹配更为严格。如果fetch请求使用的是相对URL（例如/graphql），MSW可能无法正确识别和拦截它，因为它期望一个完整的、绝对的URL。
- GraphQL处理器匹配： MSW的graphql.query或graphql.mutation处理器默认通过GraphQL操作名称（Operation Name）来匹配请求，而不是通过URL路径。
解决方案：
-
在 fetch 请求中使用绝对URL： 修改你的数据获取函数，使其在fetch调用中使用一个绝对URL。这个URL可以是任意有效的URL，只要它能被MSW识别即可。例如，你可以使用http://localhost/graphql或http://whatever.com/graphql。在测试环境中，这个URL并不会真正被访问，因为它会被MSW拦截。
// src/store/favorites/utils.js (修改后) export const FAVORITES_QUERY = ` query Favorites { favorites } `; export async function fetchFavorites() { // 注意：这里将相对URL "/graphql" 修改为绝对URL return fetch("http://whatever.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; }); } -
MSW处理器通过GraphQL操作名称匹配： 确保你的MSW graphql处理器使用GraphQL操作名称进行匹配。GraphQL操作名称是在GraphQL查询字符串中定义的，例如query Favorites中的Favorites。
// src/__mocks__/handlers.js (修改后) import { graphql } from 'msw'; // 注意：FAVORITES_QUERY 不再直接用于匹配，而是其操作名称 'Favorites' // import { FAVORITES_QUERY } from '../store/favorites/utils'; export const handlers = [ // 使用GraphQL操作名称 'Favorites' 进行匹配 graphql.query('Favorites', (req, res, ctx) => { return res( ctx.data({ favorites: [1], // 返回模拟数据 }), ); }), // 你可以添加其他GraphQL查询或变更的处理器 // graphql.mutation('AddFavorite', (req, res, ctx) => { /* ... */ }), ];
通过以上修改，fetchFavorites函数发出的请求将使用一个绝对URL，并且MSW的graphql.query处理器将通过匹配GraphQL操作名称Favorites来拦截该请求，返回预设的模拟数据。
完整示例代码结构与配置
为了更好地理解上述解决方案，以下是结合了所有修改后的文件结构和代码示例：
my-project
src
__mocks__
server.js
handlers.js
store
favorites
__tests__
utils.test.js
utils.js
setupTests.js
jestConfig.jsjestConfig.js
module.exports = {
// transform配置保持不变，用于处理JSX/TSX
transform: {
'^.+\\.jsx?$': 'babel-jest',
// 如果使用TypeScript，可能还需要配置ts-jest
// '^.+\\.tsx?$': 'ts-jest',
},
// 监听插件
watchPlugins: ['jest-watch-typeahead/filename', 'jest-watch-typeahead/testname'],
// 在测试环境设置文件后运行
setupFilesAfterEnv: ['./setupTests.js'],
// 确保testEnvironment是node，如果需要模拟浏览器DOM，则设为jsdom
// testEnvironment: 'jsdom', // 如果需要模拟浏览器DOM
};setupTests.js
import '@testing-library/jest-dom'; // 推荐，如果使用react-testing-library
import 'isomorphic-fetch'; // 解决 Node 环境中 fetch 未定义的问题
import { server } from './src/__mocks__/server';
// MSW 服务器生命周期管理
beforeAll(() => server.listen()); // 在所有测试开始前启动 MSW 服务器
afterEach(() => server.resetHandlers()); // 在每个测试后重置处理器，清除之前测试的影响
afterAll(() => server.close()); // 在所有测试结束后关闭 MSW 服务器src/__mocks__/server.js
import { handlers } from "./handlers";
import { setupServer } from "msw/node";
export const server = setupServer(...handlers);src/__mocks__/handlers.js
import { graphql } from 'msw';
export const handlers = [
// 拦截名为 'Favorites' 的 GraphQL 查询操作
graphql.query('Favorites', (req, res, ctx) => {
return res(
ctx.data({
favorites: [1], // 返回模拟数据
}),
);
}),
];src/store/favorites/utils.js
export const FAVORITES_QUERY = `query Favorites{
favorites
}`;
export async function fetchFavorites() {
// 使用绝对URL进行 fetch 请求，确保 MSW 能够拦截
return fetch("http://whatever.com/graphql", {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({ query: FAVORITES_QUERY })
})
.then((resp) => resp.json())
.then((result) => {
// 健壮性检查，确保 result.data 和 result.data.favorites 存在
return result.data && result.data.favorites ? result.data.favorites : [];
})
.catch((err) => {
console.error("Error fetching favorites:", err); // 打印错误以便调试
return undefined;
});
}src/store/favorites/__tests__/utils.test.js
import { fetchFavorites } from '../utils';
describe('fetchFavorites', () => {
it('should fetch favorites successfully', async () => {
const mockFavorites = [1];
// 调用 fetchFavorites，它将发出一个被 MSW 拦截的请求
const favorites = await fetchFavorites();
// 断言返回的数据与模拟数据一致
expect(favorites).toEqual(mockFavorites);
});
// 可以添加其他测试用例，例如错误处理
it('should handle fetch errors gracefully', async () => {
// 假设你有一个方法可以模拟服务器错误响应
// server.use(
// graphql.query('Favorites', (req, res, ctx) => {
// return res(ctx.errors([{ message: 'Something went wrong' }]));
// })
// );
// const favorites = await fetchFavorites();
// expect(favorites).toBeUndefined(); // 或者其他你期望的错误处理结果
});
});总结与注意事项
通过遵循上述步骤，你将能够成功地在Jest和MSW环境中测试你的React应用中的GraphQL fetch请求。
关键点回顾：
- fetch Polyfill： 在Node.js测试环境中，必须使用isomorphic-fetch等polyfill来提供fetch API。
- 绝对URL： 在测试中，fetch请求应使用绝对URL，以便MSW在Node环境中能够可靠地拦截。
- GraphQL操作名称匹配： MSW的graphql处理器通过GraphQL查询或变更的“操作名称”进行匹配，而不是URL路径。确保你的处理器配置正确。
- MSW生命周期： 在setupTests.js中正确设置beforeAll, afterEach, afterAll钩子，以确保MSW服务器的正确启动、重置和关闭。
遵循这些最佳实践，你将能够构建健壮、可靠的单元测试，有效模拟网络请求，从而专注于业务逻辑的测试，提高开发效率和代码质量。
