Vue-Test-Utils未知自定义元素：<路由器-链接>
Vue-Test-Utils未知自定义元素：<路由器-链接>
提问于 2018-04-05 21:08:14
我使用Jest使用vue-test-utils库运行我的测试。
尽管我已经将VueRouter添加到localVue实例中，但它说它实际上找不到路由器链接组件。如果代码看起来有点古怪，那是因为我使用的是TypeScript，但是它应该读得非常接近ES6.主要是@Prop()与传入道具相同：{..}
Vue组件：
<template>
<div>
<div class="temp">
<div>
<router-link :to="temp.url">{{temp.name}}</router-link>
</div>
</div>
</div>
</template>
<script lang="ts">
import Vue from 'vue'
import Component from 'vue-class-component'
import { Prop } from 'vue-property-decorator'
import { Temp } from './Temp'
@Component({
name: 'temp'
})
export default class TempComponent extends Vue {
@Prop() private temp: Temp
}
</script>
<style lang="scss" scoped>
.temp {
padding-top: 10px;
}
</style>温度模型：
export class Temp {
public static Default: Temp = new Temp(-1, '')
public url: string
constructor(public id: number, public name: string) {
this.id = id
this.name = name
this.url = '/temp/' + id
}
}Jest测试
import { createLocalVue, shallow } from '@vue/test-utils'
import TempComponent from '@/components/Temp.vue'
import { Temp } from '@/components/Temp'
import VueRouter from 'vue-router'
const localVue = createLocalVue()
localVue.use(VueRouter)
describe('Temp.vue Component', () => {
test('renders a router-link tag with to temp.url', () => {
const temp = Temp.Default
temp.url = 'http://some-url.com'
const wrapper = shallow(TempComponent, {
propsData: { temp }
})
const aWrapper = wrapper.find('router-link')
expect((aWrapper.attributes() as any).to).toBe(temp.url)
})
})我遗漏了什么？测试实际上通过了，它只是抛出警告。实际上，下面是输出：
测试输出：
$ jest --config test/unit/jest.conf.js
PASS ClientApp\components\__tests__\temp.spec.ts
Temp.vue Component
√ renders a router-link tag with to temp.url (30ms)
console.error node_modules\vue\dist\vue.runtime.common.js:589
[Vue warn]: Unknown custom element: <router-link> - did you register the
component correctly? For recursive components, make sure to provide the
"name" option.
(found in <Root>)
Test Suites: 1 passed, 1 total
Tests: 1 passed, 1 total
Snapshots: 0 total
Time: 4.677s
Ran all test suites.
Done in 6.94s.感谢你能给予的任何帮助！
回答 4
Stack Overflow用户
回答已采纳
发布于 2018-06-01 08:25:37
将router-link存根添加到shallow (或shallowMount)方法选项中，如下所示：
const wrapper = shallow(TempComponent, {
propsData: { temp },
stubs: ['router-link']
})或这边请
import { RouterLinkStub } from '@vue/test-utils';
const wrapper = shallow(TempComponent, {
propsData: { temp },
stubs: {
RouterLink: RouterLinkStub
}
})这样做之后，错误就会消失。
Stack Overflow用户
发布于 2021-10-01 17:21:43
使用Vue 3和Vue Test (v4)，您似乎只需将router (从createRouter返回的对象)作为插件添加到mountOptions中
import router from "@/router";
const mountOptions = {
global: {
plugins: [router],
},
};https://next.vue-test-utils.vuejs.org/api/#global
或者更完整的例子：
import router from "@/router";
import Button from "@/components/Button.vue";
const mountOptions = {
global: {
mocks: {
$route: "home",
$router: {
push: jest.fn(),
},
},
plugins: [router],
},
};
it("Renders", () => {
const wrapper = shallowMount(Button, mountOptions);
expect(wrapper.get("nav").getComponent({ name: "router-link" })).toExist();
});注意，在上面的示例中，我使用了一个带有Vue CLI的项目设置。
Stack Overflow用户
发布于 2020-04-11 18:11:43
为我工作过：
Package.json文件
...
"vue-jest": "^3.0.5",
"vue-router": "~3.1.5",
"vue": "~2.6.11",
"@vue/test-utils": "1.0.0-beta.29",
...测试文件
import App from '../../src/App';
import { mount, createLocalVue } from '@vue/test-utils';
import VueRouter from 'vue-router';
const localVue = createLocalVue();
localVue.use(VueRouter);
const router = new VueRouter({
routes: [
{
name: 'dashboard',
path: '/dashboard'
}
]
});
describe('Successful test', ()=>{
it('works', ()=>{
let wrapper = mount(App, {
localVue,
router
});
// Here is your assertion
});
});或者你可以试试这个：
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/49681546
复制相关文章
相似问题
腾讯云开发者
