Jest Mock 最佳实践：mockProperties, mockMethods 和 spy 相结合

在前端开发中，我们经常需要进行单元测试以确保代码的正确性和可靠性。而 Jest 是一个非常流行的 JavaScript 测试框架，它提供了丰富的测试工具和 API，可以帮助我们轻松地编写和运行测试代码。其中，Mock 是 Jest 中非常重要的一个概念，它可以模拟出需要测试的代码所依赖的外部环境，从而使测试更加独立和可靠。

在 Jest 中，我们可以使用 mockProperties、mockMethods 和 spy 这三个工具相结合来进行 Mock，这样可以达到最佳的 Mock 效果。本文将详细介绍这三个工具的使用方法和注意事项，帮助大家更好地进行前端单元测试。

mockProperties

mockProperties 是 Jest 中用来模拟对象属性的 API，它可以帮助我们创建一个与原对象相似但具有自定义值的对象。使用 mockProperties 可以很方便地测试代码中对对象属性的读取和修改操作，从而保证代码的正确性。

下面是一个示例代码：

// 原对象
const obj = {
  a: 1,
  b: 2,
};

// 测试代码
test('test obj', () => {
  const mockObj = {
    a: 3,
    c: 4,
  };
  const spy = jest.spyOn(mockObj, 'a');
  expect(mockObj.a).toBe(3);
  expect(mockObj.b).toBeUndefined();
  expect(mockObj.c).toBe(4);
  mockObj.a = 5;
  expect(mockObj.a).toBe(5);
  expect(spy).toHaveBeenCalled();
});

在上面的代码中，我们使用 mockProperties 创建了一个新的对象 mockObj，它与原对象 obj 相似但具有自定义值。我们使用 expect 断言来测试 mockObj 的属性值，并使用 mockObj.a = 5 来修改属性值。同时，我们还使用了 jest.spyOn 方法来监视 mockObj.a 的调用情况，以确保代码的正确性。

mockMethods

mockMethods 是 Jest 中用来模拟对象方法的 API，它可以帮助我们创建一个与原对象相似但具有自定义行为的对象。使用 mockMethods 可以很方便地测试代码中对对象方法的调用和返回值，从而保证代码的正确性。

下面是一个示例代码：

// 原对象
const obj = {
  a() {
    return 1;
  },
  b() {
    return 2;
  },
};

// 测试代码
test('test obj', () => {
  const mockObj = {
    a() {
      return 3;
    },
    c() {
      return 4;
    },
  };
  const spyA = jest.spyOn(mockObj, 'a');
  const spyC = jest.spyOn(mockObj, 'c');
  expect(mockObj.a()).toBe(3);
  expect(mockObj.b()).toBeUndefined();
  expect(mockObj.c()).toBe(4);
  expect(spyA).toHaveBeenCalled();
  expect(spyC).toHaveBeenCalled();
});

在上面的代码中，我们使用 mockMethods 创建了一个新的对象 mockObj，它与原对象 obj 相似但具有自定义行为。我们使用 expect 断言来测试 mockObj 的方法调用和返回值，并使用 jest.spyOn 方法来监视 mockObj.a 和 mockObj.c 的调用情况，以确保代码的正确性。

spy

spy 是 Jest 中用来监视函数调用情况的 API，它可以帮助我们测试函数的调用次数、传入参数和返回值等信息。使用 spy 可以很方便地测试代码中对函数的调用情况，从而保证代码的正确性。

下面是一个示例代码：

// 原函数
function add(a, b) {
  return a + b;
}

// 测试代码
test('test add', () => {
  const spy = jest.spyOn(global, 'add');
  expect(add(1, 2)).toBe(3);
  expect(spy).toHaveBeenCalled();
  expect(spy).toHaveBeenCalledWith(1, 2);
});

在上面的代码中，我们使用 jest.spyOn 方法来监视全局的 add 函数，然后使用 expect 断言来测试函数的返回值和调用情况。我们还使用了 expect(spy).toHaveBeenCalledWith(1, 2) 来测试函数的传入参数是否正确。

结合使用

在实际的测试中，我们经常需要同时使用 mockProperties、mockMethods 和 spy 这三个工具来进行 Mock。下面是一个示例代码：

// 原对象
const obj = {
  a() {
    return 1;
  },
  b() {
    return 2;
  },
};

// 测试代码
test('test obj', () => {
  const mockObj = {
    a() {
      return 3;
    },
    c: 4,
  };
  const spyA = jest.spyOn(mockObj, 'a');
  const spyB = jest.spyOn(obj, 'b');
  const spyAdd = jest.spyOn(global, 'add');
  mockObj.a();
  obj.b();
  expect(mockObj.a()).toBe(3);
  expect(mockObj.b()).toBeUndefined();
  expect(mockObj.c).toBe(4);
  expect(add(1, 2)).toBe(3);
  expect(spyA).toHaveBeenCalled();
  expect(spyB).toHaveBeenCalled();
  expect(spyAdd).toHaveBeenCalled();
});

在上面的代码中，我们使用 mockProperties 和 mockMethods 创建了两个新的对象 mockObj 和 obj，它们与原对象相似但具有自定义值和行为。我们还使用了 jest.spyOn 方法来监视 mockObj.a、obj.b 和全局的 add 函数的调用情况。最后，我们使用 expect 断言来测试对象的属性和方法的返回值，以及函数的调用情况。

总结

在 Jest 中，Mock 是单元测试中非常重要的一个概念，它可以帮助我们模拟出需要测试的代码所依赖的外部环境，从而使测试更加独立和可靠。而 mockProperties、mockMethods 和 spy 这三个工具相结合可以达到最佳的 Mock 效果。在实际的测试中，我们经常需要同时使用这三个工具来进行 Mock，以保证代码的正确性和可靠性。

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