在React中使用Jest和MSW测试GraphQL Fetch请求：完整指南-js教程-PHP中文网

在React中使用Jest和MSW测试GraphQL Fetch请求：完整指南

本文详细阐述了在React应用中使用Jest和MSW测试GraphQL fetch请求时遇到的两个常见问题及其解决方案。首先，针对Jest测试环境（Node）中fetch未定义错误，引入isomorphic-fetch进行polyfill。其次，为了确保MSW能正确拦截请求，指导如何将fetch请求URL修改为绝对路径，并利用GraphQL操作名称进行MSW处理器匹配。通过这些步骤，可实现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实现。

集成步骤：

安装 isomorphic-fetch：

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

登录后复制

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

问题原因：

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

解决方案：

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

登录后复制

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来拦截该请求，返回预设的模拟数据。

完整示例代码结构与配置

为了更好地理解上述解决方案，以下是结合了所有修改后的文件结构和代码示例：

面试猫

AI面试助手，在线面试神器，助你轻松拿Offer

查看详情

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

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

以上就是在React中使用Jest和MSW测试GraphQL Fetch请求：完整指南的详细内容，更多请关注php中文网其它相关文章！