在React应用中结合Jest和MSW测试GraphQL请求的指南-js教程-PHP中文网

在React应用中结合Jest和MSW测试GraphQL请求的指南

霞舞

发布： 2025-09-14 10:23:01

原创

675人浏览过

在React应用中结合Jest和MSW测试GraphQL请求的指南

本文旨在解决在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 polyfill

import { 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。

AppMall应用商店

AI应用商店，提供即时交付、按需付费的人工智能应用服务

查看详情

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请求的指南的详细内容，更多请关注php中文网其它相关文章！