如何使用npm test（CLI）使用HTML DOM

Question

我试图找到一种在HTML DOM使用mocha运行npm test方法。 在这种情况下，我正在使用全局 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 ，因此我需要以某种方式自己创建一个document ，但是，我认为我的主要问题是：

1. 我第一次使用npm和mocha ，在他们的文档中找不到与之相关的任何内容。
2. 通常，所有与webbrowsers有关的人们遇到的问题//我正在使用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 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