component1.vue
<template>
<div>
<v-form
ref="form">
<v-text-field
v-model="name"
:counter="10"
:rules="nameRules"
label="Name"
required
></v-text-field>
</v-form>
</div>
</template>
<script>
export default {
data: () => ({
name: 'Test',
nameRules: [
v => !!v || 'Name is required',
v => (v && v.length <= 10) || 'Name must be less than 10 characters',
]
}),
mounted() {
this.$refs.form.resetValidation();
}
}
</script>
test.spec.js
import { shallowMount, mount, createLocalVue } from '@vue/test-utils'
import Vuex from "vuex"
import Vuetify from 'vuetify'
import component1 from '@/components/component1.vue'
const localVue = createLocalVue()
localVue.use(Vuex)
localVue.use(Vuetify)
const vuetify = new Vuetify()
test('test1', () => {
const wrapper = shallowMount(component1, {
localVue,
vuetify
})
expect(3).toBe(3);
})
错误-类型错误:this。$ refs.form.resetValidation不是函数
如果我要使用mount而不是shallowMount,则测试将通过。但是我想知道如何模拟$ ref.form.resetValidation。
最佳答案
您可以创建一个手动存根来替换否则将用于v表单的存根:
test('test1', () => {
const wrapper = shallowMount(component1, {
localVue,
stubs: {
VForm: {
render: () => {},
methods: {
resetValidation: () => ()
}
}
}
})
....
})