Vue.js unit:test : Is there any way to mock a Vee-Validate validator plugin?

Question

I am testing a form component, all fields are validated with vee-validate Currently I a injecting in my wrapper mount a validator

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

the $validator has some functions like : init(), localize(), validateAll() , reset(), ... that I could bypass in some of my tests

Is there anyway to mock such validator with Jest functions ?

thanks for feedback

Insurgence

Answer 1

Have you tried to use stubs of your functions using sinon ? They mentioned that on vue test utils with setMethods.

It could look like:

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)

So you would be able to know if the validateAll method is called when you submit the form for example. Or you could try asking on github/VeeValidate

Danford