Реагировать на попытки присоединить события под JSDom - PullRequest
Новая
       28

Реагировать на попытки присоединить события под JSDom

0 голосов
/ 22 апреля 2020

Я пытаюсь протестировать свой код React (для браузера) так, как мне кажется, совершенно обычным способом: Mocha как тестовый участник, JSDom для симуляции браузера, Enzyme для проверки результатов.

Моя проблема заключается в следующем: всякий раз, когда я вручную устанавливаю фокус на компоненте, React выдает исключение. Проблема глубоко внутри React : 

 activeElement.attachEvent('onpropertychange', handlePropertyChange);

Активный элемент установлен, но как JSDom HTMLInputElement он не имеет attachEvent. Я обнаружил, что если я взломал файл node_modules/jsdom/lib/jsdom/living/generated/HTMLInputElement.js, чтобы дать этому классу пустые методы с именами attachEvent и detachEvent, исключение исчезнет.

Но ясно, что это не правильное решение.

Комментарии к функции и некоторая фрагментарная информация, которую я нашел в другом месте, предполагают, что это прокладка, предназначенная для античных версий IE, а не JSDom вообще. Используемая функция startWatchingForValueChange вызывается только в том случае, если флаг isInputEventSupported не установлен, и для его установки требуется установить еще один canUseDOM. Принудительная установка любого из этих флагов вызывает другие проблемы.

1 Ответ

0 голосов
/ 22 апреля 2020

Набрав этот вопрос, я понял его.

Когда система тестирования была настроена, при инициализации JSDom я также установил глобальный afterEach() для сброса содержимого DOM после каждого теста. , Это напрямую не создавало проблему, но это означало, что порядок инициализации обязательно был таким:

  1. Реакция
  2. Мокко
  3. JSDom

Поэтому, когда React был инициализирован, он оглянулся и не увидел работающего DOM, и подумал: «Черт, я должен работать на IE или что-то в этом роде». После этого все было вниз.

Так что я уверенно реструктурировал это так:

  1. JSDom
  2. Реакция
  3. Мокко

И это ... ничего не делало.

Тогда я понял, что проблема заключалась в том, что я делал это: 

import { JSDOM } from "jsdom";
import Enzyme from "enzyme";
import Adapter from "enzyme-adapter-react-16";

global.jsdom = initDom();
...

React фактически инициализировал себя, когда был импортировано - путем импорта Enzyme!

Так что я уверенно переписал это так: 

import { JSDOM } from "jsdom";
global.jsdom = initDom();

import Enzyme from "enzyme";
import Adapter from "enzyme-adapter-react-16";

И , что ... ничего не сделал.

Потому что оператор import эффективно поднимается в начало файла.

Так что я уверенно переписал это так: 

import { JSDOM } from "jsdom";
let jsdom = new JSDOM("");
...
const Enzyme = require("enzyme");
const Adapter = require("enzyme-adapter-react-16");

И это ... исправил.

...