1

我正在尝试在使用 Vue-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.

按照此处使用 View Router 进行单元测试的文档，我可以删除路由器链接，但这没有通过我的快照测试。有没有人遇到过这个问题？

4

1 回答 1

3

更新：更一致的解决方案

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().

于 2018-02-22T18:58:10.503 回答