本文旨在解决在React应用中使用Jest和MSW测试GraphQL请求时常见的“fetch is not defined”错误以及MSW请求拦截失败的问题。我们将深入探讨如何在Node.js测试环境中正确配置fetch polyfill，并优化MSW处理程序以确保GraphQL请求能够被有效拦截和模拟，从而实现可靠的前端数据层测试。
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 polyfillimport { 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组件和业务逻辑的测试，提高代码质量和开发效率。记住，在编写测试时，始终优先考虑模拟外部依赖，以确保测试的隔离性、速度和可维护性。
以上就是在React应用中结合Jest和MSW测试GraphQL请求的指南的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1520047.html
微信扫一扫 
支付宝扫一扫 
