gpt4 book ai didi

vuejs2 - Vue-Test-Utils 未知的自定义元素 :

转载 作者:行者123 更新时间:2023-12-03 23:11:18 25 4
gpt4 key购买 nike

我正在使用 Jest 使用 vue-test-utils 库运行我的测试。

即使我已将 VueRouter 添加到 localVue 实例,它仍说它实际上无法找到 router-link 组件。如果代码看起来有点古怪,那是因为我使用的是 TypeScript,但它应该读起来非常接近 ES6……主要是 @Prop() 与传入 props 相同:{..}

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.

感谢您提供的任何帮助!

最佳答案

添加 router-link stub 到 shallow (或 shallowMount )方法选项如下:

const wrapper = shallow(TempComponent, {
propsData: { temp },
stubs: ['router-link']
})

this way :

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

const wrapper = shallow(TempComponent, {
propsData: { temp },
stubs: {
RouterLink: RouterLinkStub
}
})

执行此操作后,错误应该消失。

关于vuejs2 - Vue-Test-Utils 未知的自定义元素 : <router-link>,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49681546/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com