Vite 中使用 Jest：常见陷阱与解决方案

引言

Vite 是一个现代的前端构建工具，它极大地简化了开发体验。然而，在 Vite 中使用 Jest 进行单元测试时，您可能会遇到一些常见的陷阱。本文将引导您了解这些陷阱并提供实用的解决方案，确保您的测试平稳运行。

依赖注入

在测试组件时，您可能需要注入依赖项，例如存储库或服务。在 Vite 中，您可以使用 provide() 和 inject() 函数。但是，在测试期间，您可能需要 mocking 这些依赖项。

// 组件.vue
export default {
  setup() {
    const repo = inject('repo');
    // 使用 repo ...
  }
};

// 组件测试.spec.js
import { mount } from '@vue/test-utils';
import { provide } from 'vue';

const wrapper = mount(Component, {
  global: {
    provide: {
      repo: {
        // 注入模拟存储库
      }
    }
  }
});

Mocking

在单元测试中，mocking 依赖项通常是必要的。在 Vite 中，您可以使用 vi.mock() 函数轻松地 mocking 模块。但是，您需要确保在每个测试用例中都调用 vi.clearAllMocks()，否则可能会导致后续测试失败。

// 组件测试.spec.js
import { vi } from 'vitest';

beforeEach(() => {
  // 在每个测试用例中清除模拟
  vi.clearAllMocks();
});

运行时错误

在 Vite 3 中，您可能会遇到一个运行时错误，指出“Error: Cannot find module 'node:util/types'”。这是由于 Jest 在 Vite 3 中不再自动加载 Node.js 内置模块。要解决此问题，请在 vite.config.js 中添加 esbuild 选项。

// vite.config.js
export default defineConfig({
  esbuild: {
    // 加载 Node.js 内置模块
    target: 'node16.9'
  }
});

Jest 28 中的更改

如果您使用 Jest 28，您可能会注意到一些变化。首先，expect.assertions() 不再是全局函数，您需要在每个测试用例中显式调用它。其次，vi.spyOn() 已被弃用，应改用 vi.mock.spyOn()。

// 组件测试.spec.js
test('测试用例', () => {
  expect.assertions(1); // 显式调用断言

  // 使用 vi.mock.spyOn() 代替 vi.spyOn()
  const spy = vi.mock.spyOn(component, 'methodName');
  // ...
});

结论

在 Vite 中使用 Jest 进行单元测试可以提高代码的质量和可靠性。然而，您可能会遇到一些常见的陷阱。通过了解这些陷阱并实施本文中提供的解决方案，您可以确保您的测试顺利进行，并充分利用 Vite 和 Jest 的强大功能。请记住，不断更新您的 Vite 和 Jest 版本，以利用最新的改进和错误修复。