Vue.js单位:测试:有没有办法模拟Vee-Validate验证器插件？

Question

我正在测试一个表单组件,所有字段都经过验证,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函数来模拟这样的东西？

谢谢你的反馈

Answer 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上提问