Test Vuetify form validation with Vue test utils and Jest

Question

I use Vue ^2.6, Vuetify ^2.3, Jest ^26.2 and Vue test utils ^1.0.

My Login component :

<template>
    <v-row>
        <v-sheet>
            <v-row>
                <v-form
                        v-model="loginFormIsValid"
                        :lazy-validation="false"
                >
                    <v-text-field
                            id="cr-login-credential"
                            v-model="credential"
                            :rules="[
                (value) => !!value || 'Required.',
                (v) => /.+@.+\..+/.test(v) || 'E-mail must be valid',
              ]"
                    ></v-text-field>
                    <v-text-field
                            id="cr-login-password"
                            v-model="password"
                            :rules="[(value) => !!value || 'Required.']"
                    ></v-text-field>
                    <v-checkbox
                            v-model="remember_me"
                            id="cr-login-remember_me"
                    ></v-checkbox>
                </v-form>
                <v-btn :disabled="!loginFormIsValid" class="cr-login-submit-btn"/>
            </v-row>
        </v-sheet>
    </v-row>
</template>

<script>
    export default {
        data() {
            return {
                credential: null,
                password: null,
                remember_me: null,
                loginFormIsValid: false,
            };
        },
    };
</script>

My test :

import { createLocalVue, mount } from '@vue/test-utils';
import Vuetify from 'vuetify';
import Vue from 'vue';
import { Login } from '@/entry';
import '@testing-library/jest-dom';

Vue.use(Vuetify);
const localVue = createLocalVue();

const factory = (vuetify) => mount(Login, {
  localVue,
  vuetify,
});

describe('Login.vue', () => {
  let vuetify;

  beforeEach(() => {
    vuetify = new Vuetify();
  });
  it('check submit button is disabled if fields are empty', () => {
    const wrapper = factory(vuetify);
    const email = '';
    const password = '';

    wrapper.find('#cr-login-credential').setValue(email);
    wrapper.find('#cr-login-password').setValue(password);

    expect(wrapper.vm.credential).toBe(email);
    expect(wrapper.vm.password).toBe(password);

    expect(wrapper.vm.loginFormIsValid).toBeFalsy();
    expect(wrapper.find('.cr-login-submit-btn').element).toBeDisabled();
  });
});

(I omit useless code)

When I run test, it fails :

Error: expect(received).toBeFalsy()

Received: true

Data loginFormIsValid is not updated and my button is always disabled.

Can you explain the good process to test my data please ?

Answer 1

I just ran into this exact issue. I was able to solve the issue after calling Vue.nextTick() after any vue-test-utils setValue() method calls. Note: you will need to turn these tests into async functions.

So for your specific test, I would try the following:

it('check submit button is disabled if fields are empty', async () => {
    const wrapper = factory(vuetify);
    const email = '';
    const password = '';

    wrapper.find('#cr-login-credential').setValue(email);
    wrapper.find('#cr-login-password').setValue(password);

    await Vue.nextTick();

    expect(wrapper.vm.credential).toBe(email);
    expect(wrapper.vm.password).toBe(password);

    expect(wrapper.vm.loginFormIsValid).toBeFalsy();
    expect(wrapper.find('.cr-login-submit-btn').element).toBeDisabled();
});

See https://stackoverflow.com/a/60701786/6698029 for further information.