使用Vue-Router进行快照测试

Posted 2021-04-30

我正在尝试在使用V​​ue-cli应用程序创建的Vue应用程序中运行jest-snapshot测试。当我测试其中包含路由器链接的组件时，我收到以下警告。

 [Vue warn]: Unknown custom element: <router-link> - did you register 
 the component correctly? For recursive components, make sure to 
 provide the "name" option.

在这里的文档Unit tests with View Router我可以存根路由器链接，但这不会通过我的快照测试。有没有人遇到过这个问题？

答案

更新：更一致的解决方案

tl;博士：

我发现一致的工作方法是创建一个localVue（通常在describe()块的范围之外）并添加RoutherLinkStub作为组件。

import { mount, RouterLinkStub, createLocalVue } from '@vue/test-utils';

const localVue = createLocalVue();
localVue.component('router-link', RouterLinkStub);

const wrapper = mount(Component, { localVue });

文档并没有使解决方案显而易见，因为它似乎是您链接到的页面和RouterLinkStub的混合。

从该页面：

import { mount, RouterLinkStub } from '@vue/test-utils'

const wrapper = mount(Component, {
  stubs: {
    RouterLink: RouterLinkStub
  }
})

该解决方案适用于大多数情况。如果你有一个需要使用mount的情况，并且你的router-link不是被测试的组件而是它下面的那个，你仍然会得到那个警告。现在，如果你处于这种情况，如果你正确地编写你的测试（你测试的太多而不是一个小单位吗？），那值得反思，但我有一两种情况，如果我shallow而不是mount，快照测试毫无价值，因为它将子项呈现为<!----> when I callexpect（wrapper.html（））。toMatchSnapshot（）`。

关于快照测试的注意事项：我实际上没有看到使用Wrapper.html()方法进行快照测试的人的例子，但它实际上似乎是我实验中的最佳解决方案。 vue-server-renderer是一个漫长的步行，似乎是相同的结果。访问vm的Wrapper属性可以让你访问$el属性，没有太多麻烦，但它只是一个更加空白的渲染html()。