Vue 组件测试中 Vitest 嘲笑未定义的函数：分步指南

在 Vue 组件测试中使用 Vitest 嘲笑未定义的函数

引言

在编写 Vue 组件测试时，我们可能会遇到在组件中未定义的函数，例如 Silktide。这种情况会导致测试失败，因为 Vitest 找不到它。在这篇文章中，我们将探讨如何使用 Vitest 的嘲笑功能解决这个问题，并提供详细的分步指南。

问题：未定义的函数

考虑以下 Vue 组件：

<template>
  <button id="basket-button">Add to basket</button>
</template>

<script>
var button = document.getElementById('basket-button');
button.addEventListener('click', function (e) {
  silktide("add-to-basket");
});
</script>

如果我们尝试测试这个组件，我们会遇到以下错误：

ReferenceError: silktide is not defined

这是因为 silktide 函数在组件中未定义。

解决方案：嘲笑

为了解决这个问题，我们可以使用 Vitest 的嘲笑功能来创建 silktide 函数的模拟。有几种方法可以做到这一点：

1. 全局嘲笑

使用全局嘲笑可以在测试套件范围内嘲笑一个模块。

beforeEach(() => {
  vi.mock("silktide", async () => ({
    silktide: vi.fn().mockReturnValue({
      event: vi.fn(),
    }),
  }));
});

2. 局部嘲笑

使用局部嘲笑可以嘲笑组件中的特定函数。

const spy = vi.mock.spyOn(window, 'silktide');

3. 使用 vi.stub

vi.stub 允许我们创建桩函数，直接在原始对象上。

const stub = vi.stub(window, 'silktide').value({
  event: vi.fn(),
});

分步指南

以下是如何使用 Vitest 嘲笑未定义的函数的分步指南：

1. 在 beforeEach 钩子中，导入 Vitest 并使用适当的方法嘲笑 silktide 函数。
2. 在测试用例中，使用模拟的 silktide 函数进行测试。
3. 在测试用例后，重置所有模拟或恢复原始函数。

注意

• 全局嘲笑会影响所有测试用例，因此请确保在每个用例后重置模拟。
• 局部嘲笑和 vi.stub 只会影响当前测试用例。

常见问题解答

1. 什么是嘲笑？

嘲笑是一种创建函数替身的技术，用于在测试中模拟其行为。

2. Vitest 中的嘲笑如何运作？

Vitest 使用 vi.mock、vi.mock.spyOn 和 vi.stub 函数来创建模拟。

3. 什么时候使用全局嘲笑？

在需要在测试套件范围内嘲笑模块时使用全局嘲笑。

4. 什么时候使用局部嘲笑？

在需要在组件范围内嘲笑函数时使用局部嘲笑。

5. 使用 vi.stub 有什么好处？

vi.stub 允许我们直接在原始对象上创建桩函数，这可以更有效率。

结论

使用 Vitest 的嘲笑功能，我们可以解决 Vue 组件测试中未定义的函数问题。通过遵循本文中概述的分步指南，您可以轻松地在测试中模拟函数，从而提高测试的覆盖率和可靠性。