导入函数时的 jest、jsdom 和文档对象

编程问答 2022-05-25

问题描述

我有一个产生副作用的函数。我正在简化它以记录 Node 元素的内容，以便将重点放在问题上。

logFile.js

function log() {
  console.log(document.querySelector('#mydiv').textContent)
}

export { log }

然后我进行单元测试

log.test.js

import {
  log
} from '../logFile'

import { JSDOM } from 'jsdom'

describe('Test log function',() => {

  it('should log what the div is holding',() => {
    const dom = new JSDOM(`<!DOCTYPE html><div id="mydiv">HELLO</div>`);
    const document = dom.window.document;

    // This works
    console.log(document.querySelector('#mydiv').textContent)

    // This also works
    console.log(document.querySelector('#mydiv').textContent)

    // This doesn't work
    log()
  });
})

这是一个简单的例子，但是，如果我想使用 .appendChild() 操作 DOM 会发生什么？

在控制台中我看到以下错误

    TypeError: Cannot read property 'textContent' of null

      26 |   
    > 27 |   console.log(document.querySelector('#mydiv').textContent)
         |               ^
      28 |
      29 | }

谁能帮帮我？谢谢

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

javascriptjest-domjestjsunit-testing