将 html 文件附加到 mocha 测试文件中的 JSDOM

Question

是否可以将 html 文件附加到已经加载了单独 html 文件的 Jsdom？

Answer 1

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

用 jsdom 创建你的初始 DOM。
使用 fs.
将第二个 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 想要 append:

依赖关系：

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 ，这取决于你把什么作为第一个参数。

将 html 文件附加到 mocha 测试文件中的 JSDOM

Appending a html file to JSDOM in mocha test file

javascript

unit-testing

mocha.js

jsdom