时间戳

首页 > 解决方案 > 如何使用 vue 测试工具触发鼠标中键

vue.js - 如何使用 vue 测试工具触发鼠标中键

问题描述

我正在为一个选项卡组件编写一个测试，该组件应该通过 x 图标关闭选项卡，也可以通过鼠标中键单击来关闭选项卡。x 图标的测试没有问题，但我很难触发这个鼠标中键事件。

我本来希望它可以与此一起使用：

wrapper.find('.tab').trigger('click', { button: 1 });

也试过：

wrapper.find('.tab').trigger('click.middle');

找到的组件不是问题。出于测试目的，我将关闭功能与正常的点击事件挂钩，这样测试就成功了。

这可能与我如何在选项卡组件上实现中间点击有关吗？这样做是这样的：

<div class="tab"
    @mousedown.prevent @click.middle="close()"
[...]
</div>

任何线索如何工作？该文档没有详细介绍该主题。

标签： vue.jsjestjsvue-test-utils

解决方案

我在测试在同一元素上有多个鼠标事件的组件时遇到了这个问题。为了测试@click.middle，我不得不触发一个“mouseup”事件。

尝试这个：

wrapper.find('.tab').trigger('mouseup', { button: 1 })

推荐阅读