如何用 Jest 模拟 Axios？

我有一个函数client/index.js这是使用 axios 发出请求

import axios from "axios";

const createRequest = async (url, method) => {
    const response = await axios({
        url: url,
        method: method
    });
    return response;
};

export default { createRequest };

我想使用测试这个功能jest，所以我创建了client/index.test.js

import { jest } from "@jest/globals";
import axios from "axios";
    
import client from "./";

jest.doMock('axios', () => jest.fn(() => Promise.resolve()));

describe("Client", () => {

    it("should call axios and return a response", async () => {
        const response = await client.createRequest('http://localhost/', 'GET');

        expect(axios).toHaveBeenCalled();
    })
})

但是当我尝试运行它时，测试失败并且出现此错误

connect ECONNREFUSED 127.0.0.1:80

如果我使用模拟而不是 doMock，那么我会收到此错误 -

ReferenceError: /Users/project/src/client/index.test.js: The module factory of `jest.mock()` is not allowed to reference any out-of-scope variables.
    Invalid variable access: jest

package.json -

{
    "name": "project",
    "version": "0.0.1",
    "main": "index.js",
    "author": "author",
    "license": "MIT",
    "private": false,
    "type": "module",
    "scripts": {
        "start": "node --experimental-json-modules --experimental-specifier-resolution=node ./src/index.js",
        "start:dev": "nodemon --experimental-json-modules --experimental-specifier-resolution=node ./src/index.js",
        "test": "node --experimental-vm-modules node_modules/.bin/jest",
        "test:dev": "node --experimental-vm-modules node_modules/.bin/jest --watch",
        "test:coverage": "node --experimental-vm-modules node_modules/.bin/jest --coverage",
        "lint": "eslint --fix .",
        "pretty": "prettier --write ."
    },
    "dependencies": {
        "axios": "^0.21.1",
        "express": "^4.17.1"
    },
    "devDependencies": {
        "babel-eslint": "^10.1.0",
        "eslint": "^7.23.0",
        "jest": "^26.6.3",
        "prettier": "^2.2.1",
        "supertest": "^6.1.3"
    },
    "jest": { "testEnvironment": "node" }
}

我在节点环境中运行它，节点版本是14.16.0，开玩笑的版本是26.6.3。 请帮助确定这种方法有什么问题以及如何修复它。

我会推荐一种完全不同的方法来解决这个问题。而不是试图模拟 Axios，这是一个相对复杂的 API，你不拥有，使用类似的工具在网络边界进行测试msw https://mswjs.io/。这允许您自由地重构实现without需要更改测试，让您更有信心它仍然有效。你可以做这样的事情：

• 分解重复的配置axios.create({ baseURL: "http://localhost", ... });
• 针对请求切换到不同的库（例如node-fetch).

此外，如果 Axios API 发生更改，您的测试将开始失败，告诉你你的代码不再有效。使用测试替身，因为它仍然会实现以前的 API，所以您将获得通过但具有误导性的测试结果。

这种测试可能是这样的：请注意，Axios 根本没有被提及，它现在只是一个实现细节，我们只关心行为:

import { rest } from "msw";
import { setupServer } from "msw/node";

import client from "./";

const body = { hello: "world" };

const server = setupServer(
  rest.get("http://localhost", (_, res, ctx) => {
    return res(ctx.status(200), ctx.json(body))
  })
);

describe("Client", () => {
    beforeAll(() => server.listen());

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

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

    it("should call the API and return a response", async () => {
        const response = await client.createRequest("http://localhost/", "GET");

        expect(response).toMatchObject({ data: body, status: 200 });
    });
});

注意我必须使用.toMatchObject因为您公开了整个 Axios 响应对象，其中包含很多属性。对于您的客户来说，这不是一个好的 API，因为现在一切使用客户端就是消费Axios API；这会让你与它严重耦合，并削弱我上面提到的好处。

我不确定你打算如何使用它，但我倾向于完全隐藏传输层的细节 - 状态代码、标头等内容可能与消费者中的业务逻辑无关。现在你真的只有：

const createRequest = (url, method) => axios({ method, url });

此时您的消费者可能会直接使用 Axios。