单元测试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: '[e-mail]',
          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: '[e-mail]',
    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和其他一些没有安装的插件。您需要使用以下方法安装这些插件 本位面.

一旦你让它无误地运行，你可以做一些类似于 wrapper.find('button').trigger('click') 该叫 registerUsers. 如果你不想使用真正的Vuex商店，可以这样做。

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

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