How to do manual mocks in Vitest?

在 Vitest 中实现手动 Mock 的一个常见方法是使用 vi.fn() 函数来创建 Mock 函数，或者使用 vi.mock() 方法来 Mock 整个模块。以下是一些实现手动 Mock 的具体步骤和示例：

Mock 一个函数

如果你只需要 Mock 一个函数，你可以使用 vi.fn() 来创建一个 Mock 函数。例如，如果你有一个 utils.js 文件，你想 Mock 其中的 calculate 函数：

javascript
// utils.js
export const calculate = () => {
  // 实际的实现...
};

你可以在测试文件中这样做：

javascript
import { calculate } from './utils';
import { it, expect } from 'vitest';

// 创建 Mock 函数
const mockCalculate = vi.fn(() => 42);

// 替换原始函数为 Mock 函数
calculate = mockCalculate;

it('should use the mock function', () => {
  const result = calculate();
  expect(result).toBe(42);
  expect(mockCalculate).toHaveBeenCalled();
});

Mock 一个模块

如果你需要 Mock 一个模块中的多个函数或者整个模块，可以使用 vi.mock()。例如，如果你依然想 Mock utils.js 模块：

javascript
// utils.js
export const calculate = () => {
  // 实际的实现...
};
export const anotherFunction = () => {
  // 另一个函数的实现...
};

你的测试文件可以这样写：

javascript
import { it, expect } from 'vitest';
import * as utils from './utils';

// Mock 整个 utils 模块
vi.mock('./utils', () => {
  return {
    calculate: vi.fn(() => 42),
    anotherFunction: vi.fn(() => 'mocked value'),
  };
});

it('should use the mock functions from the mocked module', () => {
  const result = utils.calculate();
  const anotherResult = utils.anotherFunction();

  expect(result).toBe(42);
  expect(anotherResult).toBe('mocked value');
  expect(utils.calculate).toHaveBeenCalled();
  expect(utils.anotherFunction).toHaveBeenCalled();
});

在上面的例子中，我们使用了 vi.mock() 方法来定义了 utils.js 模块的 Mock 实现。在 Mock 实现中，我们使用了 vi.fn() 方法来创建了返回特定值的 Mock 函数。

请注意，在使用 vi.mock() 时，Vitest 会自动将其作用于所有导入了被 Mock 模块的文件。这意味着一旦你在一个测试文件中 Mock 了某个模块，其他所有导入了这个模块的测试也将使用这个 Mock 版本，直到你调用 vi.resetModules()。这是一个非常强大的特性，但使用时需要小心，以防止在测试间意外共享 Mock 状态。