Question

我使用Vue ^ 2.6，Vuetify ^ 2.3，Jest ^ 26.2和Vue测试实用程序^ 1.0。

我的登录组件：

<template>
    <v-row>
        <v-sheet>
            <v-row>
                <v-form
                        v-model="loginFormIsValid"
                        :lazy-validation="false"
                >
                    <v-text-field
                            id="cr-login-credential"
                            v-model="credential"
                            :rules="[
                (value) => !!value || 'Required.',
                (v) => /.+@.+\..+/.test(v) || 'E-mail must be valid',
              ]"
                    ></v-text-field>
                    <v-text-field
                            id="cr-login-password"
                            v-model="password"
                            :rules="[(value) => !!value || 'Required.']"
                    ></v-text-field>
                    <v-checkbox
                            v-model="remember_me"
                            id="cr-login-remember_me"
                    ></v-checkbox>
                </v-form>
                <v-btn :disabled="!loginFormIsValid" class="cr-login-submit-btn"/>
            </v-row>
        </v-sheet>
    </v-row>
</template>

<script>
    export default {
        data() {
            return {
                credential: null,
                password: null,
                remember_me: null,
                loginFormIsValid: false,
            };
        },
    };
</script>

我的测试：

import { createLocalVue, mount } from '@vue/test-utils';
import Vuetify from 'vuetify';
import Vue from 'vue';
import { Login } from '@/entry';
import '@testing-library/jest-dom';

Vue.use(Vuetify);
const localVue = createLocalVue();

const factory = (vuetify) => mount(Login, {
  localVue,
  vuetify,
});

describe('Login.vue', () => {
  let vuetify;

  beforeEach(() => {
    vuetify = new Vuetify();
  });
  it('check submit button is disabled if fields are empty', () => {
    const wrapper = factory(vuetify);
    const email = '';
    const password = '';

    wrapper.find('#cr-login-credential').setValue(email);
    wrapper.find('#cr-login-password').setValue(password);

    expect(wrapper.vm.credential).toBe(email);
    expect(wrapper.vm.password).toBe(password);

    expect(wrapper.vm.loginFormIsValid).toBeFalsy();
    expect(wrapper.find('.cr-login-submit-btn').element).toBeDisabled();
  });
});

（我省略了无用的代码）

运行测试时，它失败了：

Error: expect(received).toBeFalsy()

Received: true

数据loginFormIsValid未更新，我的按钮始终为disabled。

能否请您解释一下测试我的数据的好方法？

Answer 1

我刚遇到这个确切的问题。在任何vue-test-utils Vue.nextTick()方法调用之后调用setValue()之后，我能够解决此问题。注意：您需要将这些测试转换为异步功能。

因此，对于您的特定测试，我将尝试以下操作：

it('check submit button is disabled if fields are empty', async () => {
    const wrapper = factory(vuetify);
    const email = '';
    const password = '';

    wrapper.find('#cr-login-credential').setValue(email);
    wrapper.find('#cr-login-password').setValue(password);

    await Vue.nextTick();

    expect(wrapper.vm.credential).toBe(email);
    expect(wrapper.vm.password).toBe(password);

    expect(wrapper.vm.loginFormIsValid).toBeFalsy();
    expect(wrapper.find('.cr-login-submit-btn').element).toBeDisabled();
});

有关更多信息，请参见https://stackoverflow.com/a/60701786/6698029。

使用Vue测试工具和Jest测试Vuetify表单验证

1 个答案: