本文详细阐述了在react应用中使用Jest和MSW测试graphql fetch请求时遇到的两个常见问题及其解决方案。首先，针对Jest测试环境（node）中fetch未定义错误，引入isomorphic-fetch进行polyfill。其次，为了确保MSW能正确拦截请求，指导如何将fetch请求URL修改为绝对路径，并利用GraphQL操作名称进行MSW处理器匹配。通过这些步骤，可实现GraphQL请求的可靠模拟测试。
在现代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.js
jestConfig.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服务器的正确启动、重置和关闭。
遵循这些最佳实践，你将能够构建健壮、可靠的单元测试，有效模拟网络请求，从而专注于业务逻辑的测试，提高开发效率和代码质量。
评论（已关闭）
评论已关闭