阿荡的个人网站

Appearance

在jest单元测试中模拟接口请求

jest 是前端常用的测试框架，可以用来测试我们手写的方法，比如下面的 sum 方法，

javascript
// sum.js
function sum(a, b) {
  return a + b;
}
module.exports = sum;
javascript
// sum.test.js
const sum = require("./sum");

test("adds 1 + 2 to equal 3", () => {
  expect(sum(1, 2)).toBe(3);
});

在运行 npm run test 时候，测试用例跑得非常快。但是如果方法中涉及到接口请求，接口响应很慢，测试用例跑起来会很慢。

比如下面这个例子，有个 getFirstAlbumTitle.js 文件，使用 axios 请求后端接口，代码如下：

javascript
// getFirstAlbumTitle.js
const axios = require("axios");

async function getFirstAlbumTitle() {
  const response = await axios.get(
    "https://jsonplaceholder.typicode.com/albums"
  );
  return response.data[0].title;
}

module.exports = getFirstAlbumTitle;

然后，我们要对它进行测试，getFirstAlbumTitle.test.js代码如下：

javascript
// getFirstAlbumTitle.test.js
const getFirstAlbumTitle = require("./getFirstAlbumTitle.js");

it("returns the title of the first album", async () => {
  const title = await getFirstAlbumTitle();
  expect(title).toEqual("quidem molestiae enim");
});

如果不模拟接口请求，每次跑测试用例，都会真实地请求albums接口，严重拖慢测试的速度。并且接口的响应值常常是不固定的，title 并不一定会返回 quidem molestiae enim，导致测试失败。

我们关心的其实不是接口是否返回了数据，应该是处理数据的逻辑是否正确——response.data[0].title ，所以我们可以模拟 axios 的返回值。

按照以下步骤，改造一下getFirstAlbumTitle.test.js

  1. 使用jest.mock()方法 mock 一下 axios 模块
  2. 使用 mockResolvedValue 方法模拟数据返回

完整的代码如下：

javascript
// getFirstAlbumTitle.test.js
const getFirstAlbumTitle = require("./getFirstAlbumTitle.js");
const axios = require("axios");

jest.mock("axios");

it("returns the title of the first album", async () => {
  axios.get.mockResolvedValue({
    data: [
      {
        userId: 1,
        id: 1,
        title: "My First Album",
      },
      {
        userId: 1,
        id: 2,
        title: "Album: The Sequel",
      },
    ],
  });

  const title = await getFirstAlbumTitle();
  expect(title).toEqual("My First Album");
});

这里面最核心的语句是jest.mock('axios')，意思是jest接管了axios的所有行为（方法），如果不使用mockResolvedValue方法，本文件中的axios的所有方法都将返回undefined：

javascript
const axios = require("axios");
jest.mock("axios");

// Does nothing, then returns undefined:
axios.get("https://www.google.com");

// Does nothing, then returns undefined:
axios.post("https://jsonplaceholder.typicode.com/albums", {
  id: 3,
  title: "Album with a Vengeance",
});

WARNING

jest.mock()应该在外层调用，而不是在it中调用。

一旦调用了jest.mock('axios')，在测试文件getFirstAlbumTitle.test.js中的所有axio请求都会被接管，包括在该文件中导入的getFirstAlbumTitle中的axios，其他测试文件不受影响。

这个方案有个缺点，就是模拟的数据和测试用例杂糅在一起，如果模拟的数据过于庞大，远超过测试用例的代码量，这就有点混乱了，测试用例应该注重逻辑的书写，而不是人为模拟的数据。

接下来改进这个方案，把模拟的数据和测试用例分开。

在项目根目录下新建一个__mocks__目录，大小写不能错，在__mocks__目录下，新建一个和axios相同名字的文件axios.js，加入如下代码：

javascript
// axios.js
module.exports = {
  get: function () {
    return new Promise(function (resolve) {
      resolve({
        data: [
          {
            userId: 1,
            id: 1,
            title: "My First Album",
          },
          {
            userId: 1,
            id: 2,
            title: "Album: The Sequel",
          },
        ],
      });
    });
  },
};

getFirstAlbumTitle.test.js修改如下

javascript
// getFirstAlbumTitle.test.js
const getFirstAlbumTitle = require("./getFirstAlbumTitle.js");
const axios = require("axios");

jest.mock("axios");

it("returns the title of the first album", async () => {
  const title = await getFirstAlbumTitle();
  expect(title).toEqual("My First Album");
});

如果想根据不同的接口返回不同的数据，需要改造下 axios.js 文件

javascript
module.exports = {
  get: function (apiPath) {
    // 根据apiPath返回不同的数据
    // ...
  },
};

注意，改进后的方案不适合模拟项目里自定义的接口请求模块，比如你写了一个模块 request.js，里面封装了 fetch。

为了模拟我们自己手写的封装好的自定义模块，只需要在和自定义模块的同一目录下，新建一个目录__mocks__，然后在__mocks__目录下新建一个和自定义模块相同名字的js文件就可以了。

举个例子，存在一个封装 fetch 的自定义模块，目录为modules/request.js，代码如下

javascript
// modules/request.js
function request(url, options = {}) {
  return fetch(url, options)
    .then((response) => {
      if (!response.ok) {
        throw new Error("Network response was not ok");
      }
      return response.json();
    })
    .catch((error) => {
      console.error("Fetch error:", error);
      throw error; // 重新抛出错误，以便调用者可以进一步处理
    });
}
module.exports = request;

getFirstAlbumTitle 方法使用 request 模块调用接口

javascript
// getFirstAlbumTitle.js
const request = require("./modules/request.js");

async function getFirstAlbumTitle() {
  const response = await request("https://jsonplaceholder.typicode.com/albums");
  return response.data[0].title;
}

module.exports = getFirstAlbumTitle;

想要在测试文件getFirstAlbumTitle.test.js中模拟 request 模块的返回值，需要新建一个文件modules/__mocks__/request.js，注意此时的__mocks__位置和request.js同一级。

在调用jest.mock模拟request.js的时候，应当把request.js的路径传进去：

javascript
// getFirstAlbumTitle.test.js
const getFirstAlbumTitle = require("./getFirstAlbumTitle.js");

jest.mock("./modules/request.js");

it("returns the title of the first album", async () => {
  const title = await getFirstAlbumTitle();
  expect(title).toEqual("My First Album");
});

下面写法是错的

javascript
const request = require("./modules/request.js");
jest.mock("request");

更新时间: