如何用Jest模拟Axios? [英] How to mock Axios with Jest?

问题描述

我在 client/index.js 中有一个函数，该函数使用axios发出请求

I have a function in client/index.js which is using axios to make a request

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

I want to test this function using jest, so I created 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();
    })
})

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

But when I try to run this, the test is failing and I am getting this error

connect ECONNREFUSED 127.0.0.1:80

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

If I use mock instead of doMock, then I am getting this error -

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 .请帮助确定这种方法的错误以及如何解决.

I am running this in node env and node version is 14.16.0, jest version is 26.6.3. Please help to identify what is wrong in this approach and how to fix it.

推荐答案

我建议采用一种完全不同的方法来解决此问题.与其尝试模拟Axios(这是一个您没有拥有的相对复杂的API)，而不是使用 msw .这使您可以自由重构实现 ，而无需更改测试，从而使您更有信心它仍在工作.您可以执行以下操作:

I would recommend an entirely different way of approaching this. Rather than trying to mock Axios, which is a relatively complicated API that you don't own, test at the network boundary using a tool like msw. This allows you to freely refactor the implementation without needing to change the tests, giving you more confidence it's still working. You could do things like:

• 因素重复配置为 axios.create({baseURL:" http://localhost" ;, ...});
• 切换到其他请求库(例如 node-fetch ).

如果Axios API更改，您的测试也会开始失败，告诉您的代码不再起作用.进行两次测试，因为仍然可以实现以前的API，因此您的测试结果会通过但会产生误导.

Also if the Axios API changed your tests would start failing, telling you your code no longer works. With a test double, as that would still implement the previous API, you'd have passing but misleading test results.

以下是这种测试的外观；请注意，根本没有提到Axios，现在只是实现细节，我们只关心行为:

Here's how that kind of test might look; note that Axios isn't mentioned at all, it's just an implementation detail now and we only care about the behaviour:

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.这使您与之紧密相连，并稀释了我上面提到的好处.

Note I've had to use .toMatchObject because you're exposing the whole Axios response object, which contains a lot of properties. This isn't a good API for your client, because now everything using the client is consuming the Axios API; this makes you heavily coupled to it, and dilutes the benefits I mentioned above.

我不确定您打算如何使用它，但我倾向于完全隐藏传输层的详细信息-状态代码，标头等之类的内容可能与其中的业务逻辑无关消费者.现在，您真的可以拥有:

I'm not sure how you're planning to use it, but I'd be inclined to hide the details of the transport layer entirely - things like status codes, headers etc. are not likely relevant to the business logic in the consumer. Right now you really just have:

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

此时，您的消费者也可能直接使用Axios.

at which point your consumers might as well just be using Axios directly.

这篇关于如何用Jest模拟Axios?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！