导入 function 时的笑话、jsdom 和文档 object

Question

我有一个产生副作用的 function。 我正在简化它以记录节点元素的内容，以保持对问题的关注。

日志文件.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 | }

任何人都可以帮助我吗？ 谢谢