英文:
Testing Vuetify with Vue-test-utils - Cannot set value to v-text-field
问题
我想测试一个简单的登录表单，其中包含两个v-text-field和一个v-btn。我正在使用Jest和Vue测试工具进行测试。
代码看起来像这样：
<v-text-field
v-model="form.email"
test-id="input-email">
</v-text-field>
我的测试看起来像这样：
import Login from './login.vue'
import { shallowMount } from '@vue/test-utils'
describe('login', () => {
it('set value', () => {
const wrapper = shallowMount(Login)
const emailInput = wrapper.findComponent('[test-id="input-email"]')
emailInput.setValue('john@example.com')
})
})
我得到了错误消息：
[vue-test-utils]: wrapper.setValue() 不能在此元素上调用
并指向这里：
emailInput.setValue('john@example.com')
如何为v-text-field设置值？
英文:
I want to test simple login form with two v-text-fields and one v-btn. I'm testing with Jest and Vue test utils.
Code looks like that:
<v-text-field
v-model="form.email"
test-id="input-email">
</v-text-field>
My test looks like that:
import Login from './login.vue'
import { shallowMount } from '@vue/test-utils'
describe('login', () => {
it('set value', () => {
const wrapper = shallowMount(Login)
const emailInput = wrapper.findComponent('[test-id="input-email"]')
emailInput.setValue('john@example.com')
})
})
And I'm getting error:
>[vue-test-utils]: wrapper.setValue() cannot be called on this element
and points here:
emailInput.setValue('john@example.com')
How can I set value to v-text-field?
答案1
得分: 1
I tried to repeat your example and it works
Component:
<template>
<v-text-field
v-model="form.email"
test-id="input-email"
/>
</template>
<script>
export default {
data () {
return {
form: { email: '' },
}
},
}
</script>
Test:
import Input from './input.vue';
import { mount } from '@vue/test-utils';
describe('input', () => {
it('should set v-model', () => {
const wrapper = mount(Input);
const input = wrapper.findComponent('[test-id="input-email"]');
input.setValue('test');
});
})
英文:
I tried to repeat your example and it works
Component:
<template>
<v-text-field
v-model="form.email"
test-id="input-email"
/>
</template>
<script>
export default {
data () {
return {
form: { email: '' },
}
},
}
</script>
Test:
import Input from './input.vue'
import { mount } from '@vue/test-utils'
describe('input', () => {
it('should set v-model', () => {
const wrapper = mount(Input)
const input = wrapper.findComponent('[test-id="input-email"]')
input.setValue('test')
})
})
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论