3

当我在使用vee-validate的组件上运行测试时，我遇到了这个奇怪的错误。更奇怪的是，当我实际在该组件中使用时，它并没有发生this.errors（即使 putconsole.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'],
    (...)
4

2 回答 2

4

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

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

这对我有用。

于 2019-02-06T16:24:43.047 回答
2

We hit this at work with @vue/test-utils@1.0.0-beta.25, and it got resolved by updating to @vue/test-utils@1.0.0-beta.29, without using sync: false.

于 2019-06-05T14:21:16.970 回答