本教程详细讲解了在基于Create React App的React项目中，使用Jest和MSW测试GraphQL fetch请求时遇到的常见问题及解决方案。主要涵盖了在Node环境中fetch未定义的错误，以及MSW无法拦截相对路径请求的问题。通过引入isomorphic-fetch polyfill和配置绝对URL，并优化MSW处理器匹配策略，确保测试环境能正确模拟GraphQL API调用，从而实现可靠的前端组件测试。
在现代前端应用开发中，使用react、jest和msw (mock service worker) 库来测试与后端api（尤其是graphql）的交互是一种高效且流行的实践。然而，在配置和执行这类测试时，开发者常常会遇到一些挑战，例如在node.js测试环境中fetch函数未定义，以及msw无法正确拦截请求的问题。本教程将深入探讨这些问题，并提供详细的解决方案和最佳实践。
初始项目结构与配置
假设我们有一个典型的Create React App项目，其核心测试相关文件结构如下：
my-project src __mocks__ server.js // MSW服务器配置 handlers.js // MSW请求处理器 store favorites __tests__ utils.test.js // 测试文件 utils.js // 包含fetch请求的业务逻辑 setupTests.js // Jest setup文件 jestConfig.js // Jest配置
jestConfig.js的初始配置可能如下：
// jestConfig.jsmodule.exports = { transform: { '^.+.jsx?$': 'babel-jest', }, watchPlugins: ['jest-watch-typeahead/filename', 'jest-watch-typeahead/testname'], setupFilesAfterEnv: ['./setupTests.js'],};
setupTests.js用于在每个测试文件运行前设置MSW服务器：
// src/setupTests.jsimport { server } from './src/__mocks__/server';beforeAll(() => server.listen()); // 在所有测试前启动MSW服务器afterEach(() => server.resetHandlers()); // 在每个测试后重置处理器afterAll(() => server.close()); // 在所有测试后关闭MSW服务器
MSW服务器和处理器定义：
// src/__mocks__/server.jsimport { handlers } from "./handlers";import { setupServer } from "msw/node";export const server = setupServer(...handlers);
// src/__mocks__/handlers.jsimport { graphql } from 'msw';import { FAVORITES_QUERY } from '../store/favorites/utils'; // 注意：此处的FAVORITES_QUERY是完整的GraphQL查询字符串export const handlers = [ graphql.query(FAVORITES_QUERY, (req, res, ctx) => { return res( ctx.data({ favorites: [1], }), ); })];
业务逻辑中的fetch请求：
// src/store/favorites/utils.jsexport const FAVORITES_QUERY = `query Favorites{ favorites}`;export async function fetchFavorites() { return fetch("/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; });}
测试文件：
// src/store/favorites/__tests__/utils.test.jsimport { fetchFavorites } from '../utils';describe('fetchFavorites', () => { it('should fetch favorites successfully', async () => { const mockFavorites = [1]; const favorites = await fetchFavorites(); expect(favorites).toEqual(mockFavorites); });});
在上述配置下运行测试，我们可能会遇到两个主要问题。
爱图表
AI驱动的智能化图表创作平台
305 查看详情
解决“ReferenceError: fetch is not defined”错误
问题分析：当在Jest环境中运行测试时，如果Jest的testEnvironment配置为默认值node（或未显式配置，而CRA默认使用jsdom，但在此特定问题场景下，用户可能在自定义Jest配置时改变了环境或遇到了其他Node环境下的测试情况），Node.js环境本身并没有内置fetch函数。因此，当fetchFavorites函数尝试调用fetch时，会抛出ReferenceError: fetch is not defined。
解决方案：为了在Node.js环境中模拟浏览器级的fetch API，我们需要引入一个fetch的polyfill。isomorphic-fetch是一个常用的选择，它提供了在浏览器和Node.js环境中都能工作的fetch实现。
操作步骤：
安装isomorphic-fetch:
npm install isomorphic-fetch --save-dev# 或 yarn add isomorphic-fetch --dev
在setupTests.js中引入:修改setupTests.js文件，在MSW服务器启动前引入isomorphic-fetch。
// src/setupTests.js (更新后)import 'isomorphic-fetch'; // 引入fetch polyfillimport { server } from './src/__mocks__/server';beforeAll(() => server.listen());afterEach(() => server.resetHandlers());afterAll(() => server.close());
通过这一改动，fetch is not defined的错误将得到解决。
确保MSW正确拦截请求
问题分析：即使fetch错误解决了，你可能会发现MSW仍然没有拦截到fetchFavorites发出的请求，导致测试返回undefined或其他非预期结果。这是因为在Node.js环境中，MSW的请求拦截器要求fetch函数使用绝对URL。而我们的fetchFavorites中使用了相对路径/graphql。MSW在Node环境中无法拦截相对路径的请求。
解决方案：我们需要修改fetchFavorites函数，使其在测试时使用一个绝对URL。这个URL可以是任意有效的HTTP/HTTPS地址，只要它能被MSW的处理器识别并匹配。
操作步骤：
修改fetchFavorites使用绝对URL:将fetch请求的URL从相对路径改为绝对路径。例如，可以使用http://localhost/graphql或http://whatever.com/graphql。
// src/store/favorites/utils.js (更新后)export const FAVORITES_QUERY = `query Favorites{ favorites}`;export async function fetchFavorites() { // 将相对路径 '/graphql' 改为绝对路径，例如 'http://localhost/graphql' 或 'http://whatever.com/graphql' return fetch("http://localhost/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; });}
注意: 在实际应用中，你可能需要根据不同的环境（开发、测试、生产）动态配置这个URL。例如，在测试环境中，可以通过环境变量或Jest的globals配置来注入一个测试用的基础URL。
优化MSW GraphQL处理器匹配 (推荐):虽然MSW可以匹配完整的GraphQL查询字符串，但更健壮的做法是使用GraphQL操作名称（Operation Name）进行匹配。这样即使查询的格式或字段顺序略有变化，只要操作名称不变，MSW也能正确拦截。
// src/__mocks__/handlers.js (更新后)import {
以上就是在Jest和MSW中测试React GraphQL Fetch请求的完整指南的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/743990.html
微信扫一扫 
支付宝扫一扫 
