[英]How to initialise Vuelidate when testing a Vue component with Vitest?
In my Vue 2.7.14 app I'm using Vuelidate 2.0.0.在我的 Vue 2.7.14 应用程序中,我使用的是 Vuelidate 2.0.0。 I'm trying to migrate a test from Jest to Vitest, but the
v$
object is not initialised correctly in the latter case.我正在尝试将测试从 Jest 迁移到 Vitest,但在后一种情况下
v$
对象未正确初始化。 The component has a checkbox bound to formData.accepted
该组件有一个复选框绑定到
formData.accepted
validations () {
return {
formData: {
accepted: {
required,
sameAs: sameAs(true)
}
}
}
}
Vuelidate is initialised within the component as per the docs Vuelidate根据文档在组件内初始化
setup () {
return {
v$: useVuelidate({ $autoDirty: true })
}
},
When I run the following test under Jest, it passes当我在 Jest 下运行以下测试时,它通过了
it('click save button', async () => {
const wrapper = mount(MyComponent)
expect(wrapper.vm.v$.formData.accepted.$invalid).toBeTruthy()
await wrapper.find('[data-cy="accept-checkbox"]').trigger('click')
expect(wrapper.vm.v$.formData.accepted.$invalid).toBeFalsy()
})
However, if I run the same test using Vitest it fails because wrapper.vm.v$.formData
is undefined
because v$
is initialised to:但是,如果我使用 Vitest 运行相同的测试,它会失败,因为
wrapper.vm.v$.formData
是undefined
的,因为v$
被初始化为:
v$ {
"$dirty": false,
"$path": "__root",
"$model": null,
"$error": false,
"$errors": [],
"$invalid": false,
"$anyDirty": false,
"$pending": false,
"$silentErrors": [],
"$validationGroups": {}
}
By contrast, when the Jest test is run, $silentErrors
is not empty, and the following property path is (obviously) valid相比之下,当运行 Jest 测试时,
$silentErrors
不为空,并且以下属性路径(显然)有效
v$.formData.accepted.$invalid
What should I do to ensure that v$
is initialised correctly when the test is run with Vitest?当使用 Vitest 运行测试时,我应该怎么做才能确保
v$
被正确初始化?
First try:第一次尝试:
You need to assign a const to the wrapper:您需要为包装器分配一个常量:
it('click save button', async () => {
const wrapper = mount(MyComponent)
const { $v } = wrapper.vm;
expect(wrapper.vm.v$.formData.accepted.$invalid).toBeTruthy()
await wrapper.find('[data-cy="accept-checkbox"]').trigger('click')
expect(wrapper.vm.v$.formData.accepted.$invalid).toBeFalsy()
})
Further try:进一步尝试:
I think you are also missing the import of validationMixin
in your test file to use the $v
object:我认为您还缺少在测试文件中导入
validationMixin
以使用$v
对象:
import { validationMixin } from 'vuelidate';
After that change your component to this:之后将您的组件更改为:
export default {
mixins: [validationMixin],
setup () {
return {
v$: useVuelidate()
}
}
Glad about feedback if it worked and if not we'll get there.如果它有效,我们会很高兴收到反馈,如果没有,我们会到达那里。 :)
:)
To initialise Vuelidate when testing a Vue component with Vitest you can use the following approach:要在使用 Vitest 测试 Vue 组件时初始化 Vuelidate,您可以使用以下方法:
1. Add the following line to your test file: 1. 将以下行添加到您的测试文件中:
import Vuelidate from 'vuelidate';
2. Use Vuelidate in your test like so: 2. 在测试中使用 Vuelidate,如下所示:
it('click save button', async () => {
const wrapper = mount(MyComponent)
const v = Vuelidate.instance()
expect(v.formData.accepted.$invalid).toBeTruthy()
await wrapper.find('[data-cy="accept-checkbox"]').trigger('click')
expect(v.formData.accepted.$invalid).toBeFalsy()
})
3. Make sure that Vuelidate is initialised correctly within your Vue component like so: 3. 确保 Vuelidate 在您的 Vue 组件中正确初始化,如下所示:
v$: useVuelidate({
$autoDirty: true
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.