ES6 jsdom无法读取null的属性'innerHTML‘

Question

我正在尝试用Mocha设置单元测试，同时使用jsDOM为我的ES6模拟virtualDom；但是我最近的

UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'innerHTML' of null

这是我的main.js设置

​

    const url = 'https://localhost/demo.json';
    const source = document.getElementById('row-template').innerHTML;
    const contentLoop = document.getElementById('feedback-loop');
    const searchForm = document.getElementById('searchForm');
    const searchInput = document.getElementById('searchInput');
    const ratingEntries = document.querySelectorAll('.ratings__button');
    const lengthContainer = document.querySelector('.length');

​

和我的测试文件，简单地包括这个main.js文件

该错误出现在具有.innerHTML方法的每一行上

const main = require('../src/js/main');

当mocha使用此dom.js文件https://gist.github.com/ChidinmaKO/cd5a35624285c07e61a5373c5c8ff3ea运行时

请帮帮忙。我遗漏了什么？

Answer 1

你有这行代码：

document.getElementById('row-template').innerHTML;

还有这个错误：

无法读取null的属性“innerHTML”

“无法读取属性innerHTML”指的是.innerHTML调用。它说明了属性访问的左边部分，document.getElementById('row-template')是null。它为空的原因是因为document.getElementById('row-template')没有在文档中找到具有该ID的HTML元素。

确保ID确实存在于DOM中。一个非常常见的错误是在整个HTML文档出现之前执行的脚本块中运行代码(例如，如果脚本元素在HTML的<head/>中)。将代码放在正文的底部将确保HTML的其余部分在代码运行之前实际存在。

如果这是在您的测试中发生的，那么您必须确保代码所期望的DOM结构是由测试设置安排的。