在 Jest 测试中访问 Vue 组合式 API 的类型引用和“数据”：完整指南

Vue 组合式 API 在 Jest 测试中的类型引用和“数据”访问

引言

随着 Vue 组合式 API 的兴起，在 Jest 测试中访问其类型引用和“数据”变得至关重要。本文将探讨在 Vue 组合式 API 中访问类型引用和“数据”的常见问题，并提供经过验证的解决方案。

问题 1：设置“数据”失败

问题
使用 @vue/test-utils 的 mount() 方法时，我们无法使用 .setData() 方法手动设置数据。这是因为可观察状态是从 setup() 返回的，不再存在于 data 中。

解决方案：
使用 setProps() 方法设置数据。

示例代码：

it("renders by default", async () => {
  await wrapper.setProps({
    crosshairCoordinates: [{ x: 0, y: 0 }],
  });
  expect(wrapper.findAllComponents(ChartTooltip).length).toBe(1);
});

问题 2：无法通过引用找到组件

问题：
在 Vue 组合式 API 中，引用使用新的方式处理。findComponent() 无法找到它们。

解决方案：
使用 wrapper.vm 访问组件实例，然后通过 ref 字符串访问引用。

示例代码：

it("should be default and not emit event on mouse move", async () => {
  const chartWrapper = wrapper.vm.$refs.wrapper;
  chartWrapper.trigger("mousemove");
  expect(wrapper.emitted("mousemove")).toBeFalsy();
});

结论

通过遵循这些解决方案，你将能够轻松地解决 Vue 组合式 API 在 Jest 测试中访问类型引用和“数据”的问题。这将使你能够在迁移到 Vue 组合式 API 时保持测试覆盖率。

常见问题解答

1. 为什么 setData() 方法不再有效？
   setData() 无法再用于 Vue 组合式 API，因为可观察状态是从 setup() 返回的，而不是存在于 data 中。

2. 如何访问 Vue 组合式 API 中的类型引用？
   使用 wrapper.vm 访问组件实例，然后通过 ref 字符串访问类型引用。

3. 是否可以在 Vue 组合式 API 中使用 findComponent()？
   不能，findComponent() 无法在 Vue 组合式 API 中找到引用。

4. 如何设置 Vue 组合式 API 中的数据？
   使用 setProps() 方法设置数据。

5. 为什么我无法使用 data() 函数？
   data() 函数已从 Vue 组合式 API 中弃用。