使用 Jest、Vue、Vuetify 和 Pug 运行单元测试答案

【问题标题】：Run unit test with Jest, Vue, Vuetify, and Pug使用 Jest、Vue、Vuetify 和 Pug 运行单元测试
【发布时间】：2020-07-31 14:44:38
【问题描述】：

我目前正在开发一个项目，该项目使用 Vue、基于类的组件、typescript、pug、vuetify 和 Jest 进行单元测试。我一直在尝试使用 jest 运行单元测试，但无法让它们工作。在这一点上，我很不知道可能出了什么问题。使用 vueifty 时似乎存在单元测试问题，我认为我已经解决了但不确定。当我运行测试时，测试失败，因为包装器总是空的。

组件

<template lang="pug">
    v-row(align="center" justify="center")
        v-col(cols="6")
            v-card
                v-form(ref="loginForm" v-model="valid" v-on:keyup.enter.native="login")
                    v-card-title#title Login
                    v-card-text
                        v-text-field(class="mt-4" label="Username" required outlined v-model="username" :rules="[() => !!username || 'Username Required.']")
                        v-text-field(label="Password" required outlined password :type="show ? 'text' : 'password'" :append-icon="show ? 'visibility' : 'visibility_off'" @click:append="show = !show" v-model="password" :rules="[() => !!password || 'Password Required.']")
                    v-alert(v-if="error" v-model="error" type="error" dense dismissible class="mx-4")
                        | Error while logging in: {{ errorMsg }}

                    v-card-actions()
                        div(class="flex-grow-1")    
                        v-btn(class="mr-4" color="teal" :disabled="!valid" large depressed @click="login") Login

                div Forgot password?
                    a(href="/forgot-password" class="mx-2") Click here

                div(class="my-2") Don't have an account?
                    a(href="/signup" class="mx-2") Signup
                    | for one
</template>

<script lang="ts">
import { AxiosError, AxiosResponse } from 'axios';
import JwtDecode from 'jwt-decode';
import { Component, Vue } from 'vue-property-decorator';

import { TokenDto, VForm } from '@/interfaces/GlobalTypes';

@Component({
    name: 'LoginForm',
})
export default class Login extends Vue {
    private password: string = '';
    private username: string = '';
    private show: boolean = false;
    private error: boolean = false;
    private errorMsg: string = '';

    private valid: boolean = false;

    ... removed rest for brevity

测试

import LoginForm from '@/components/auth/LoginForm.vue';
import login from '@/views/auth/LoginView.vue';
import { createLocalVue, mount } from '@vue/test-utils';
import Vue from 'vue';
import Vuetify from 'vuetify';
// jest.mock('axios')

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


describe('LoginForm.vue', () => {
    let vuetify: any
  beforeEach(() => {
    vuetify = new Vuetify()

  });

  it('should log in successfully', () => {
      const wrapper = mount(LoginForm, {
          localVue,
          vuetify
      })
      console.log(wrapper.find('.v-btn'))
  });
});

LoginForm 已正确加载，但由于某种原因，该安装似乎没有创建包装器。当我记录包装器时，我得到：

    VueWrapper {
      isFunctionalComponent: undefined,
      _emitted: [Object: null prototype] {},
      _emittedByOrder: []
    }

任何想法都非常受欢迎

【问题讨论】：

标签： unit-testing vue.js jestjs vuetify.js vue-test-utils

【解决方案1】：

你可以试试：

wrapper.findComponent({name: 'v-btn'})

【讨论】：

【解决方案2】：

我想我迟到了，但我成功了。我注意到您试图通过“v-btn”类查找 VBtn 组件，但默认情况下 VBtn 没有它。这就是为什么我决定用我自己的具有“v-btn”类的 VBtn 来存根它。

import { shallowMount, Wrapper } from '@vue/test-utils'
import Login from '@/components/Login/Login.vue'
import Vue from 'vue'
import Vuetify from 'vuetify'

Vue.use(Vuetify)

let wrapper: Wrapper<Login & { [ key: string]: any }>
const VButtonStub = {
  template: '<button class="v-btn"/>'
}

describe('LoginForm.vue', () => {
  beforeEach(() => {
    wrapper = shallowMount(Login, {
      stubs: {
        VBtn: VButtonStub
      }
    })
  })

  it('should log in successfully', () => {
    console.log(wrapper.html())
  })
})

测试通过后，您将在控制台日志中看到存根组件具有“v-btn”类。您可以添加自己的并随心所欲地使用它。

【讨论】：