Javascript 当文件I'；m测试从从卸载的DOM抓取一个元素开始？

我不熟悉测试和开玩笑。我正在尝试在app6.test.js中运行测试。这是我的第一次

我的期望是，在正确运行之后，我的测试要么通过，要么失败。目前，它正在失败。我相信我知道原因。我马上就说

以下是测试失败时出现的错误：

FAIL  maze/app6.test.js
  ● Test suite failed to run

    TypeError: Cannot read property 'style' of null

       6 | const yRows = height / cube;
       7 | const cols = width / cube;
    >  8 | maze.style.width = width + 'px';
         |      ^
       9 | maze.style.height = height + 'px';
      10 | 
      11 | const trees = [];

      at Object.<anonymous> (maze/app6.js:8:6)
      at Object.<anonymous> (maze/app6.test.js:7:37)

Test Suites: 1 failed, 1 total

但不管我在那里做了什么，都没用

现在，我可以浏览app6.js并通过外科手术删除显示

let maze=document.getElementById（'maze'）的行以及之后引用它的所有内容。但这需要通过大量的代码，我宁愿留下完整的。必须有另一种选择

Re：研究中，我访问了大约6-7个不同的网站，通过谷歌搜索“jest typeerror无法读取null的属性'style'。这些链接讨论的不是特别相似的问题（尽管它们至少用同一种语言）。他们让我想到了“嘲弄”一个元素的概念，但显然我做得不对

救命啊！谢谢你

编辑：所以没人要问。。。app6.js的前8行：

let maze=document.getElementById（'maze'）；
常数高度=900；
常数宽度=1500；
常数立方=50//单元大小=20px乘以20px。因此立方体
常量=高度/立方；
常数cols=宽度/立方体；
maze.style.width=宽度+px；
我找到了一个不太完美的解决方案

解决方案是将我的所有函数从app6.js移动到一个单独的文件中，然后从该单独的文件中导入我要测试的函数。这样我就避免了运行完全接触DOM的代码

理想情况下，有人会告诉我如何在不移动文件中的代码的情况下运行代码：换句话说，我希望所有代码都在一个文件中运行。不过，这个解决方案目前还可以。
Jest DOM和木偶演员测试是正交的。如果测试的是实现，那么涉及到
puppeter
的所有内容都不属于此测试

似乎app6.js的问题在于，它在顶层访问DOM，而不是访问需要它的函数，这需要在导入模块之前设置mock，因此需要在测试中导入，而不是在顶层
jest.isolateModules
或
require
和
jest.resetModules
的组合适用于在不干扰其他测试的情况下测试模块

maze
元素需要模拟，可以通过模拟
document.getElementById
调用，也可以通过将其放入DOM来模拟。前一个选项要求在测试后重置模拟；最好始终使用
restoreMocks
配置选项来执行此操作。后者要求在试验后进行清理：

let maze;
let app6;

beforeEach(() => {
  maze = document.createElement('div');
  maze.setAttribute('id', 'maze');
  document.body.appendChild(maze);

  jest.isolateModules(() => {
     app6 = require('./app6');
  });
});

test("should output true or false", () => {
    const boolean = app6.checkIfCellsAreAdjacent({ x: 29, y: 30 }, { x: 30, y: 30 });
    expect(boolean).toBe(true);
});

afterEach(() => {
  document.body.removeChild(maze);
});

这对于单元测试来说不是一个坏主意，但是使用DOM的代码需要以任何方式进行测试。