创建伪造的DOM以在JavaScript测试套件中进行测试

Question

问题

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>

有任何想法吗？

Answer 1

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

document.documentElement.innerHtml

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

创建伪造的DOM以在JavaScript测试套件中进行测试

问题描述

问题

问题

诊断程序

1 个解决方案

解决方案1
2 已采纳

创建伪造的DOM以在JavaScript测试套件中进行测试

问题描述

问题

问题

诊断程序

1 个解决方案

解决方案1 2 已采纳

解决方案1
2 已采纳