关键词:
【中文标题】使用 Jest、Vue、Vuetify 和 Pug 运行单元测试【英文标题】:Run unit test with Jest, Vue, Vuetify, and 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: []
任何想法都非常受欢迎
【问题讨论】:
【参考方案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”类。您可以添加自己的并随心所欲地使用它。
【讨论】:
使用 Vue 测试工具和 Jest 测试 Vuetify 表单验证
】使用Vue测试工具和Jest测试Vuetify表单验证【英文标题】:TestVuetifyformvalidationwithVuetestutilsandJest【发布时间】:2020-11-2507:28:52【问题描述】:我使用Vue^2.6、Vuetify^2.3、Jest^26.2和Vue测试工具^1.0。我的登录组件:<template><v-row&g... 查看详情
如何在带有 vuetify 和 vuex 的 Vuejs 项目中使用 Jest?节点模块和 Vuetify 问题
】如何在带有vuetify和vuex的Vuejs项目中使用Jest?节点模块和Vuetify问题【英文标题】:HowtouseJestinaVuejsprojectwithvuetifyandvuex?nodemodulesandvuetifyproblems【发布时间】:2020-11-0923:56:07【问题描述】:我目前正在使用Jest测试一个使用Vuex和Vuet... 查看详情
无法使用 Jest 中的提交按钮触发 Vuetify 表单提交
】无法使用Jest中的提交按钮触发Vuetify表单提交【英文标题】:FailtotriggerVuetifyformsubmitusingsubmitbuttoninJest【发布时间】:2020-06-2608:11:36【问题描述】:我正在尝试使用Jest和Avoriaz验证基于Vuetify组件的Vue表单的行为。我可以在表单... 查看详情
两个 shallowmount 抛出错误 Jest VueJs(Vuetify)
】两个shallowmount抛出错误JestVueJs(Vuetify)【英文标题】:TwoshallowmountthrowerrorJestVueJs(Vuetify)【发布时间】:2020-09-0115:15:05【问题描述】:我正在使用VueJs和Vuetify,我想测试我的组件:importshallowMount,createLocalVuefrom\'@vue/test-utils\'importUse... 查看详情
使用 Jest 对 Vuetify 数据表进行单元测试
】使用Jest对Vuetify数据表进行单元测试【英文标题】:UnittestingaVuetifyDataTablewithJest【发布时间】:2020-08-1212:29:28【问题描述】:我已经使用Vuetify创建了一个Vue.js应用程序,现在我正在尝试对包含Vuetify数据表的组件进行单元测试... 查看详情
Vuetify Jest 未知自定义元素 <v-*>
】VuetifyJest未知自定义元素<v-*>【英文标题】:VuetifyJestUnknowncustomelement<v-*>【发布时间】:2020-09-0100:03:23【问题描述】:我正在使用Jest为我的项目编写单元测试。项目基于Vue、Vuetify(1.5)和TypeScript(以及vue-property-decorator... 查看详情
vue.js vuetify : test-utils w Jest 如何在使用图标时匹配文本
】vue.jsvuetify:test-utilswJest如何在使用图标时匹配文本【英文标题】:vue.jsvuetify:test-utilswJesthowtomatchtextwhenusingicon【发布时间】:2019-02-0116:11:47【问题描述】:给定以下生成的html<ahref="#"class="primaryInversedv-btnv-btn--largev-btn--round"<d... 查看详情
使用 Jest 进行测试时无法执行单击 Vuetify vSwitch
】使用Jest进行测试时无法执行单击VuetifyvSwitch【英文标题】:UnabletoperformclickonVuetifyvSwitchwhentestingwithJest【发布时间】:2020-03-2300:08:57【问题描述】:我目前正在为实现VuetifySwitch的Vue组件编写测试。作为测试的一部分,我想检查v... 查看详情
vuetify 插件 2021 上的未知自定义元素 Vue Jest 测试 - Vue Cli 2
】vuetify插件2021上的未知自定义元素VueJest测试-VueCli2【英文标题】:UnknowncustomelementVueJestTestingonvuetifyplugin2021-VueCli2【发布时间】:2021-07-2902:10:40【问题描述】:在jest.config.js中配置setup.js并不能解决错误setup.jsimportVuefrom"vue";importVu... 查看详情
使用 Jest 测试 Nuxt + Vuex + Vuetify 的设置
】使用Jest测试Nuxt+Vuex+Vuetify的设置【英文标题】:TestingsetupforNuxt+Vuex+VuetifywithJest【发布时间】:2020-05-0517:35:46【问题描述】:我花了一天时间解决有关Nuxt+Vuex+VuetifywithJest测试设置的未记录问题。我遇到了以下问题:Unknowncustomele... 查看详情
Vue/Typescript/Jest - Jest 单元测试语法错误:意外的令牌导入
...2019-03-2718:14:59【问题描述】:我正在运行一个Vue/Typescript/Vuetify项目(使用vuecli3创建)。对于单元测试,我使用的是Jest。我升级到了更新版本的Vue 查看详情
jest + vuejs + vuetify 的意外标识符
】jest+vuejs+vuetify的意外标识符【英文标题】:Unexpectedidentifierwithjest+vuejs+vuetify【发布时间】:2019-07-3022:56:35【问题描述】:我已经到处寻找答案。我怀疑这是.babelrc问题,但我找不到有效的答案。应用程序运行良好,但我发现,J... 查看详情
如何安装和开始使用 Vuetify 和 Vue.js 3
】如何安装和开始使用Vuetify和Vue.js3【英文标题】:HowtoinstallandgetstartedwithVuetifyandVue.js3【发布时间】:2021-07-2414:20:33【问题描述】:在哪里可以找到与Vue.js3兼容的新Vuetify版本文档以及如何使用Vuecli安装和设置它:在vue2中我们这... 查看详情
vuetify test-utils & Jest:按钮点击未处理
】vuetifytest-utils&Jest:按钮点击未处理【英文标题】:vuetifytest-utils&Jest:buttonclicknothandled【发布时间】:2019-03-0416:44:33【问题描述】:给定以下AudioPlayer.vue组件<template><divstyle="display:inline-block;"><v-btnid="playPaus 查看详情
使用 Jest 和 vue-utils 测试 Vue 组件
】使用Jest和vue-utils测试Vue组件【英文标题】:TestVuecomponentsusingJestandvue-utils【发布时间】:2019-04-1920:52:09【问题描述】:我正在尝试使用jest和vue-utils测试在vue中调用的组件,但它给出了以下错误expect(jest.fn()).toHaveBeenCalled()Expected... 查看详情
如何设置 Webpack 以便能够在单文件组件(.vue)和“vue-class-component”类中使用 Pug?
...k以便能够在单文件组件(.vue)和“vue-class-component”类中使用Pug?【英文标题】:HowtosetupWebpacksothatwillbeabletousePuginbothSingleFileComponents(.vue)and"vue-class-component"classes?【发布时间】:2019-08-0419:50:22【问题描述】:根据Vue.js 查看详情
获取导入错误 vuejs + jest + Vuetify
】获取导入错误vuejs+jest+Vuetify【英文标题】:Gettingimporterrorvuejs+jest+Vuetify【发布时间】:2018-06-1113:01:15【问题描述】:运行单元测试时出现以下导入错误●测试套件无法运行/Users/aniruddha/works/awsportal_2/node_modules/vuetify/es5/components/V... 查看详情
测试 Vuetify (Vue.js) - 挂载的第二次调用抛出错误
】测试Vuetify(Vue.js)-挂载的第二次调用抛出错误【英文标题】:TestingVuetify(Vue.js)-Secondcallonmountthrowserror【发布时间】:2020-03-2301:02:15【问题描述】:我目前在测试我的Vue应用程序时遇到了一种行为(特别是在包含vuetify时)。我使... 查看详情