Jest与MSW测试GraphQL请求全攻略

本文针对React应用中使用Jest和MSW测试GraphQL fetch请求时遇到的常见问题，提供了详细的解决方案。在Jest的Node测试环境中，由于缺少fetch API，需要引入`isomorphic-fetch`进行polyfill。同时，为了确保MSW能够正确拦截请求，需要将fetch请求URL修改为绝对路径，并利用GraphQL操作名称进行MSW处理器匹配。通过修改数据获取函数，使用绝对URL发起fetch调用，并配置MSW处理器，根据GraphQL操作名称进行匹配，从而实现对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实现。

集成步骤：

1. 安装 isomorphic-fetch：

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

2. 在 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处理器配置有关。

问题原因：

1. Node环境中的URL匹配： 在Node.js环境中，MSW在拦截请求时对URL的匹配更为严格。如果fetch请求使用的是相对URL（例如/graphql），MSW可能无法正确识别和拦截它，因为它期望一个完整的、绝对的URL。
2. GraphQL处理器匹配： MSW的graphql.query或graphql.mutation处理器默认通过GraphQL操作名称（Operation Name）来匹配请求，而不是通过URL路径。

解决方案：

1. 在 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;
       });
   }

2. 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服务器的正确启动、重置和关闭。

遵循这些最佳实践，你将能够构建健壮、可靠的单元测试，有效模拟网络请求，从而专注于业务逻辑的测试，提高开发效率和代码质量。

到这里，我们也就讲完了《Jest与MSW测试GraphQL请求全攻略》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！