您如何在Jest测试中访问Vue-Composition-API类型的引用和“数据”？

问题描述

我目前正在从事旧版Vue项目。我们正在使用带选项API的Vue 2.x / Typescript。

我想说明切换到Vue Component API的情况，到目前为止，我认为这是一个非常令人信服的案例-除了一个缺点。

这就是-我们现有的测试失败。具体来说，这是由于两个原因：

1. 使用来自'@ vue / testUtils'中的mount（）的测试不能使用.setData（）方法手动设置数据（因为可观察的状态是从setup（）返回的，并且不再存在于数据中）；

示例：

// FIXME: This test fails because Vue Test Utils .setData does not work
// with the new composition API.
it("renders by default",async () => {
  await wrapper.setData({
    crosshairCoordinates: [{ x: 0,y: 0 }],});
  expect(wrapper.findAllComponents(ChartTooltip).length)
    .toBe(1); // -> expected 1,recieved: 0
});

1. 通过findComponent（）和ref字符串访问dom中的组件或HTML元素的测试不再找到新样式Refs

// FIXME: This test fails because Vue Test Utils findComponent doesn't work
// with the way Refs are handled with the Vue Composition API.
it("should be default and not emit event on mouse move",async () => {
  const chartWrapper = wrapper.findComponent({ ref: "wrapper" });
  chartWrapper.trigger("mousemove"); // -> TypeError Cannot read property 'ref' of undefined
  expect(wrapper.emitted("mousemove")).toBeFalsy();
});

坦率地说，如果我能弄清楚如何解决这些问题，我可以提出完整的建议，以转向VueComponentAPI，并使一些开发人员感到非常高兴。如果不能，那么我将不推荐它，并且必须坚持使用Vue Options API。

有什么想法吗？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）