创建一个假 DOM 以在 JavaScript 测试套件中进行测试答案

【问题标题】：Creating a Fake DOM to test in a JavaScript test suite创建一个假 DOM 以在 JavaScript 测试套件中进行测试
【发布时间】：2015-02-25 19:21:18
【问题描述】：

问题

TypeError：无法将属性“innerHTML”设置为 null

问题

我使用Jest 来处理我的JavaScript 的单元测试，它带来了嵌入的jsdom，它应该处理与DOM 相关的主题。

这是我的测试片段： jest.dontMock('fs');

var markup = require ('fs')
  .readFileSync(__dirname + '/markup/index.html')
  .toString();

describe ('my app', function () {
  it ('should initialize adding <h1> to the DOM', function () {
    document.documentElement.innerHtml = markup;

    app.start();

    expect(app.DOM).toEqual('<h1>Hello world!</h1>');
  });
});

.start() 的实现有：

document.querySelector('h1').innerHTML = 'Hello world';

在浏览器中运行库时，它运行良好。但是当通过 CLI 进行测试时，它不会。

诊断

基本上，我尝试了以下方法：

 it ('should initialize adding <h1> to the DOM', function () {
    document.documentElement.innerHtml = markup;

    console.log(document.querySelector('h1'));

    // [...]
  });

console.log() 输出 'null' — 似乎我创建的标记没有被添加到 jsdom 创建的“DOM”中。

这是/markup/index.html的内容，也和markup变量一样：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Linguisticjs Markup Test</title>
</head>
<body>
  <h1>Bonjour le monde !</h1>
  <h3>Comment ça va ?</h3>
</body>
</html>

有什么想法吗？

【问题讨论】：

标签： javascript html unit-testing dom

【解决方案1】：

这是一个错字。这是错误的：

document.documentElement.innerHtml

应该是innerHTML。您这样做的方式是创建一个名为 innerHtml 的字段，但没有创建 DOM 节点的效果。

【讨论】：

伙计，我不敢相信。几个小时试图找出问题所在，然后......哈哈。还是谢谢你！