如何在 Jest 中使用 Mock Function 进行测试？

什么是 Mock Function？

Mock Function 是一个 Jest 中的模拟函数，可以在测试代码中替换掉实际的函数，用于测试时创造假数据，模拟函数的行为，从而使得测试变得更加简单和可预测。

使用 Mock Function 可以避免测试时依赖外部服务的影响、增加测试的可靠性，以及复杂测试的可读性和可维护性。

如何在 Jest 中创建 Mock Function？

在 Jest 中创建 Mock Function 很简单，只需要在测试代码中使用 jest.fn() 方法即可：

const mockFn = jest.fn();

或者使用 jest.spyOn() 方法来创建一个已经存在的对象或者函数的 Mock Function：

const myObject = {
  myMethod: (data) => { return data.toUpperCase() }
};

const mockFn = jest.spyOn(myObject, 'myMethod');

如何使用 Mock Function 进行测试？

Mock Function 可以用于多种测试场景，例如模拟 API 调用、模拟异步调用、模拟 DOM 操作等。

以下是一个简单的示例，展示了如何使用 Mock Function 模拟 API 调用，以及如何断言 Mock Function 被调用过：

// api.js
export const fetchData = async () => {
  const response = await fetch('https://jsonplaceholder.typicode.com/posts');
  const data = await response.json();
  return data;
};

// api.test.js
import { fetchData } from './api';

describe('test fetchData', () => {
  test('fetchData should be called', async () => {
    const mockFetchData = jest.fn();
    mockFetchData.mockReturnValue({ data: [{ id: 1, title: 'mock title' }] });
    await fetchData(mockFetchData);
    expect(mockFetchData).toHaveBeenCalled();
  });
});

如何配置 Mock Function？

Mock Function 支持多种配置选项来模拟不同的情况。以下是一些常见的配置选项：

• mockFn.mockReturnValue(value)：设置函数的返回值。
• mockFn.mockResolvedValue(value)：设置异步函数的返回值。
• mockFn.mockRejectedValue(value)：设置异步函数的异常值。
• mockFn.mockImplementation(fn)：设置函数的行为，可用于模拟复杂函数的行为。

以下是一个示例，展示了如何使用 mockReturnValue() 方法设置函数的返回值，以及如何断言返回值：

// math.js
export const add = (a, b) => a + b;

// math.test.js
import { add } from './math';

describe('test add', () => {
  test('add should return 3', () => {
    const mockAdd = jest.fn();
    mockAdd.mockReturnValue(3);
    const result = add(1, 2, mockAdd);
    expect(result).toBe(3);
    expect(mockAdd).toHaveBeenCalled();
  });
});

总结

Mock Function 是 Jest 中的一个非常实用的测试工具，可以帮助我们简化测试，增加测试的可靠性和可维护性。在使用 Mock Function 进行测试时，需要注意合理的配置选项，从而模拟出不同的测试场景。

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