使用 Vue-Router 进行快照测试

Question

我正在尝试运行在使用 Vue-cli 应用程序创建的 Vue 应用程序中进行开玩笑的快照测试。当我测试其中包含 router-link 的组件时，我收到以下警告。

 [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 我可以对路由器进行 stub-link，但这并没有通过我的快照测试。有没有人运行以前处理过这个问题？

Answer 1

更新：更一致的解决方案

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 走了很长一段路，结果看起来是一样的。访问 Wrapper 的 vm 属性可以访问 $el 属性，没有太多麻烦，但它只是更 whitespace-heavy 的渲染html()。

使用 Vue-Router 进行快照测试

Snapshot Testing with Vue-Router

vuejs2

vue-router

jestjs

vue-test-utils