Question

我似乎无法点击＆＃34;在these上使用vue-test-utils和Vue 2选择框。我使用的是mocha + webpack。

我通过看到visible-change事件永远不会被触发来确定这一点。这是我的spec文件的样子：

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

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

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

---- ---- UPDATE

当我为点击事件设置回调时，我看到了一些内容，但我无法选择＆＃34;此选择输入组件中的任何内容。

Answer 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');

Answer 2

上面的空白答案很有帮助，但是还需要确保您使用

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

无法使用vue-test-utils单击Vue Select Box

2 个答案: