在 Vue.js 中调度动作的单元测试方法

Question

我无法对组件中的方法进行单元测试，我想测试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>

我尝试在插入过程中模拟一些数据，但是，我似乎无法使用这些方法。其次，我还希望收到来自SnackBar 的消息，但我似乎也无法定位它。

如何测试这个组件方法。

以下是我的测试：

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

您在测试中看到的 css 类s-text 是包装SnackBar 消息的类。

我在这里需要指导。

Answer 1

您正在使用shallowMount。这将排除所有组件 - 将找不到 button。

另一种写法是

it("should expect to have input fields", () => {
  const wrapper = mount(RegisterUsers, {
    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);
})

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

一旦你让它运行起来没有错误，你可以做类似wrapper.find('button').trigger('click')的事情，它应该调用registerUsers。如果您不想使用真正的 Vuex 商店，请执行以下操作：

const store = {
  dispatch: jest.fn()
}

mount(Component, {
  mocks: {
    $store
  }
}