Jest.js MSW不会拦截API请求

cbjzeqam  于 2023-05-11  发布在  Jest
关注(0)|答案(1)|浏览(130)

我正在尝试为一个简单的API请求创建一个mock service worker:/src/api/Sectors.js

export const getSectors = async (token)=>{
    const requestOptions = {
        method: "GET",
        headers: {
            "Content-Type": "application/json",
            Authorization: "Bearer " + token,
        },
    };
    try{
        const response = await fetch("/api/sector/list", requestOptions);
        if(!response.ok){
            return{error:`Request failed with status ${response.status}`}
        }else{
            const data = await response.json();
            return data;
        }
    } catch (error){
        return{ error : "Request failed"}
    }
};

我的设置文件是:
jest.setup.js:

import "@testing-library/jest-dom";
import {server} from 'src/mocks/server.js';

beforeAll(() => {
  server.listen()
  console.log('server listening')
});

afterEach(() => server.resetHandlers());

afterAll(() => server.close());

jest.config.js:

const TEST_REGEX = "(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|js?|tsx?|ts?)$";

module.exports = {
  testRegex: TEST_REGEX,
  transform: {
    // "^.+\\.tsx?$": "ts-jest",
    "^.+\\.jsx?$": "babel-jest",
    // "^.+\\.mjs$": "babel-jest",
  },
  testPathIgnorePatterns: ["<rootDir>/build/", "<rootDir>/node_modules/", "<rootDir>/dist/"],
  moduleFileExtensions: ["ts", "tsx", "js", "jsx", "json"],
  moduleNameMapper: {
    "^~(.*)$": "<rootDir>/src/$1"
  },
  modulePaths: ["<rootDir>"],
  testEnvironment: "node",
  setupFilesAfterEnv: ["<rootDir>/jest.setup.js"],
}

我的MSW设置是:
/src/mocks/handlers.js:

import { rest } from "msw";

export const handlers = [
    rest.get("/api/sector/list", (req, res, ctx) => {
    console.log('api sector list')
    const token = req.headers.get("Authorization");

    if (!token) {
      return res(
        ctx.status(401),
        ctx.json({ error: "Authorization token is missing" })
      );
    }

    return res(
      ctx.status(200),
      ctx.json([
        { id: 1, name: "Sector 1" },
        { id: 2, name: "Sector 2" },
      ])
    );
  }),
]

/src/mocks/server.js:

import { setupServer } from 'msw/node';
import { handlers } from './handlers';

export const server = setupServer(...handlers);

我的测试是
/tests/Sectors.test.js:

import { getSectors } from 'src/api/Sectors';
  it("should fetch sectors successfully", async () => {
    const token = "fakeToken";
    const sectors = await getSectors(token);

    expect(sectors).toEqual([
      { id: 1, name: "Sector 1" },
      { id: 2, name: "Sector 2" },
    ]);
  });

在日期更多的控制台日志在handrels从来没有打印,我asume thar mws从来没有拦截API调用。

hgqdbh6s

hgqdbh6s1#

我通过使用“whatwg-fetch”库在我的测试环境中包含“fetch”函数来解决这个问题:

import 'whatwg-fetch';
import '@testing-library/jest-dom';
import { server } from './src/mocks/server';

beforeAll(() => {
  server.listen();
  console.log('Server is listening...');
});

afterEach(() => {
  server.resetHandlers();
});

afterAll(() => {
  server.close();
});

通过导入“whatwg-fetch”,我可以使用“fetch”函数在我的React组件中发出HTTP请求。这个库为不支持Fetch API的浏览器提供了一个一致和现代的Fetch API实现,确保我的应用程序可以在不同的环境中以可靠和一致的方式发出HTTP请求。

相关问题