Vue.js unit test make sure component is stable after mount

Question

in my component the submit btn is disabled until a value is entered in the input field. however after mounting the component, it seems that the component is not yet stable and validation did not run, so the btn is not disabled and its text is 'set status'. so the test fails with:

Expected value to equal:
      "set status disabled"
    Received:
      "set status"

expected is that the button is disabled and has the text 'set status disabled'.

in the browser the behaviour is correct.

HelloWorld.vue

<template>
<div class="hello">
    <ValidationObserver>
        <form slot-scope="{ invalid }" @submit.prevent="postStatus">
            <ValidationProvider name="email" rules="required">
                <div slot-scope="{ errors }">
                    <input v-model="status">
                    <p>{{ errors[0] }}</p>
                </div>
            </ValidationProvider>

            <button id="submitBtn" @click="postStatus" :disabled="invalid" type="submit">set status {{invalid? 'disabled' :''}} </button>
        </form>
    </ValidationObserver>
</div>

<script lang="ts">
import {Component, Prop, Vue} from 'vue-property-decorator';
import {Action} from 'vuex-class';
import {ValidationProvider, ValidationObserver} from 'vee-validate';

@Component({
    components: {
        ValidationProvider, ValidationObserver
    },
})
export default class HelloWorld extends Vue {

    status: string = '';
    @Action('setStatus') private setStatus: any;

    public postStatus() {
        this.setStatus(this.status);
    }
}

HelloWorld.spec.ts

import HelloWorld from '@/components/HelloWorld.vue';
import Vuex from "vuex"
import {mount, createLocalVue} from "@vue/test-utils"
import {ValidationObserver, ValidationProvider} from "vee-validate";
import VeeValidate from 'vee-validate';

const localVue = createLocalVue()
localVue.use(Vuex)
localVue.use(VeeValidate, {
    events: 'blur'
});

describe('HelloWorld.vue', () => {
    it('button should be initially disabled', () => {

        const wrapper = mount(HelloWorld, {
            components: {ValidationObserver, ValidationProvider}
        });

        let submitBtn = wrapper.find("#submitBtn");
        expect(submitBtn).toBeTruthy();
        expect(submitBtn.text()).toEqual('set status disabled')
    });
});

Your button text and disabled seem to rely on an invalid field. However, I can't see it on the component. Did you forget to copy/paste the invalid field? — Sergeon
the invalid field is provided here <form slot-scope="{ invalid }" @submit.prevent="postStatus"> — dasAnderl ausMinga

dasAnderl ausMinga dasAnderl ausMinga · Accepted Answer · 2019-01-24T10:34:59

actually the test passes now. i dont know what's the reason exactly however here some information on how to test the button gets enabled after a value is entered to the input field:

yarn add --dev flush-promises

complete passing spec:

import HelloWorld from '@/components/HelloWorld.vue';
import Vuex from "vuex"
import {mount, createLocalVue, Wrapper} from "@vue/test-utils"
import VeeValidate from 'vee-validate';
import flushPromises from 'flush-promises';

const localVue = createLocalVue()
localVue.use(Vuex)
localVue.use(VeeValidate, {
    events: 'blur'
});

describe('HelloWorld.vue', () => {

    let wrapper: Wrapper<HelloWorld>;

    beforeEach(() => {
        wrapper = mount(HelloWorld);
    });

    it('post status btn should be disabled initially', () => {

        expect(wrapper.vm.$data.status).toEqual('');
        let submitBtn = wrapper.find("#submitBtn");
        expect(submitBtn).toBeTruthy();
        expect(submitBtn.attributes().disabled).toBeTruthy();
        expect(submitBtn.text()).toEqual('set status disabled')
    });

    it('post status btn should enable when status not empty', async () => {

        let input = wrapper.find("#statusInput");
        input.setValue('new status');
        expect(wrapper.vm.$data.status).toEqual('new status');

        await flushPromises()
        let submitBtn = wrapper.find("#submitBtn");
        submitBtn.trigger('click');
        expect(submitBtn.attributes().disabled).toBeFalsy();
        expect(submitBtn.text()).toEqual('set status')
    });
});

Vue.js unit test make sure component is stable after mount

1 Answers