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。