React试图在JSDom下附加Events。

Posted 2021-03-19

我正试图用我认为完全传统的方式来测试我的React（用于浏览器）代码。Mocha作为测试运行器，JSDom模拟浏览器，Enzyme检查结果。

我的问题是：每当我手动设置一个组件的焦点时，React就会抛出一个异常。 问题是 内心深处:

 activeElement.attachEvent('onpropertychange', handlePropertyChange);

活动元素已被设置，但作为JSDom。htmlInputElement它没有一个 attachEvent. 我发现如果我黑了文件 node_modules/jsdom/lib/jsdom/living/generated/HTMLInputElement.js 赋予该类空方法，名为 attachEvent 和 detachEvent，异常情况就会消失。

但显然，这不是正确的解决方案。

关于这个函数的评论，以及我在其他地方找到的一些零碎信息，都表明这是一个针对老版IE的shim，而不是JSDom。 涉及到的函数。startWatchingForValueChange 只有在标志 isInputEventSupported 没有设置，而设置它需要另一个 canUseDOM 要设置。 强行设置其中任何一个标志都会导致其他问题。

答案

打出这个问题，我想明白了。

由于测试系统的设置，我在初始化JSDom的时候，还设置了一个全局的 afterEach() 以在每次测试后重置DOM的内容。 这并没有直接产生问题，但这意味着初始化的顺序必然是这样的。

1. React
2. 摩卡
3. JSDom

所以当React初始化的时候，它环顾四周，看到没有工作的DOM，于是想，"该死的，我一定是在IE上运行的还是什么"。 之后，就一发不可收拾了。

于是我信心满满地把它重组成了这样。

1. JSDom
2. React
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");

这样... 就解决了