Question

在使用vee-validate的组件上运行测试时，出现了一个奇怪的错误。甚至更奇怪的是，当我在该组件中实际使用this.errors时并没有发生（即使放console.log(this.errors)也会使其消失）。

测试代码：

import { mount } from '@vue/test-utils';
import { renderToString } from '@vue/server-test-utils';
import Vue from 'vue';
import VeeValidate from 'vee-validate';
import VeeValidateConfig from '@/vee-validate-config';
Vue.use(VeeValidate, VeeValidateConfig);
import FolderSelect from '@/components/FolderSelect';

describe('FolderSelect', () => {
let propsData, wrapperDeep;

beforeEach(() => {
    wrapperDeep = mount(FolderSelect);
});

it('renders select box if option "existing folder" is selected', () => {
    // this code is forcing component to use vee-validate:
    wrapperDeep.setData({folder: 'existing'}); 
});

yarn test:unit的输出：

[Vue warn]: Error in directive validate bind hook: 
"TypeError: Cannot read property '_transitionClasses' of undefined"

它来自node_modules/vue/dist/vue.runtime.common.js的1739和589行。

添加到经过测试的组件后：

created () {
    console.log(this.errors);
},

错误消失了！为什么错误会以其他方式出现？如果不使用Vue，是否会清除vee-validate？（this.errors是vee-validate添加的ErrorBag）。不过，如果我将{{ errors }}添加到模板中没有帮助。

我正在像这样注入vee-validate：

export default {
    inject: ['$validator'],
    (...)

Answer 1

我遇到了同样的问题，尝试在安装组件后添加{sync: false}

beforeEach(() => {
wrapperDeep = mount(FolderSelect,{sync: false});

}）;

这对我有用。

Answer 2

我们在使用@vue/test-utils@1.0.0-beta.25时遇到了这个问题，并且通过更新为@vue/test-utils@1.0.0-beta.29而不使用sync: false来解决了这个问题。

vue.runtime.common.js：未使用this.errors时，“无法读取未定义的属性'_transitionClasses'”

2 个答案: