[Vuejs]-Unit test of Vue Formulate not seeing errors

by

0đź‘Ť

âś…

  1. If you’re checking for errors, you’ll need your error-visibility on the input to be “live”, or you need to simulate a blur event (in this case this is almost certainly the issue).
  2. Because watchers are involved in Vue Formulate’s internals you often need to “flush” all the promises before the state “settles”. You can do this by installing the flush-promises module.
npm install -D flush-promises

Then import this in your test file, and await flushPromises() before checking for your final states.

import flushPromises from 'flush-promises'
import { mount, createLocalVue } from '@vue/test-utils';
import VueFormulate from '@braid/vue-formulate';
import registrationForm from '../../resources/js/components/RegistrationFormComponent'

test('name field is required', async () => {
    const localVue = createLocalVue();
    localVue.use(VueFormulate);
    let wrapper = mount(registrationForm,{localVue});

    let form = wrapper.find('form');
    let field = form.find('input[name=name]');

    field.setValue('');
    field.trigger('blur');
    await flushPromises()
    expect(wrapper.find('.formulate-input-error').text()).toContain('Name is required');
})

Full Disclosure: I’m the author of VueFormulate

Leave a comment