在 iframe 的缩小代码中模拟 React 事件



我有文件main.jstest.js,包含编译的clojurescript代码。

当我打开my-site.com/test时,它会加载test.js,这会将iframe添加到加载my-site.com/main的页面中,而该页面又加载main.js。 然后,test.js测试用户与 iframe 内my-site.com/main的各种交互。

问题是我正在使用React,所以我需要模拟React事件。 我使用这种 iframe 结构的部分原因是因为我了解到React.addons.TestUtils不是在缩小的代码中加载的。 我认为,通过不缩小test.js,我可以使用其React.addons.TestUtils.Simulate版本来模拟main.js中的React事件,即使后者被缩小了。 我认为这将使我能够测试生产代码。

通过大量的试验和错误,我发现,当main.js没有缩小时,我可以很好地使用它的Simulate版本,但是当它被缩小时,我不能在main中的元素上使用test.jsSimulate

我说的对吗? 如果库未加载到相关窗口中,是否可以使用React.addons.TestUtils.Simulate? 是否有可能做我想做的事情,或者有更好的方法?

经过几个小时的反复试验,我终于发现我根本不需要使用ReactTestUtils.Simulate。 我以前从未能够在我的ReactDOM 中触发事件,但事实证明,我需要做的就是bubbles: true常规Event上设置,以触发适当的React事件。

此外,由于我尝试模拟的事件是"键升",我还发现我无法在KeyboardEvent上设置whichkeyCode属性,至少在我的浏览器中是这样(whichkeyCode已弃用)。 所以我不得不改变我的听众来寻找event.key而不是event.which。 (我仍在寻找which以适应较旧的浏览器,但我首先检查key)。

这有效:

inputElement.dispatchEvent(new KeyboardEvent("keyup", {key: "Enter", bubbles: true});

希望这能为其他人省去一些麻烦!

最新更新