vue.js - 如何在使用 Vue 测试库测试 v-autocomplete 时触发“模糊”事件？

Question

我正在为 Vuetify v-autocomplete 包装器组件编写测试，该组件检查模糊时显示的错误消息。但是错误输出显示输入选择保持打开状态并且基本元素具有焦点类。我无法弄清楚我做错了什么。测试代码如下：

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

原来在旧的 Vuetify 版本中 ClickOutside 指令检查事件 isTrusted 属性，如果事件以编程方式调度，则该属性显然设置为 false。更新 vuetify 或破解 addEventListener 可解决此问题。

Answer 2

您可以使用：

document.activeElement.blur();

删除所有焦点元素。