JSDom 不加载相关脚本
JSDom not loading relative scripts
所以我正在尝试使用 jsdom 设置 mocha 测试,经过多次调试尝试,我将问题缩小到 jsdom 执行绝对 URL 脚本(例如 http://code.jquery.com/jquery-2.1.3.min.js
)而不是相对URL 个脚本(例如 js/script.js
)。
我的test.js如下:
var assert = require("assert");
var fs = require('fs');
var jsdom = require("jsdom");
describe('Foo Test', function(){
it('Foo Check', function(done){
this.timeout(5000);
jsdom.env({
html: fs.readFileSync('index.htm')
,features: {
FetchExternalResources: ["script"]
,ProcessExternalResources: ["script"]
}
,done: function(errors, window){
if(errors != null) console.log('Errors', errors);
var $ = window.$; // $ is defined
var foo = window.foo; //foo is undefined
assert(foo);
done();
}
});
});
});
错误:
Uncaught AssertionError: undefined == true
htm:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Foo</title>
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="js/script.js"></script>
</head>
<body>
</body>
</html>
script.js:
var foo = true;
从 3.0 开始,url 参数现在默认设置为 about:blank,而不是隐式设置为当前目录。添加 url: __dirname
后,测试立即变为绿色。
var assert = require("assert");
var fs = require('fs');
var jsdom = require("jsdom");
describe('Foo Test', function(){
it('Foo Check', function(done){
this.timeout(5000);
jsdom.env({
html: fs.readFileSync('index.htm')
,url: __dirname
,features: {
FetchExternalResources: ["script"]
,ProcessExternalResources: ["script"]
}
,done: function(errors, window){
if(errors != null) console.log('Errors', errors);
var $ = window.$; // $ is defined
var foo = window.foo; //foo is undefined
assert(foo);
done();
}
});
});
});
另外我想提一下 jQuery 2.x 目前似乎与 jsdom 不兼容。
在您对 jsdom.env
的调用中,删除 html
并使用 file
。我已经使用 jsdom 3.1.2 测试了您对代码的修改,它有效:
jsdom.env({
file: path.join(__dirname, "index.htm")
,features: {
[... etc ...]
(您还需要在其他 require
调用中添加 var path = require("path")
。)
使用 html
的问题在于 jsdom 不知道 HTML 的基数 URL 是什么。如果您使用 file
,它将从您提供的路径加载代码并使用该路径作为基础 URL。
所以我正在尝试使用 jsdom 设置 mocha 测试,经过多次调试尝试,我将问题缩小到 jsdom 执行绝对 URL 脚本(例如 http://code.jquery.com/jquery-2.1.3.min.js
)而不是相对URL 个脚本(例如 js/script.js
)。
我的test.js如下:
var assert = require("assert");
var fs = require('fs');
var jsdom = require("jsdom");
describe('Foo Test', function(){
it('Foo Check', function(done){
this.timeout(5000);
jsdom.env({
html: fs.readFileSync('index.htm')
,features: {
FetchExternalResources: ["script"]
,ProcessExternalResources: ["script"]
}
,done: function(errors, window){
if(errors != null) console.log('Errors', errors);
var $ = window.$; // $ is defined
var foo = window.foo; //foo is undefined
assert(foo);
done();
}
});
});
});
错误:
Uncaught AssertionError: undefined == true
htm:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Foo</title>
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="js/script.js"></script>
</head>
<body>
</body>
</html>
script.js:
var foo = true;
从 3.0 开始,url 参数现在默认设置为 about:blank,而不是隐式设置为当前目录。添加 url: __dirname
后,测试立即变为绿色。
var assert = require("assert");
var fs = require('fs');
var jsdom = require("jsdom");
describe('Foo Test', function(){
it('Foo Check', function(done){
this.timeout(5000);
jsdom.env({
html: fs.readFileSync('index.htm')
,url: __dirname
,features: {
FetchExternalResources: ["script"]
,ProcessExternalResources: ["script"]
}
,done: function(errors, window){
if(errors != null) console.log('Errors', errors);
var $ = window.$; // $ is defined
var foo = window.foo; //foo is undefined
assert(foo);
done();
}
});
});
});
另外我想提一下 jQuery 2.x 目前似乎与 jsdom 不兼容。
在您对 jsdom.env
的调用中,删除 html
并使用 file
。我已经使用 jsdom 3.1.2 测试了您对代码的修改,它有效:
jsdom.env({
file: path.join(__dirname, "index.htm")
,features: {
[... etc ...]
(您还需要在其他 require
调用中添加 var path = require("path")
。)
使用 html
的问题在于 jsdom 不知道 HTML 的基数 URL 是什么。如果您使用 file
,它将从您提供的路径加载代码并使用该路径作为基础 URL。