Vue.js unit:test ：有没有办法模拟 Vee-Validate 验证器插件？答案

【问题标题】：Vue.js unit:test : Is there any way to mock a Vee-Validate validator plugin?Vue.js unit:test ：有没有办法模拟 Vee-Validate 验证器插件？
【发布时间】：2019-03-22 10:18:54
【问题描述】：

我正在测试一个表单组件，所有字段都使用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(), ...，我可以在某些测试中绕过这些功能

有没有办法用Jest函数模拟这样的validator？

感谢反馈

【问题讨论】：

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

【解决方案1】：

您是否尝试过使用 sinon 来使用函数的存根？他们在vue test utils 和setMethods 上提到了这一点。

它可能看起来像：

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

【讨论】：