使用Vue-Router进行快照测试 [英] Snapshot Testing with Vue-Router

问题描述

我正在尝试在使用V​​ue-cli应用程序创建的Vue应用程序中运行玩笑快照测试.当我测试其中具有路由器链接的组件时，会收到以下警告.

I'm trying to run jest-snapshot tests in a Vue app created using the Vue-cli app. When I test a component that have a router-link in it, I receive the following warning.

 [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进行单元测试我可以取消Router-Link的连接，但这并不能通过我的快照测试.有人遇到过这个问题吗?

Following the documentation here Unit tests with View Router I can stub out the router-link, but that doesn't pass my snapshot test. Has anyone run into this issue before?

推荐答案

更新:更一致的解决方案

tl; dr:

我发现一直有效的解决方案是创建一个localVue(通常在describe()块的范围之外)并将RoutherLinkStub作为组件添加.

The solution I found that works consistently is to create a localVue (usually outside the scope of the describe() blocks) and add the RoutherLinkStub as a component.

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

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

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

该文档并没有使解决方案变得显而易见，因为它似乎是您链接到的页面与有关

The documentation doesn't make the solution obvious because it seems to be something of a hybrid of the page you linked to and this one about RouterLinkStub.

在该页面上:

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

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

该解决方案在大多数情况下都有效.如果遇到需要使用mount的情况，而router-link不是被测试的组件中的组件，而是它下面的组件，则您仍然会收到该警告.现在，如果您处于这种情况，那么值得反思的是，如果您编写的测试正确(您测试的太多而不是一个很小的单元吗?)，但是在我遇到的情况下，如果我shallow而不是shallow c3>，快照测试毫无用处，因为它将子代呈现为<!----> when I call expect(wrapper.html()).toMatchSnapshot()`.

That solution works in most cases. If you have a case where you need to use mount and your router-link is a not in the component being tested but the one below it, you will still get that warning. Now, if you are in that situation, it's worth reflecting if you're writing your test properly (are you testing too much rather than a small unit?), but I have a situation or two where if I shallow instead of mount, the snapshot test is worthless because it renders children as <!----> when I callexpect(wrapper.html()).toMatchSnapshot()`.

有关快照测试的注意事项: 我实际上还没有看到有人使用Wrapper.html()方法进行快照测试的示例，但这确实是我实验中最好的解决方案. vue-server-renderer要走很长一段路才能得到相同的结果.访问Wrapper的vm属性使您可以轻松访问$el属性，但这只是html()的更空白的呈现.

A Note on Snapshot Tests: I haven't actually seen examples of people using the Wrapper.html() method for snapshot testing, but it really seems like the best solution in my experimenting. vue-server-renderer is a long walk for what appears to be the same result. Accessing the vm property of Wrapper gives you access to the $el property, without much trouble, but it's just a more whitespace-heavy rendering of html().

这篇关于使用Vue-Router进行快照测试的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！