Vue.js unit:test:有什么方法可以模拟Vee-Validate验证程序插件吗?

时间:2018-10-17 16:49:24

标签: unit-testing vue.js vee-validate

我正在测试表单组件,所有字段均已通过vee-validate验证 目前,我正在包装器中注入验证器

import VeeValidate from "vee-validate";

Vue.use(VeeValidate, { errorBagName: "errors" });

describe("ContactForm.vue", () => {
 const v = new VeeValidate.Validator();

 beforeEach(() => {
  options = {
        sync: false,
        provide: () => ({
          $validator: v
        })
 };
 wrapper = shallowMount(ContactForm, options);
});

$validator具有一些功能,例如:init(), localize(), validateAll() , reset(), ...,我可以在某些测试中绕过

反正有validator函数来模拟Jest吗?

感谢您的反馈

1 个答案:

答案 0 :(得分:1)

您是否尝试过通过sinon使用函数的存根?他们在vue test utilssetMethods上提到了这一点。

它看起来像:

import { mount } from '@vue/test-utils'
import sinon from 'sinon'
import ContactForm from './ContactForm.vue'

const wrapper = mount(ContactForm)
const submit = wrapper.find('button')
const validateStub = sinon.stub()

allInputs.setMethods({ validateAll: validateStub })
submit.trigger('click')
expect(validateStub.called).toBe(true)

例如,当您提交表单时,您可以知道validateAll方法是否被调用。或者,您可以尝试在github/VeeValidate

上行