我正在尝试为类似文字处理器的操作编写单元测试，例如将列表应用于文本节点，但我发现这document.execCommand不适用于jsdom，所以我对如何对以下操作进行单元测试感到困惑：
document.getElementById('run').addEventListener('click', function() {
document.execCommand("insertorderedlist");
});<div contenteditable="true">Foo</div>
<button id="run">Select "Foo" then Click</button>我正在尝试使用ReactJS和JSDOM模拟滚动事件.
最初我尝试了以下内容:
var footer = TestUtils.findRenderedDOMComponentWithClass(Component, 'footer');
footer.scrollTop = 500;
TestUtils.Simulate.scroll(footer.getDOMNode());
//I tried this as well, but no luck
//TestUtils.Simulate.scroll(footer);
滚动事件根本不会传播.然后,我手动创建了事件,一切正常:
var evt = document.createEvent("HTMLEvents");
evt.initEvent("scroll", false, true);
element.dispatchEvent(evt);
问题:我是否在使用TestUtils做错了什么？我怎样才能让它发挥作用？
艾伦
javascript javascript-events jsdom reactjs reactjs-testutils
通过我想象的JSSm，Jest还没有document.createRange定义。如何覆盖或提供这种行为？
我们为自定义JSm + mocha设置编写的版本（在所有测试之前运行）如下所示：
global.Range = function Range() {};
const createContextualFragment = (html) => {
const div = document.createElement('div');
div.innerHTML = html;
return div.children[0]; // so hokey it's not even funny
};
Range.prototype.createContextualFragment = (html) => createContextualFragment(html);
// HACK: Polyfil that allows codemirror to render in a JSDOM env.
global.window.document.createRange = function createRange() {
return {
setEnd: () => {},
setStart: () => {},
getBoundingClientRect: () => {
return { right: 0 };
},
getClientRects: () => [], …我现在安装了jQuery,现在看到了一堆Module not found: Error: Can't resolve...错误.知道根本问题可能是什么和解决方案？
ERROR in ./node_modules/jquery/lib/node-jquery.js
Module not found: Error: Can't resolve 'jsdom'...
ERROR in ./node_modules/jquery/lib/node-jquery.js
Module not found: Error: Can't resolve 'xmlhttprequest'...
ERROR in ./node_modules/jquery/lib/node-jquery.js
Module not found: Error: Can't resolve 'location'...
ERROR in ./node_modules/jquery/lib/node-jquery.js
Module not found: Error: Can't resolve 'navigator'...我很确定这是在搜索错误之后与webpack 2有关,但是所提出的解决方案都没有解决错误.
我见过但不起作用的一个解决方案是在我的webpack配置中添加以下内容:
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
})
],这是我的index.html:
<html>
<head>
<meta charset="utf-8">
<title>Title</title>
</head>
<body>
<div id="fb-root"></div>
<div id="app"></div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">
<script src="common.js"></script>
<script src="bundle.js" …我有一个带有动画的 React 应用程序，使用 React Pose ( https://popmotion.io/pose/ )。
这工作正常，但是当我为组件编写集成测试时（使用 react-testing-library），测试失败。
我在运行测试时得到的错误是：
Error: Uncaught [TypeError: Cannot read property '1' of null]
at reportException (/app/node_modules/jsdom/lib/jsdom/living/helpers/runtime-script-errors.js:66:24)
at invokeEventListeners (/app/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:209:9)
at HTMLUnknownElementImpl._dispatch (/app/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:119:9)
at HTMLUnknownElementImpl.dispatchEvent (/app/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:82:17)
at HTMLUnknownElementImpl.dispatchEvent (/app/node_modules/jsdom/lib/jsdom/living/nodes/HTMLElement-impl.js:30:27)
at HTMLUnknownElement.dispatchEvent (/app/node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:157:21)
at Object.invokeGuardedCallbackDev (/app/node_modules/react-dom/cjs/react-dom.development.js:199:16)
at invokeGuardedCallback (/app/node_modules/react-dom/cjs/react-dom.development.js:256:31)
at commitRoot (/app/node_modules/react-dom/cjs/react-dom.development.js:18427:7)
at completeRoot (/app/node_modules/react-dom/cjs/react-dom.development.js:19884:3) TypeError: Cannot read property '1' of null
at Object.x (/app/node_modules/popmotion-pose/lib/index.js:526:64)
at /app/node_modules/popmotion-pose/lib/index.js:593:51
at Array.forEach (<anonymous>)
at convertPositionalUnits (/app/node_modules/popmotion-pose/lib/index.js:592:27)
at transformPose (/app/node_modules/popmotion-pose/lib/index.js:647:20)
at getParentAnimations (/app/node_modules/pose-core/lib/index.js:113:28)
at Object.set (/app/node_modules/pose-core/lib/index.js:167:28)
at /app/node_modules/react-pose/lib/index.js:203:77
at …我正在使用 jsdom 从服务器加载一个 html 页面，使用 nodejs 来获取一些谷歌图表图形 URL。但问题是我只能获取部分加载的图形 URL。如何让 jsdom 等到完整的图形呈现出来，然后在 console.log 中记录 URL。
下面是我的 JSDOM 代码：
router.post('/Endpoint',(req,res,next)=>{
// the file I will be loading
uri = 'one.html',
// the options that I will be giving to jsdom
options = {
runScripts: 'dangerously',
resources: "usable"
};
// load from an external file
jsdom.fromFile(uri, options).then(function (dom) {
let window = (new jsdom(``, { pretendToBeVisual: true })).window;
window.requestAnimationFrame(timestamp => {
console.log(timestamp > 0);
});
}).catch (function (e) {
console.log(e);
});
});//EOF API …
问题：当我运行我的代码时，SVG 附加到组件的外部 div 并在页面上完美呈现。但是，在测试期间，SVG 不会附加到外部 div。
堆栈：我正在尝试使用 Jest/Enzyme 测试包装在 React 组件中的 d3js 元素。
到目前为止我所做的研究：查找了一堆关于使用 google 和 stackoverflow 测试 d3js 的指南/帖子。使用了关于单元测试 d3js 和 React with Jasmine 的指南。我还读到，使用 Enzyme 测试 3rd 方库可能很困难，因此这可能是测试框架的限制。
我已经包含了一个基本的代码示例来测试。
成分：
import React from "react";
import * as d3 from "d3";
export default class Circle extends React.Component {
componentDidMount = () => {
return this.renderCircle();
}
renderCircle = () => {
d3.select("#outerDiv")
.append("svg")
.attr("width", 600)
.attr("height", 300)
.append("circle")
.attr("id", "d3-el")
.attr("cx", 300)
.attr("cy", 150)
.attr("r", 30) …我意识到这个问题已经被问过很多次了，尽管自从提出这些问题以来环境已经发生了变化：值得注意的是，JSDom 现在支持自定义元素。
这些其他问题都围绕着寻找替代方案（例如使用Happy Dom），因为当时 JSDom 不支持自定义元素。但是，既然JSDom确实支持自定义元素，那么有没有人有任何信息可以解决以下错误？
Run Code Online (Sandbox Code Playgroud)TypeError: Class constructor HTMLElement cannot be invoked without 'new' 1 | export default class Foo extends HTMLElement { 2 | constructor() { > 3 | super(); | ^ 4 | 5 | this._clicker = 2; 6 | } at new Foo (__tests__/fooclass.js:3:5) at Object.<anonymous> (__tests__/fooclass.test.js:7:13)
class Foo extends HTMLElement {
constructor() {
super();
this._clicker = 2;
}
connectedCallback() {
this.textContent = 'My …我已经使用 d3.js 在服务器上使用 node 和 jsdom 生成 svg/html。我还测试了在 Web 请求中在服务器上使用 d3 来生成动态 svg/html，然后在模板/视图 (ejs) 中使用。这样做的问题是任何重要的 d3.js 代码都会阻塞服务器并强制额外的 Web 请求等待，直到生成 svg/html。有没有办法在不阻塞服务器的情况下使用 nodejs/express 中的 d3 在 Web 请求中生成动态 svg/html？
我想知道是否有一种异步方式来编写 d3，或者是否有一种方法可以使用额外的工作人员以一种避免阻塞的方式使用 d3（和 jsdom）生成 svg/html。
以下是一些可能希望在服务器而不是客户端上执行此操作的原因：预渲染 svg/html 并在快速模板中使用它将为用户提供统一的页面加载，而不会出现 svg/html 的“flash”在页面加载后绘制，就像在客户端中使用 d3 一样。您还可以避免向浏览器发送大量数据，并且可以保持 d3 代码的专有性。
这是一个基本示例，我的意思是在快速路由中使用 d3，这可能会阻止服务器接收其他传入的 Web 请求。
app.get("/", async function(req, res) {
// get dynamic data from database based on req.query
let data = await dbConnection.query(dynamic_sql)
// create simulated DOM using jsdom. This step will block server.
const { document } = …我被一个玩笑测试设置困住了。我想测试一些客户端代码，准确地说，是一个电子预加载脚本，并且想使用 rewire 来测试未导出的方法。
被测试的脚本依赖于另一个访问window.navigator. 我可以require测试脚本，但当我使用它时，它会失败并ReferenceError: navigator is not defined在第一行出现错误。dom.jsrewire
这是显示错误的最小设置。我不使用笑话配置，因为它默认为jsdom测试环境。
dom.js
console.log('during rewire:', global.navigator) // <-- prints undefined
console.log('The added property:', global.FOO) // <-- prints undefined
const userAgent = navigator.userAgent; // <-- fails.
索引.js
const myDom = require('./dom.js');
module.exports = {
doSomething: () => {}
}
索引.spec.js
const rewire = require('rewire');
describe('Basic test', () => {
it('exports a function', () => {
global.FOO = 'Bar'
console.log('before rewire:', global.navigator) // prints …