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

Posted 2023-02-22

【中文标题】使用 Vue 测试工具和 Jest 测试 Vuetify 表单验证

【英文标题】：Test Vuetify form validation with Vue test utils and Jest

【发布时间】：2020-11-25 07:28:52

【问题描述】：

我使用 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。

你能解释一下测试我的数据的好过程吗？

【参考方案1】：

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

所以对于您的具体测试，我会尝试以下方法：

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://***.com/a/60701786/6698029。