vue.js - Vue test Element-ui form

Question

I am trying to test form validation of element-ui using Vue test utils and jest. So my setup is the following

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();

And then I am trying to get the el-form by reference and run the validation method:

  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();
  });

But I get a strange error which is

 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)

I tried importing all Element-ui components and registering them in the localVue still with no luck... I also tried using findComponent instead of looking for the form by ref, same error.

Answer 1

等待大神答复