Unit testing 在Vue.js中分派操作的单元测试方法

我很难在组件中对方法进行单元测试，我想测试

validations（）

、

clear（）

和

registerUser（）

方法，但我似乎无法增加代码覆盖率。以下是组成部分：

<template>

    <v-col class="pa-lg-10">
        <v-card class=" mx-auto">
            <form class="pa-10">
                <p class="reg-text">Registration</p>
                <v-text-field v-model="name" label="Name" required></v-text-field>
                <v-text-field v-model="email" label="E-mail" required></v-text-field>
                <v-text-field v-model="address" label="Address" required></v-text-field>
                <v-text-field v-model="phoneNumber" label="Phone Number"></v-text-field>
                <v-text-field v-model="password" label="Password" :type="'password'" required></v-text-field>
                <v-btn class="mr-4" color="primary" @click="registerUser">Register</v-btn>
                <v-btn @click="clear">clear</v-btn>
            </form>
        </v-card>
        <SnackBar/>
    </v-col>


</template>

<script>
    import {mapActions, mapGetters} from "vuex";
    import SnackBar from "./SnackBar";

    export default {
        name: "RegisterUsers",
        components: {
            SnackBar
        },
        data() {
            return {
                name: '',
                email: '',
                address: '',
                phoneNumber: '',
                password: '',
                formHasErrors: false,
            }
        },
        methods: {
            registerUser() {
                const formData = {
                    name: this.name,
                    email: this.email,
                    address: this.address,
                    number: this.phoneNumber,
                    password: this.password,
                };

                if (!this.validations()) {
                    this.register(formData);
                }
            },
            clear() {
                this.name = "";
                this.email = "";
                this.address = "";
                this.phoneNumber = "";
                this.password = "";
            },
            validations() {
                // eslint-disable-next-line no-useless-escape
                const mailFormat = /\S+@\S+\.\S+/;
                const vm = this;
                setTimeout(() => {
                    vm.reset_snackbar();
                }, 2000);
                if (this.email === '') {
                    this.toast_snackbar_on_error('Email is required');
                    return true;
                }

                if (mailFormat.test(this.email.toString()) !== true) {
                    this.toast_snackbar_on_error('Please enter a valid mail');
                    return true;
                }

                if (this.name === '') {
                    this.toast_snackbar_on_error('Name is required');
                    return true;
                }
                if (this.address === '') {
                    this.toast_snackbar_on_error('Address is required');
                    return true;
                }
                if (this.password === '') {
                    this.toast_snackbar_on_error('Password  is required');
                    return true;
                }
                return this.formHasErrors;
            },
            ...mapActions({
                register: 'register/registerUsers',
                reset_snackbar: 'register/reset_snackbar',
                toast_snackbar_on_error: 'register/toast_snackbar_on_error',

            }),
            computed: {
                ...mapGetters('register', ['snackbar_status']),
            },

        },
    };
</script>

<style scoped>
    div{
        color: inherit;
    }
    .reg-text {
        color: black;
        text-align: center;
        font-size: 20px;
        font-weight: bold;
    }
</style>

您在测试中看到的css类

s-text

就是包装

SnackBar

消息的类

---

我需要这里的指导。

您使用的是

shallowMount

。这将删除所有组件-将没有要查找的

按钮

另一种写这篇文章的方法是

it（“应该期望有输入字段”，（）=>{
常量包装器=装入（寄存器用户{
名称：“”，
电邮:'ab@gmail.com',
地址：“坎帕拉布齐加”，
电话号码：“0704594180”，
密码：“939”，
formHasErrors:false，
});
const button=wrapper.find（{name:'v-btn'}）
按钮。触发器（'click'）；
expect（wrapper.classes（'s-text'））.toBe（false）；
})

很可能这仍然会导致问题。您正在使用Vuetify和其他一些插件，这些插件尚未安装。您需要使用安装

一旦您让它在没有错误的情况下运行，您就可以执行类似于
wrapper.find（'button'）.trigger（'click'）
的操作，它应该调用
registerUsers
。如果不想使用真正的Vuex应用商店，请执行以下操作：


常数存储={
快讯：jest.fn（）
}
安装（组件、{
模拟：{
$store
}
}

it("should expect to have input fields", () => {

        const wrapper = shallowMount(RegisterUsers);

        wrapper.setData({ name: '',
          email: 'ab@gmail.com',
          address: 'Buziga, Kampala',
          phoneNumber: '0704594180',
          password: '9393939',
          formHasErrors: false,});

        const button = wrapper.find({name: 'v-btn'})
        button.trigger('click');

        expect(wrapper.classes('s-text')).toBe(false);
    })