当我正在测试的文件通过从卸载的 DOM 中抓取一个元素开始时，我如何在 Jest 中运行测试？

Question

I am new to testing and Jest. I am trying to run a test in app6.test.js. It's my first one.

The expectation is that my test either passes or fails after running correctly . Currently, it's failing. I am confident that I know why. I'll get to that in a sec.

Here is the error I get when the test fails:

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

So, I believe it's failing because, as I understand it, Jest goes into the file containing the to-be-tested code, and tries to run the file. But in my case it can't do that because my file tries to load a DOM element, and there is no DOM loaded by any browser.

The closest thing I have to a solution is trying to open the webpage which runs the script using Puppeteer, and then running the function:

/**
 * @jest-environment jsdom
 */

const puppeteer = require("puppeteer")

const { checkIfCellsAreAdjacent } = require("./app6");

test("should output true or false", async () => {
    const browser = await puppeteer.launch({
        headless: false,
    })

    const page = await browser.newPage();
    await page.goto(`C:\\Users\\myName\\2020-Coding-Projects\\mentoring\\kruskel\\maze\\maze-4.html`)
    const boolean = checkIfCellsAreAdjacent({ x: 29, y: 30 }, { x: 30, y: 30 });
    expect(boolean).toBe(true);
});

But whatever I did there, it didn't work.

Now, I could go through app6.js and surgically remove the line that says let maze = document.getElementById('maze'); and everything that references it afterwards. But that requires going thru a lot of code that I'd rather leave integrated. There must be an alternative.

Re: research, I've been to about 6-7 different sites that I found by googling "jest typeerror cannot read property 'style' of null". These links talk about, eeeh, not particularly similar problems (though they are in the same language at least). They lead me to the concept of "mocking" an element but apparently I didn't do it correctly...

Help. Please and thank you.

Edit: so no one has to ask... the top 8 lines of app6.js:

let maze = document.getElementById('maze');
const height = 900;
const width = 1500;
const cube = 50 // cell size = 20px by 20px. Hence cube
const yRows = height / cube;
const cols = width / cube;
maze.style.width = width + 'px';

Answer 1

Jest DOM and Puppeteer tests are orthogonal. If it's the implementation that is tested, everything that involves puppeteer doesn't belong to this test.

It appears that the problem with app6.js is that it accesses DOM on top level rather than functions that need it, this requires mocks to be set up before the module is imported, so it needs to be imported inside a test rather that on top level. jest.isolateModules or a combination of require and jest.resetModules is appropriate to test a module without interfering with other tests.

maze element needs to be mocked, either by mocking document.getElementById call or by putting it to DOM. The former option requires to reset the mock after a test; this should be preferably done always with restoreMocks configuration option. The latter requires to clean up after a test:

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);
});

Answer 2

I found a less-than-perfect solution to my problem.

The solution was to move all my functions from app6.js to a separate file, then import the function I want to test from that separate file. That way I avoid running the code that reaches out to the DOM entirely.

Ideally someone will tell me how to run the code without moving code around in my files: in other words, I want it all to run in one file. However this solution is OK for now.