Jest 单元测试中 mock 的原理和使用技巧详解-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，单元测试是一项非常重要的工作，可以帮助我们发现代码中的问题，提高代码质量。Jest 是一款流行的 JavaScript 测试框架，它提供了丰富的 API 和工具，可以帮助我们轻松地编写单元测试。其中，mock 是 Jest 中非常重要的一个概念，它可以模拟各种场景，让我们更加方便地编写测试用例。本文将详细介绍 Jest 中 mock 的原理和使用技巧，希望对你有所帮助。

什么是 mock？

在单元测试中，我们常常需要模拟一些场景，比如模拟网络请求返回数据、模拟用户操作等。这时候，我们就需要使用 mock。mock 的作用是模拟真实的数据或者操作，使得我们可以在测试中模拟各种场景，从而发现代码中的问题。

在 Jest 中，mock 有两种形式：

手动创建 mock
自动生成 mock

手动创建 mock 的方式比较灵活，可以完全控制 mock 的行为。自动生成 mock 的方式则比较便捷，可以快速地生成 mock，但是有时候可能无法满足我们的需求。下面我们将详细介绍这两种方式。

手动创建 mock

手动创建 mock 的方式比较灵活，可以完全控制 mock 的行为。我们可以通过 Jest 提供的 jest.fn() 方法来创建 mock 函数。jest.fn() 方法会返回一个新的 mock 函数，我们可以在测试中使用这个 mock 函数，模拟各种场景。

下面是一个示例代码：

// javascriptcn.com 代码示例
// 普通函数
function add(a, b) {
  return a + b;
}

// 创建 mock 函数
const mockAdd = jest.fn();

// 设置 mock 函数的返回值
mockAdd.mockReturnValue(3);

// 测试代码
test('add(1, 2) should return 3', () => {
  expect(mockAdd(1, 2)).toBe(3);
  expect(mockAdd).toHaveBeenCalledWith(1, 2);
});

在上面的示例代码中，我们首先定义了一个普通的函数 add，然后使用 jest.fn() 方法创建了一个 mock 函数 mockAdd。接着，我们调用了 mockAdd(1, 2)，并且期望它的返回值为 3。最后，我们使用 expect(mockAdd).toHaveBeenCalledWith(1, 2) 来验证 mockAdd 是否被正确调用。

除了使用 mockReturnValue() 方法设置 mock 函数的返回值之外，我们还可以使用 mockImplementation() 方法来设置 mock 函数的实现。mockImplementation() 方法接收一个函数作为参数，这个函数就是 mock 函数的实现。

下面是一个示例代码：

// javascriptcn.com 代码示例
// 普通函数
function getUserInfo() {
  // 发送网络请求，获取用户信息
}

// 创建 mock 函数
const mockGetUserInfo = jest.fn();

// 设置 mock 函数的实现
mockGetUserInfo.mockImplementation(() => {
  return {
    name: '张三',
    age: 18,
  };
});

// 测试代码
test('getUserInfo() should return { name: "张三", age: 18 }', () => {
  expect(mockGetUserInfo()).toEqual({
    name: '张三',
    age: 18,
  });
  expect(mockGetUserInfo).toHaveBeenCalled();
});

在上面的示例代码中，我们首先定义了一个函数 getUserInfo，它会发送网络请求，获取用户信息。然后使用 jest.fn() 方法创建了一个 mock 函数 mockGetUserInfo。接着，我们使用 mockImplementation() 方法设置了 mockGetUserInfo 的实现，使它直接返回一个对象。最后，我们调用了 mockGetUserInfo()，并且期望它的返回值为 { name: "张三", age: 18 }。

手动创建 mock 的方式比较灵活，可以完全控制 mock 的行为。但是，如果有很多函数需要 mock，手动创建会比较麻烦。这时候，我们可以考虑使用自动生成 mock 的方式。

自动生成 mock

在 Jest 中，我们可以使用自动生成 mock 的方式来快速生成 mock 函数。自动生成 mock 的方式可以帮助我们快速地生成 mock 函数，但是有时候可能无法满足我们的需求。下面我们将详细介绍如何使用自动生成 mock 的方式。

自动生成模块 mock

在 Jest 中，我们可以使用 jest.mock() 方法来自动生成模块的 mock。jest.mock() 方法接收一个模块路径作为参数，它会自动生成这个模块的 mock。我们可以在测试中使用这个 mock，模拟各种场景。

下面是一个示例代码：

// javascriptcn.com 代码示例
// user.js
export function getUserInfo() {
  // 发送网络请求，获取用户信息
}

// user.test.js
jest.mock('./user');

test('getUserInfo() should return { name: "张三", age: 18 }', () => {
  const { getUserInfo } = require('./user');
  getUserInfo.mockReturnValue({
    name: '张三',
    age: 18,
  });
  expect(getUserInfo()).toEqual({
    name: '张三',
    age: 18,
  });
  expect(getUserInfo).toHaveBeenCalled();
});

在上面的示例代码中，我们首先定义了一个模块 user，它里面有一个函数 getUserInfo，会发送网络请求，获取用户信息。然后在 user.test.js 文件中，使用 jest.mock() 方法自动生成 user 模块的 mock。接着，我们使用 require() 方法获取 user 模块，并且使用 mockReturnValue() 方法设置 getUserInfo 的返回值为 { name: "张三", age: 18 }。最后，我们调用了 getUserInfo()，并且期望它的返回值为 { name: "张三", age: 18 }。

自动生成类 mock

在 Jest 中，我们可以使用 jest.fn() 方法来自动生成类的 mock。jest.fn() 方法会返回一个新的 mock 函数，我们可以在测试中使用这个 mock 函数，模拟各种场景。

下面是一个示例代码：

// javascriptcn.com 代码示例
// user.js
export default class User {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  getName() {
    return this.name;
  }

  getAge() {
    return this.age;
  }
}

// user.test.js
import User from './user';

test('user.getName() should return "张三"', () => {
  const mockGetName = jest.fn().mockReturnValue('张三');
  const mockConstructor = jest.fn().mockImplementation(() => {
    return {
      getName: mockGetName,
    };
  });
  User.mockImplementation(mockConstructor);
  const user = new User('张三', 18);
  expect(user.getName()).toBe('张三');
  expect(mockConstructor).toHaveBeenCalledWith('张三', 18);
  expect(mockGetName).toHaveBeenCalled();
});

在上面的示例代码中，我们首先定义了一个类 User，它有两个方法 getName 和 getAge。然后在 user.test.js 文件中，使用 jest.fn() 方法自动生成 mock 函数。接着，我们使用 mockImplementation() 方法设置 mock 函数的实现，使它返回一个对象，这个对象里面有一个 getName 方法。最后，我们使用 User.mockImplementation() 方法设置 User 类的实现为 mockConstructor，这样在测试中就可以使用自动生成的 mock 函数了。

总结

在本文中，我们详细介绍了 Jest 中 mock 的原理和使用技巧。手动创建 mock 的方式比较灵活，可以完全控制 mock 的行为。自动生成 mock 的方式可以帮助我们快速地生成 mock 函数。无论是手动创建 mock 还是自动生成 mock，我们都可以在测试中模拟各种场景，从而发现代码中的问题。希望本文对你有所帮助，欢迎大家多多交流。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/657a7680d2f5e1655d4d0f2d