Блог

Главная - Вопросы по программированию - Почему document.activeElement не указывает на сфокусированный элемент в JSDom при тестировании компонента Vue с помощью Jest?

Почему document.activeElement не указывает на сфокусированный элемент в JSDom при тестировании компонента Vue с помощью Jest?

#javascript #vue.js #jestjs #jsdom

#javascript #vue.js #jestjs #jsdom

Вопрос:

Я тестирую Vue.js 2 компонент vue-test-utils , использующий jest и. Этот компонент автоматически устанавливает фокус на определенный элемент. JSDom должен указывать на этот элемент в document.activeElement переменной, но даже если я устанавливаю фокус вручную внутри теста с помощью wrapper.find(...).element.focus() , он всегда указывает только на элемент body .

 it('focuses the default option automatically', async () => {
  const wrapper = await mount(component);
  console.log(document.activeElement); // -> <body></body>
  // expect(document.activeElement.value).toBe('none');
});

Ответ №1:

Когда вы монтируете компонент с помощью vue-test-utils, он не подключается к JSDom автоматически. Вам нужно подключить его, используя attachTo опцию mount() / shallowMount() функции.

 const wrapper = await mount(component, {
  attachTo: document.body, // ← added!
});

В конечном итоге меня насторожила эта проблема в репозитории enzymejs: https://github.com/enzymejs/enzyme/issues/2337#issuecomment-586583502

Кроме того, что касается фокуса, существуют проблемы с определенными версиями JSDom (для меня v16 работает нормально), и при некоторых обстоятельствах tabindex атрибут требуется: https://github.com/jsdom/jsdom/issues/2586

Метки: