我正在尝试在node.js中使用jsdom对HTML文档进行小的转换.在进行客户端测试时,我使用了document.createTreeWalker和DOM 2规范一部分的和document.createNodeIterator函数...但是,它们显然不是jsdom的一部分,即使它的作者声称它具有完整的DOM1和DOM2兼容性.我错过了什么吗？这些功能是否在jsdom创建的文档中可用？
$ node
> var jsdom = require('jsdom');
> var doc = jsdom.jsdom('<div>Test</div><div>One</div><div>Two</div>');
> doc.createTreeWalker(doc)
TypeError: Object [ null ] has no method 'createTreeWalker'
at [object Context]:1:5
at Interface.<anonymous> (repl.js:171:22)
at Interface.emit (events.js:64:17)
at Interface._onLine (readline.js:153:10)
at Interface._line (readline.js:408:8)
at Interface._ttyWrite (readline.js:585:14)
at ReadStream.<anonymous> (readline.js:73:12)
at ReadStream.emit (events.js:81:20)
at ReadStream._emitKey (tty_posix.js:307:10)
at ReadStream.onData (tty_posix.js:70:12)
我正在使用Cheerio(https://github.com/MatthewMueller/cheerio)来抓取网站并获取我正在进行的项目的图像.我想知道Node.js(或其他软件包)是否有一种简单的方法可以将$(img).attr('src')转换为完全限定的URL？有时我会得到"image.jpg"和其他时间"../../image.jpg",有时候会得到"//somepath/image.jpg".也许我只是错过某种类型的正则表达式...感谢您的时间:)
是否有D3.js方法将文本元素转换为路径元素？
因此,当我掌握生成的svg时,我可以保留我的文本形状.
我正在使用JSDom设置一些测试,我需要window和document全局变量,并且还需要为每个测试传递不同的URL/href.如何设置location.hash和location.href属性？
global.document = jsdom({url: 'http://localhost?something=not#test', 'html': ''});
global.window = document.defaultView;
console.log(window.location.href); // returns 'about:blank'
console.log(window.location.hash); // returns no value
我试过直接赋值给出window.location.hash相同的结果.
我正在努力让mocha,jsdom,es6模块与babel一起玩jquery.
这是一个模块
// lib/dom.js
import $ from 'jquery';
const node = (tag)=> $(`<${tag} />`)
export {
node
}
这是一个测试
// test/dom.js
import assert from 'assert';
import { node } from '../src/lib/dom';
describe('node(tag)', ()=> {
it('should return a Node', ()=> {
let img = node('img');
assert(img.nodeName === 'IMG');
});
});
这是jsdom的设置
// test/_setup.js
var jsdom = require('jsdom');
global.document = jsdom.jsdom('<!doctype html><html><body></body></html>');
global.window = document.parentWindow;
要运行的脚本
mocha --compilers js:babel-register --recursive
我需要更改以允许jsdom加载jquery,以便dom.js可以加载jquery模块而不会收到错误:
错误:jQuery需要一个带文档的窗口
我有一个包含以下组件的最低测试React应用：
import React from 'react';
import $ from 'jquery';
export default class App extends React.Component {
componentDidMount() {
console.log('componentDidMount', $('#helloDiv').length);
}
render() {
return <div id='helloDiv'>
Hello React!
</div>;
}
}
在浏览器（Chrome）中加载该文件时效果很好。componentDidMount（）中的console.log（）打印出找到的1个helloDiv元素
但是，如果我使用摩卡+酶+ jsdom进行测试，则App组件中相同的console.log（）会输出0：
import React from 'react';
import { mount } from 'enzyme';
import { expect } from 'chai';
import App from '../src/client/app/first'
describe('first test', () => {
it('should pass', () => {
const app = mount(<App />);
expect(app.find('#helloDiv').length).to.eq(1);
});
});
注意：此单元测试没有问题，正在通过。真正的问题是，当使用酶安装<App />时，会调用componentDidMount（），但其中的console.log（）语句将输出0，而不是1
这是我运行摩卡的方法：
mocha --require enzyme/withDom --compilers js:babel-core/register …通过我想象的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" …所以我最近在C9上使用Node.js并在javascript文件中遇到了这个问题:
jsdom.env("", function(err, window) {
TypeError: jsdom.env is not a function
这是我的代码:
var jsdom = require('jsdom');
var $;
jsdom.env("", function(err, window) {
console.log("what");
if (err) {
console.error(err);
return;
}
$ = require("jquery")(window);
$.ajax(settings).done(function (response) {
console.log(response);
});
});
我更新了所有依赖项以及Node本身,但仍然遇到了这个问题.有谁知道怎么了？
考虑我们具有以下Map组件。这在TypeScript中，但对于普通JavaScript也应如此。
import * as React from 'react';
import ReactMapboxGl from 'react-mapbox-gl';
const MapBox = ReactMapboxGl({
accessToken: 'pk.<redacted>'
});
export default class Map extends React.Component {
render() {
return (
<MapBox
style="mapbox://styles/mapbox/streets-v9"
zoom={[0]}
containerStyle={{
height: '500px',
width: 'inherit'
}}
/>);
}
}
然后，它是一些这样呈现的react应用程序的一部分：
import * as React from 'react';
export default class App extends React.Component {
render() {
return (
<Map />
);
}
}
为了测试此设置，我们使用Jest和JSDOM。
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from …jsdom ×10
javascript ×6
node.js ×4
jquery ×3
jestjs ×2
babeljs ×1
d3.js ×1
enzyme ×1
imagemagick ×1
mapbox-gl-js ×1
mocha.js ×1
path ×1
reactjs ×1
svg ×1
typescript ×1
webpack ×1
webpack-2 ×1