如何在 Jest 测试框架中 mock 复杂模块

Jest 是一个流行的前端测试框架，它可以方便地编写和运行测试，但在实现测试过程中，很多时候需要 mock 外部依赖项。这对于测试功能的正确性至关重要。当我们遇到复杂的模块时，mock 可能会更具挑战性。本文将介绍如何使用 Jest 中的 mock 功能来 mock 复杂的模块。

mock 复杂的模块

在 Jest 中，我们可以使用 jest.mock 函数来 mock 一个模块。但是，当我们需要 mock 一个非常复杂的模块时，可能需要花费大量的时间和精力来实现正确的 mock。下面是一些可能需要考虑的情况：

模块具有多个导出项

一个模块可能有多个导出项，它们可能是普通的值、对象、函数等等。这时我们需要 mock 所有被引用的导出项。对于不需要 mock 的导出项可以直接赋值一个空值或者使用 jest.fn 函数。

// javascriptcn.com 代码示例
// foo.js
export const myString = 'hello';
export const myObj = { name: 'John' };
export function myFunc() {
  return 'World!';
}

// test.js
jest.mock('./foo', () => ({
  myString: 'world',
  myObj: {},
  myFunc: jest.fn(),
}))

模块包含类

当我们 mock 一个包含类的模块时，我们需要确保类的实例被正确的 mock。类的实例可以包含属性和方法，我们需要使用 jest.fn() 或者手动 mock 函数来模拟这些属性和方法。

// javascriptcn.com 代码示例
// bar.js
export class Person {
  constructor(name) {
    this.name = name;
  }
  
  greet() {
    return `Hello, ${this.name}!`;
  }
}

// test.js
import { Person } from './bar';

jest.mock('./bar', () => {
  const originalModule = jest.requireActual('./bar');
  const mockPerson = jest.fn().mockImplementation((name) => ({
    name,
    greet: jest.fn().mockReturnValue(`Hello, ${name}!`),
  }));

  return {
    ...originalModule,
    Person: mockPerson,
  }
});

test('should create a valid Person object', () => {
  const person = new Person('John');

  expect(person.name).toBe('John');
  expect(person.greet()).toBe('Hello, John!');
});

模块包含异步操作

当模块包含异步操作时，我们需要 mock 相关的异步操作以便测试能够完成。我们可以使用 jest.fn() 或者手动 mock 函数来模拟异步操作。

// javascriptcn.com 代码示例
// baz.js
export async function fetchData() {
  const response = await fetch('https://jsonplaceholder.typicode.com/todos/1');
  const data = await response.json();
  return data;
}

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

jest.mock('./baz', () => {
  const originalModule = jest.requireActual('./baz');

  return {
    ...originalModule,
    fetchData: jest.fn().mockResolvedValue({ id: 1, title: 'mocked' }),
  };
});

test('should fetch data', async () => {
  const data = await fetchData();

  expect(data).toEqual({ id: 1, title: 'mocked' });
});

总结

mock 是一个测试应用程序的关键组成部分，它使得测试应用程序成为可能。使用 Jest 的 mock 功能，我们可以方便地 mock 复杂的模块。当我们遇到复杂的模块时，只需要花费一些额外的时间来考虑如何正确地 mock，以便快速地完成测试。在我们的测试代码中，mock 是一种强大且灵活的工具，需要掌握使用。

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