如何在使用 Vue 测试库测试 v-autocomplete 时触发 'blur' 事件？

Question

我正在为 Vuetify v-autocomplete 包装器组件编写一个测试，该组件检查在模糊时显示的错误消息。然而，错误输出显示输入 select 保持打开状态并且基本元素具有焦点 class。我不知道我做错了什么。测试代码如下：

it('should display error if field is empty', async () => {
    const { queryByLabelText, queryByText } = renderWithVuetify(MyComponent);

    await fireEvent.click(queryByLabelText('Label')); // Open v-autocomplete input select
    await fireEvent.click(document); // Should 'blur' input. Tried different elements here like document.body, Vuetify app root etc. Even dummy element next to v-autocomplete

    expect(queryByText('This field is required')).not.toBeNull();
});

Answer 1

您可以使用：

document.activeElement.blur();

删除所有焦点元素。

Answer 2

事实证明，在旧的 Vuetify 版本中，ClickOutside 指令检查事件是否受信任属性，如果以编程方式调度事件，则显然设置为 false。更新 vuetify 或破解 addEventListener 解决了这个问题。

如何在使用 Vue 测试库测试 v-autocomplete 时触发 'blur' 事件？

How can I trigger the 'blur' event while testing v-autocomplete using Vue Testing Library?

unit-testing

vue.js

vuetify.js

vue-testing-library