无法使用 vue-test-utils 单击 Vue 选择框答案

【问题标题】：Cannot click on Vue Select Box using vue-test-utils无法使用 vue-test-utils 单击 Vue 选择框
【发布时间】：2018-05-26 20:24:15
【问题描述】：

我似乎无法使用 vue-test-utils 和 Vue 2 “点击”these 选择框。我使用的是 mocha + webpack。

我通过查看visible-change 事件从未触发过点击来确定这一点。这是我的规范文件的样子：

...
const wrapper = mount(EntityItem, { propsData });
const selectBox = wrapper.find("el-select");

// I tried these:
selectBox.trigger("click");
selectBox.trigger("click.native");

如果这不起作用，作为最后的手段，我必须手动更改 model 属性以模拟组件更改。

----更新----

当我为点击事件设置回调时，我看到了一些东西，但我无法在这个选择输入组件中“选择”任何东西。

【问题讨论】：

链接（元素 ui）中的选择框有 el-select-dropdown 类，为了选择它们，您需要 wrapper.find(".el-select-dropdown").trigger("click") 来触发点击事件。

标签： node.js webpack vue.js mocha.js vue-test-utils

【解决方案1】：

您正在使用的组件没有使用select 输入元素。为了模拟选择一个选项，你会做这样的事情。

wrapper.findAll('.el-select-dropdown__item').at(1).trigger('click'); // simulates clicking of one of the options

如果您想模拟单击选择元素本身（以显示下拉菜单）。您可以执行以下操作。

 wrapper.find('.el-select-dropdown').trigger('click');

【讨论】：

【解决方案2】：

Whitespace 的上述回答有所帮助，但也需要确保您使用

await Vue.nextTick()

在您的期望声明之前。像这样：

wrapper.findAll('.el-select-dropdown__item').at(1).trigger('click');
await Vue.nextTick();
expect(enterResultBtn.is('[disabled]')).toBe(true);

这允许 DOM 更新它的循环，更多 info here

【讨论】：