Vue测试Element-ui表单

问题描述

我正在尝试使用 Vue 测试工具和 jest 测试 element-ui 的表单验证。所以我的设置如下

import { createLocalVue,mount } from '@vue/test-utils';
import Vuex from 'vuex';
import VueRouter from 'vue-router';
import Element from 'element-ui';
import TrainerDetails from '../../trainers/components/TrainerDetails.vue';

const localVue = createLocalVue();

localVue.use(Vuex);
localVue.use(Element);
localVue.use(VueRouter);
const router = new VueRouter();

然后我试图通过引用获取 el-form 并运行验证方法：

  it('expect form validation to fail,no data',async () => {
    const wrapper = mount(TrainerDetails,{
      localVue,store,router,});

    const form = wrapper.find({ ref: 'trainerForm' });
    expect(form).tobedefined();
    const formSuccess = await form.vm.validate();
    expect(formSuccess).toBeFalsy();
  });

但是我得到一个奇怪的错误

 TrainerDetails › expect form validation to fail,no data

    TypeError: Cannot set property 'documentHandler' of undefined

      at update (node_modules/element-ui/lib/utils/clickoutside.js:64:29)
      at callHook$1 (node_modules/vue/dist/vue.runtime.common.dev.js:6652:7)
      at _update (node_modules/vue/dist/vue.runtime.common.dev.js:6581:7)

我尝试导入所有 Element-ui 组件并在 localVue 中注册它们仍然没有运气...我也尝试使用 findComponent 而不是通过 ref 查找表单，同样的错误。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

vue-test-utils vue.js