Jest与MSW测试ReactGraphQL教程

小伙伴们对文章编程感兴趣吗？是否正在学习相关知识点？如果是，那么本文《Jest与MSW测试React GraphQL请求全攻略》，就很适合你，本篇文章讲解的知识点主要包括。在之后的文章中也会多多分享相关知识点，希望对大家的知识积累有所帮助！

本教程详细讲解了在基于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);
  });
});

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

解决“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 {

以上就是《Jest与MSW测试ReactGraphQL教程》的详细内容，更多关于的资料请关注golang学习网公众号！