Как я могу вызвать событие «размытие» при тестировании v-autocomplete с использованием библиотеки тестирования Vue?

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

Вы можете использовать:

      document.activeElement.blur();

чтобы удалить все сфокусированные элементы.

Answer 2

Оказалось, что в старой версии Vuetify директива ClickOutside проверяет свойство isTrusted события, которое, очевидно, имеет значение false, если событие отправляется программно. Обновление vuetify или взлом addEventListener решает проблему.