本教程详细讲解了在基于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.js module.exports = {   transform: {     '^.+.jsx?$': 'babel-jest',   },   watchPlugins: ['jest-watch-typeahead/filename', 'jest-watch-typeahead/testname'],   setupFilesAfterEnv: ['./setupTests.js'], };

setupTests.js用于在每个测试文件运行前设置MSW服务器：

// src/setupTests.js import { server } from './src/__mocks__/server';  beforeAll(() => server.listen()); // 在所有测试前启动MSW服务器 afterEach(() => server.resetHandlers()); // 在每个测试后重置处理器 afterAll(() => server.close()); // 在所有测试后关闭MSW服务器

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'; 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.js export 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.js import { fetchFavorites } from '../utils';  describe('fetchFavorites', () => {   it('should fetch favorites successfully', async () => {     const mockFavorites = [1];     const favorites = await fetchFavorites();     expect(favorites).toEqual(mockFavorites);   }); });

在上述配置下运行测试，我们可能会遇到两个主要问题。

Brizy

Brizy是一个面向机构和 SaaS 的白标网站生成器，可以在几分钟内创建网站页面。

166

查看详情

解决“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实现。

操作步骤：

1. 安装isomorphic-fetch:

   npm install isomorphic-fetch --save-dev # 或 yarn add isomorphic-fetch --dev

2. 在setupTests.js中引入: 修改setupTests.js文件，在MSW服务器启动前引入isomorphic-fetch。

   // src/setupTests.js (更新后) import 'isomorphic-fetch'; // 引入fetch polyfill import { 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的处理器识别并匹配。

操作步骤：

1. 修改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。

2. 优化MSW GraphQL处理器匹配 (推荐): 虽然MSW可以匹配完整的GraphQL查询字符串，但更健壮的做法是使用GraphQL操作名称（Operation Name）进行匹配。这样即使查询的格式或字段顺序略有变化，只要操作名称不变，MSW也能正确拦截。

    // src/__mocks__/handlers.js (更新后) import {