如何使用 npm test (CLI) 使用 HTML DOM

Question

我正在尝试找到一种方法来运行 npm test，使用 mocha 在 HTML DOM 之上。在这种情况下，我使用 global document 从DOM 中检索table。但是，当我运行 npm test 时，我会收到类似错误的信息：

ReferenceError: document is not defined
at /home/luiz/Projects/linguist-unknown/src/scripts/ling-loader.js:92:61
at extFunc (/home/luiz/Projects/linguist-unknown/src/scripts/ling-loader.js:49:11)
at Array.every (native)
at Utilities.tryMatchUrlExtension (/home/luiz/Projects/linguist-unknown/src/scripts/ling-loader.js:60:25)
at Utilities.<anonymous> (/home/luiz/Projects/linguist-unknown/src/scripts/ling-loader.js:90:16)
at xhr.onload (/home/luiz/Projects/linguist-unknown/src/scripts/ling-loader.js:24:11)
at dispatchEvent (/home/luiz/Projects/linguist-unknown/node_modules/xmlhttprequest/lib/XMLHttpRequest.js:591:25)
at setState (/home/luiz/Projects/linguist-unknown/node_modules/xmlhttprequest/lib/XMLHttpRequest.js:614:14)
at IncomingMessage.<anonymous> (/home/luiz/Projects/linguist-unknown/node_modules/xmlhttprequest/lib/XMLHttpRequest.js:447:13)
at emitNone (events.js:91:20)
at IncomingMessage.emit (events.js:185:7)
at endReadableNT (_stream_readable.js:974:12)
at _combinedTickCallback (internal/process/next_tick.js:80:11)
at process._tickCallback (internal/process/next_tick.js:104:9)
  1) should refresh table


16 passing (3s)
1 failing

1) Loader Utilities should refresh table:
 Error: Timeout of 2000ms exceeded. For async tests and hooks, ensure "done()" is called; if returning a Promise, ensure it resolves.

我知道document 是undefined，我需要以某种方式自己创建一个，但是，我认为我的主要问题是：

1. 我第一次使用 npm 和 mocha，但我在他们的文档中找不到任何相关内容。
2. 大多数情况下，人们遇到的所有问题都与网络浏览器有关//我使用的是 CLI，它将在 Github 上使用 Travis 进行测试
3. 在下面的代码中，您会看到我用XMLHttpRequest 解决了类似的问题。但是，我只是想不出将document 变量正确包含到我的测试中的最佳方法。

因此，请原谅我问这个答案是否已经在 stackoverflow

上

我的代码如下：

test-utilities.js

...
global.XMLHttpRequest = require('xmlhttprequest').XMLHttpRequest;
global.jsyaml = require('../src/scripts-min/js-yaml.min.js');
global.LinguistHighlighter = require('../src/scripts/ling-highlighter.js').LinguistHighlighter;
var LinguistLoader = require('../src/scripts/ling-loader.js').LinguistLoader;
describe('Loader', function () {
  var utilities = new LinguistLoader.Utilities();
  it('should refresh table', function(done) {
    var location = {
      hostname: "github.com",
      href: "https://github.com/github-aux/linguist-unknown/blob/chrome/examples/Brain/human_jump.brain",
      pathname: "/github-aux/linguist-unknown/blob/chrome/examples/Brain/human_jump.brain"
    };

    // check if it is not breaking
    utilities.refresh(location, function(langObj, table){
      done();
    });
  });
});
...

utilities.js：

...
Utilities.prototype.refresh = function(location, callback) {
  var new_url = location.href;

  if (new_url === current_url || !this.isGithub(location)) {
    return;
  }

  current_url = new_url;
  if (linguistObj === null) {
    linguistObj = {
      path: this.getPossibleFilepath(location)
    };
  }

  setTimeout(function() {
    var downloadHelper = new DownloadHelper();
    downloadHelper.load(linguistObj.path, function(objs){
      this.tryMatchUrlExtension(current_url, objs, function(langObj){
        var table = document.getElementsByClassName("blob-wrapper")[0]
                          .getElementsByTagName("table")[0];
        new LinguistHighlighter.Highlighter(langObj).draw(table);

        // callback for tests purposes only
        if (callback) {
          callback(langObj, table);
        }
      });
    }.bind(this));
  }.bind(this), 100);
};
...

感谢任何帮助。谢谢！

Answer 1

我发现了一个很好的工具：JSDOM。它的目标是模拟 Web 浏览器的子集，例如 DOM。有了它，我可以实现我的test-utilities.js 文件，甚至不用碰我的utilities.js 文件，这正是我想要的。

这是test-utilities.js文件的分辨率

const jsdom = require("jsdom");
const { JSDOM } = jsdom;

global.XMLHttpRequest = require('xmlhttprequest').XMLHttpRequest;
global.jsyaml = require('../src/scripts-min/js-yaml.min.js');
global.LinguistHighlighter = require('../src/scripts/ling-highlighter.js').LinguistHighlighter;
var LinguistLoader = require('../src/scripts/ling-loader.js').LinguistLoader;

describe('Loader', function () {
  var utilities = new LinguistLoader.Utilities();

  it('should refresh the code table', function(done) {
    // Download the HTML string and parse it to JSDOM
    JSDOM.fromURL("https://github.com/github-aux/linguist-unknown/blob/chrome/examples/Brain/human_jump.brain").then(dom => {

    // JSDOM does not support 'innerText' and that is why I am creating this property for all objects. 
    var o = Object.prototype;
    Object.defineProperty(o, "innerText", {
      get: function jaca() {
        if (this.innerHTML === undefined)
          return "";
        return this.innerHTML;
      }
    });

    var location = {
      hostname: "github.com",
      href: "https://github.com/github-aux/linguist-unknown/blob/chrome/examples/Brain/human_jump.brain",
      pathname: "/github-aux/linguist-unknown/blob/chrome/examples/Brain/human_jump.brain"
    };

    // check if it is not breaking
    utilities.refresh(location, function(langObj, table) {
      done();
    });
  });
});

现在可以正常工作了！我希望它可以帮助任何人！ :D