使用vue-test-utils测试两个不同的点击事件
可以通过以下步骤进行：
- 首先，安装vue-test-utils和Jest（或其他测试框架）作为开发依赖项：
npm install --save-dev @vue/test-utils jest- 创建一个测试文件，例如
Button.spec.js，并导入所需的依赖项：
import { mount } from '@vue/test-utils';
import Button from '@/components/Button.vue';- 编写测试用例，测试两个不同的点击事件。假设
Button组件有两个按钮，分别是buttonA和buttonB，并且分别绑定了handleClickA和handleClickB两个点击事件：
describe('Button', () => {
it('触发buttonA的点击事件', () => {
const wrapper = mount(Button);
const buttonA = wrapper.find('.buttonA');
buttonA.trigger('click');
expect(wrapper.emitted().handleClickA).toBeTruthy();
});
it('触发buttonB的点击事件', () => {
const wrapper = mount(Button);
const buttonB = wrapper.find('.buttonB');
buttonB.trigger('click');
expect(wrapper.emitted().handleClickB).toBeTruthy();
});
});- 运行测试用例，确保测试通过：
npm run test在上述代码中，我们使用mount函数来挂载Button组件，并通过wrapper.find方法找到对应的按钮元素。然后，使用trigger方法模拟点击事件。最后，使用expect断言来验证是否成功触发了对应的点击事件。
请注意，上述代码中的.buttonA和.buttonB是示例中的类选择器，你需要根据实际情况修改为你的组件中按钮的选择器。
推荐的腾讯云相关产品：无
参考链接：
相关·内容
4回答
vue-test-util单击触发器按钮不触发。
javascript、vue.js、jestjs、vuetify.js、vue-test-utils
我有一个带按钮的Vue组件。在单击按钮时，调用一个方法。我用Jest做单元测试。我期望来自vue-test-utils的vue-test-utils方法在按钮上创建一个合成事件，但它什么也不做。
我尝试通过调用wrapper.vm.addService()直接在包装器上调用该方法，然后使用console.log(wrapper.emitted())，我确实可以看到已经触发了一个事件。所以我的问题是为什么addServiceBtn.trigger('click')什么都不做。
console.log(wrapper.emitted())是一个空对象。测试结果失败，错误消息为：Ex
浏览 0提问于2018-11-23得票数 9
回答已采纳
1回答
如何在Jest / Vue-test-utils测试中导入/包含插件？
javascript、vue.js、jestjs、vue-test-utils
当使用Jest和Vue-test-utils测试基本按钮实现时，测试工作正常，但我收到以下警告：
Vue警告:未知的自定义元素:B-按钮-正确注册组件吗？对于递归组件，请确保提供"name“选项。
我很有信心是因为我没有正确地包含Buefy插件依赖项，而且我在这里没有太多的经验。下面是基本按钮的单个文件组件：
<template>
<b-button data-testid="base-button" @click="$emit('click')">
{{ buttonLabel }}
<
浏览 7提问于2022-01-31得票数 0
回答已采纳
1回答
如何在使用shallowMount的vue-test-utils进行单元测试时找到元素vue的组件？
vue.js、jestjs、element-ui、vue-test-utils
在阅读了vue-test-utils的文档之后，我正在尝试提交。
希望有人能澄清我的困惑。
import { mount, shallowMount } from '@vue/test-utils'
import Vue from 'vue'
import Form from '@/components/Form/index.vue'
import ElementUI from 'element-ui'
Vue.use(ElementUI)
describe('Form.vue', () => {
/
浏览 2提问于2019-04-14得票数 0
回答已采纳
1回答
vuetify按钮触发器即使使用spy也不起作用
javascript、vue.js、unit-testing、vuetify.js
开始学习vuejs和jest是如何工作的。看了一些视频，然后我自己开始尝试，但由于触发器点击而不断失败。
我的组件中有一个登录按钮，这是我在组件中唯一拥有的v-btn
<v-card-actions>
<v-btn
block
:disabled="!valid"
color="info"
class="mr-4"
@click.native="on_login"
浏览 0提问于2021-07-12得票数 1
1回答
VueJS测试-utils无法在子组件中找到元素
vue.js、unit-testing、jestjs、vue-test-utils
我试图使用findComponent和find方法来查找子组件的元素并设置它的值。但是每次我运行测试时，它都会给我Cannot call setValue on an empty DOMWrapper.错误。
测试文件
import { mount } from '@vue/test-utils';
import Create from './Create.vue';
// import State from '@/components/State.vue';
describe('it tests Create componen
浏览 23提问于2021-10-10得票数 1
回答已采纳
1回答
测试使用Vuetify的NuxtJS组件
vue.js、jestjs、vuetify.js、nuxt.js
我想在一个NuxtJS项目中用jest对使用Vuetify的组件进行单元测试。当我想选择一个按钮(v-btn)时，jest输出以下内容：
[vue-test-utils]: find did not return .v-btn, cannot call text() on empty Wrapper
我遵循了vuetify的官方文档进行单元测试。
// myComponent.vue
<template>
<v-menu offset-y>
<v-btn color="primary">
myLabel
&
浏览 0提问于2020-01-29得票数 2
1回答
jest单元测试失败，setData似乎无法工作
node.js、vue.js、jestjs
我正在按照教程学习如何使用jest对我的vue应用程序进行单元测试。我设置了这个名为AppHeader的组件，其中包含一个只有在变量"loggedIn“为真时才可见的按钮。 为了将值"loggedIn“设置为true，我使用.setData来更改它的值。我是不是不正确地使用了setData，还是发生了其他事情？ AppHeader： <template>
<div>
<button v-show="loggedIn">Logout</button>
</div>
</templa
浏览 63提问于2021-10-25得票数 1
回答已采纳
5回答
如何使用vue-test-utils打开bootstrap-vue模式？
vue.js、bootstrap-vue、vue-test-utils
我使用bootstrap作为我的设计框架，并且一直在使用bootstrap-vue。现在，我想实现一些测试来配合我的组件。我正在编写一个非常简单的测试，以确保模式是打开的。我在vue-test-utils中使用什么来打开bootstrap-vue模式？
我使用的是Laravel、bootstrap-vue、vue-test-utils、mocha和mocha-mocha附带的基础知识。
我正试着用wrapper.find('#modal-1').trigger('click')打开模式。我尝试过使用我尝试使用的事件<b-button @click="
浏览 2提问于2019-05-21得票数 8
1回答
在Jest + Vue测试Utils中触发未更新调用计数的提交事件
javascript、vue.js、vuejs2、jestjs、vue-test-utils
在Vue 2.6.12 with Jest："^27.5.1"和"@vue/test-utils": "^1.3.0",中，我尝试使用jest模拟async方法。当我断言我的方法已被调用1次时，它会返回未被调用的方法。我是不是做错了什么事？
更新电子邮件测试
import {mount} from '@vue/test-utils';
import UpdateEmail from './components/update-email.vue';
//validate form metho
浏览 6提问于2022-03-14得票数 0
回答已采纳
1回答
vue-test-utils:在子组件上使用@click属性时无法检测方法调用
vue.js、vue-component、vue-test-utils
在子组件上使用@click属性时，Vue-test-utils无法检测方法调用，但是当在本机HTML-元素(例如按钮)上使用@click属性时，能够检测到方法调用。让我示范一下：
这工作：
// Test.vue
<template>
<form @submit.prevent>
<button name="button" type="button" @click="click">Test</button>
</form>
</template>
浏览 5提问于2022-01-14得票数 0
8回答
[Vue警告]：未知的自定义元素：<nuxt-link> -当运行jest单元测试时
vue.js、jestjs、vue-router、nuxt.js、vue-test-utils
问题
我使用nuxt1.4进行路由，使用Jest进行单元测试。我的应用程序不会抛出错误，而且看起来工作得很好。然而，当运行我的单元测试npm run unit (运行玩笑)时，它会在终端[Vue warn]: Unknown custom element: <nuxt-link> - did you register the component correctly? For recursive components, make sure to provide the "name" option.中抛出一个错误。
期望
我希望它不会抛出这个错误，因为我的应用程序正在工
浏览 4提问于2018-04-05得票数 31
回答已采纳
2回答
事件点击单元测试VUE
vue.js、vuejs2、vuetify.js、vue-test-utils
我的click-event测试无法正常工作。 我使用的是一个验证组件：v-btn，但我的click-event似乎没有调度。我试着使用一个普通的按钮标签，但结果是一样的。我是测试新手，这实际上是我的第一次运行，所以欢迎提示和指针。 这是我正在测试的组件： <template>
<div>
<div class="marked">
<h2>Clicks: {{ counter }}</h2>
</div>
<v-btn @click="addOne
浏览 40提问于2020-06-20得票数 1
回答已采纳
1回答
如何纠正isVueInstance在vue.js2中被废弃的错误？
vue.js、unit-testing、vuejs2、vue-test-utils、vue-jest
我在vue.js2中对测试用例使用vue-jest，我有一个名为Register.vue的组件，因为我将测试用例定义为Register.spec.js，当我运行npm时，它运行得很好，但是我得到了以下错误(但是测试用例都通过了)。如何纠正这个错误，请给我一个例子，如何写失败的测试用例，请帮助我解决这个问题。
Register.vue
<template>
<div class="main">
<div class="container">
<img id="side-img" sr
浏览 4提问于2021-06-25得票数 0
回答已采纳
1回答
Vue公式不看错误的单元检验
vue.js、vue-test-utils、vue-formulate
我开始在Vue中使用Jest和Vue- testing测试组件。我正在使用来管理表单字段，它在浏览器中按照预期工作。根据文档，我正在“本地Vue”测试实例中导入插件。
但是，下面的断言在测试中找不到文本时失败，而它在浏览器中工作。我做错了什么？我尝试过多种选择器，包括wrapper.text()，但都没有成功。
组件：
<template>
<div class="card">
<FormulateForm v-model="formValues">
<FormulateInput type=&#
浏览 3提问于2021-01-10得票数 0
回答已采纳
1回答
Nuxt/Jest -语法错误:意外的标记{
vue.js、jestjs、nuxt.js、vue-test-utils
我已经安装了Vue Test tools，安装了Jest，并有一个测试用例来验证vue实例是否正常工作。 我的测试如下所示 /* global describe, test, expect */
/* eslint no-undef: "error" */
import { mount } from '@vue/test-utils';
import Logo from '@/components/Logo';
describe('Logo', ()=> {
test('is a vue instance'
浏览 22提问于2021-08-25得票数 0
回答已采纳
1回答
使用JEST对Vue.js路由器进行单元测试-如何模拟页面？
javascript、vuejs2、jestjs
我正在尝试对我的路由器路由进行单元测试，根据各种示例，我提出了一些测试用例。我已经将我的路由器分成了路由、防护和路由器本身的独立模块，以使其更容易测试，所以我实际上只是在这里测试路由定义。这是我的路线示例..。
import Guards from './guards'
import Views from '@/views'
export default [
{
path: '/',
props: true,
components: {
default: Views
浏览 56提问于2019-08-19得票数 2
回答已采纳
1回答
验证观测器中v-槽的测试
unit-testing、vue.js、vuejs2、jestjs、vue-test-utils
我进入了一个场景，我需要检查v槽是否包含'handleSubmit‘和’无效‘。使用jest编写测试用例
<ValidationObserver v-slot="{ handleSubmit , invalid }">
<form @submit.prevent="handleSubmit(submit)">
.....
.....
</form>
</ValidationObserver>
"vue"："^2.6.10"
浏览 1提问于2020-02-17得票数 3
1回答
vue-test-utils安装程序获取TypeError:无法在字符串上创建属性“_Ctor”
vue.js、vuejs2、jestjs、webpacker、vue-test-utils
我一直在跟踪和，用vue-test-utils和vue 2在Rails 5.1上用webpacker安装jest测试。我能够在没有vue组件的情况下运行基本测试，但是尝试挂载vue组件会导致错误：
TypeError: Cannot create property '_Ctor' on string 'PostAddress'
7 |
8 | it('mounts', () => {
> 9 | let wrapper = shallow('PostAddress
浏览 2提问于2018-03-20得票数 5
回答已采纳
1回答
如何在VueTestUtils / Jest中模拟Web？
javascript、vue.js、jestjs、vue-test-utils
我想在一个非常简单的Vue组件上设置一个单元测试，默认的Vue test插件耦合到。
在单击按钮时，处理程序调用两个方法：
emitEvent()：要发出一个事件(我测试的实际目标)，
effectUI()：用于UI效果(使用Web动画API)。此动画应用于“粒子”阵列的每个“粒子”。我还不想测试这一部分，但这是一个有问题的部分。
在运行组件时，我工作得很好。没有警告，没有错误。
但当我做测试的时候，它通过了.console.error声明'particle.animate‘不是一个函数。
我试过：
首先，不要做什么特别的事情:因为EffectUI()方法与clic
浏览 0提问于2019-07-20得票数 1
回答已采纳
1回答
Vue测试(Jest)：无法找到按钮
typescript、ts-jest
我有一个简单的测试：
import { mount } from "@vue/test-utils";
import sinon from "sinon";
import HelloWorld from "../../../../src/DSS/web_resources/CreateSubprocessForm/HelloWorld.vue";
test("Click on yes button calls our method with argument yes", async () => {
const sp
浏览 1提问于2022-01-19得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
