Question

我在 import axios from "axios"; const createRequest = async (url, method) => { const response = await axios({ url: url, method: method }); return response; }; export default { createRequest }; 中有一个函数，它使用 axios 发出请求

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

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

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

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

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

我在 node env 中运行它，node 版本是 26.6.3，jest 版本是 BF.MEXISTS key item1 item2 item3。请帮助确定这种方法有什么问题以及如何解决。

Answer 1

jest.doMock(moduleName, factory, options) 方法不会自动提升到代码块的顶部。这意味着 axios 函数中使用的 createRequest 函数仍将是原始函数。

您需要使用 jest.mock()。

例如

index.js：

import axios from 'axios';

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

export default { createRequest };

index.test.js：

import axios from 'axios';
import client from './';

jest.mock('axios', () => jest.fn(() => Promise.resolve('teresa teng')));

describe('Client', () => {
  it('should call axios and return a response', async () => {
    const response = await client.createRequest('http://localhost/', 'GET');
    expect(axios).toHaveBeenCalled();
    expect(response).toEqual('teresa teng');
  });
});

单元测试结果：

 PASS  examples/67101502/index.test.js (11.503 s)
  Client
    ✓ should call axios and return a response (4 ms)

----------|---------|----------|---------|---------|-------------------
File      | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s 
----------|---------|----------|---------|---------|-------------------
All files |     100 |      100 |     100 |     100 |                   
 index.js |     100 |      100 |     100 |     100 |                   
----------|---------|----------|---------|---------|-------------------
Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        13.62 s

Answer 2

我会推荐一种完全不同的方法来解决这个问题。与其尝试模拟 Axios（您不拥有的相对复杂的 API），不如使用 msw 之类的工具在网络边界进行测试。这使您可以自由地重构实现，无需更改测试，让您更有信心它仍在工作。您可以执行以下操作：

将重复的配置分解为 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。

如何用 Jest 模拟 Axios？

2 个答案: