React试图在JSDom下附加Events。

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

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

 activeElement.attachEvent('onpropertychange', handlePropertyChange);

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

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

关于这个函数的评论,以及我在其他地方找到的一些零碎信息,都表明这是一个针对老版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");

这样… 就解决了

给TA打赏
共{{data.count}}人
人已打赏
解决方案

如何在 success_url 中传递上下文数据?

2022-4-21 16:09:19

解决方案

我想在python中迭代一个松弛通道的消息和时间戳。

2022-4-21 17:01:40

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索