Vue.js 单元测试确保组件在挂载后稳定答案

【问题标题】：Vue.js unit test make sure component is stable after mountVue.js 单元测试确保组件在挂载后稳定
【发布时间】：2019-01-23 13:55:10
【问题描述】：

在我的组件中，提交 btn 被禁用，直到在输入字段中输入值。但是在安装组件之后，似乎组件还不稳定并且验证没有运行，所以 btn 没有被禁用并且它的文本是“设置状态”。所以测试失败：

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

预计该按钮被禁用并且具有“设置状态禁用”文本。

在浏览器中行为是正确的。

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

【问题讨论】：

您的按钮文本和禁用似乎依赖于invalid 字段。但是，我在组件上看不到它。您是否忘记复制/粘贴 invalid 字段？
此处提供了无效字段

标签： vue.js

【解决方案1】：

实际上现在测试通过了。我不知道到底是什么原因但是，在输入字段中输入值后，这里会启用一些有关如何测试按钮的信息：

yarn add --dev flush-promises

完整的通过规范：

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

【讨论】：