创建假 DOM 以在 JavaScript 测试套件中进行测试

Question

问题

TypeError: Cannot set property 'innerHTML' of null

问题

我正在使用 Jest to handle my JavaScript's unit test and it brings embedded 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>

有什么想法吗？

Answer 1

打错了。这是错误的：

document.documentElement.innerHtml

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

创建假 DOM 以在 JavaScript 测试套件中进行测试

Creating a Fake DOM to test in a JavaScript test suite

javascript

html

unit-testing

dom

问题

问题

诊断