在Mocha测试文件中将html文件附加到JSDOM

Question

是否可以将Jtdom附加一个HTML文件，而该Jsdom已经加载了单独的HTML文件？

Answer 1

是的，你可以这么做。 最简单的方法是：

使用jsdom创建您的初始DOM。
使用fs将第二个HTML文件读入字符串。
将第二个HTML文件的内容追加到jsdom返回的原始DOM中。

安装

npm install jsdom --save-dev
npm install fs --save-dev

示例代码：

var jsdom = require('jsdom').JSDOM;
var fs = require('fs');
var document = (new jsdom('<!DOCTYPE html><html><head></head><body></body></html>')).window.document;
var secondHtml = fs.readFileSync('HelloWorld.html').toString();
document.body.innerHTML = secondHtml;

请注意，您的第二个HTML应该排除<html> ， <head>和<body>标记。 否则，您将在现有的<body>标记内插入<body>标记时遇到问题。

Answer 2

我认为这会有所帮助。

require('jsdom-global')();
var fs = require('fs');
document = window.document;
var dashboard = 
fs.readFileSync('yourHtmlFile').toString();
document.documentElement.innerHTML  = dashboard;

Answer 3

其他答案将替换正文的内部html。 OP希望追加：

依赖关系：

npm install jsdom

解：

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

const appendJSDOM = (dom, htmlFile) => {
    const html = fs.readFileSync(htmlFile).toString();
    dom.window.document.body.insertAdjacentHTML('beforeend', html);
}

JSDOM.fromFile("file1.html")
.then(dom => {
    appendJSDOM(dom ,"file2.html");
    console.log(dom.serialize());
});

您可以继续调用appendJSDOM()来追加更多的html文件。 但是，就像其他答案所说的那样，您应该在其他html文件中省略<html> ， <head>和<body>标记。

insertAdjacentHTML还可以将HTML插入不同的位置，具体取决于您放置的第一个参数。

在Mocha测试文件中将html文件附加到JSDOM

问题描述

3 个解决方案

解决方案1
1 已采纳 2018-04-17 23:37:09

解决方案2
1 2018-06-29 05:43:39

解决方案3
1 2019-05-06 17:21:18

在Mocha测试文件中将html文件附加到JSDOM

问题描述

3 个解决方案

解决方案1 1 已采纳 2018-04-17 23:37:09

解决方案2 1 2018-06-29 05:43:39

解决方案3 1 2019-05-06 17:21:18

解决方案1
1 已采纳 2018-04-17 23:37:09

解决方案2
1 2018-06-29 05:43:39

解决方案3
1 2019-05-06 17:21:18