Cannot read properties of null (reading 'classList')

Question

I hope you can help me, since I have been stuck with this problem for quite some time now, and have had the same one multiple times and cannot seem to have a solution myself.

I am trying to write Unit Tests with Jest, and came upon the following problem:

TypeError: Cannot read properties of null (reading 'classList')

  129 | export function errorHandle(val: boolean, htmlEl: Element) {
  130 |   if (val === false) {
> 131 |     htmlEl!.classList!.add("error");
      |             ^
  132 |   } else {
  133 |     htmlEl!.classList!.remove("error");
  134 |   }

  at classList (src/main.ts:131:13)
  at Object. (src/main.test.ts:92:10)

My project works just fine, and my HTML Elements are not empty (which I have confirmed with console.log). I made sure my script is run after my window loads by adding "defer" to my < script > in my HTML file, and also added it right before < /body >. I am aware, that I might need to mock these elements, but I have been hoping for a different solution, since this requires a lot of typing and time. I am going to add all of the code relating to this problem. May I also add - I have checked the typing of the ID names in the main.js file so they match the ones in the index.html. I have both jsdom and jest-environment-jsdom installed.

// package.json

"dependencies": {
    "jest-environment-jsdom": "^29.0.1"
  }

// jest.config.mjs

export default {
  collectCoverage: true,

  coverageDirectory: "coverage",

  testEnvironment: "jsdom",
  moduleNameMapper: {
    "\.(css|less|scss|sass)$": "identity-obj-proxy",
  },
};

// Example validateEmail in main.ts

export function validateEmail(value: string) {
  if (value.length > 0) {
    if (!value.match(regExEmail)) {
      return errResult = false;
      // console.log("It must be a valid email address.")
    } else {
      return errResult = true;
      // console.log("Email: ", value);
    }
  } else {
    return errResult = false;
    // console.log("Please enter an email address.")
  }
}

// errorHandle() that is being tested

export function errorHandle(val: boolean, htmlEl: Element) {
  if (val === false) {
    htmlEl!.classList!.add("error");
  } else {
    htmlEl!.classList!.remove("error");
  }
}

// definition of my email element

const email = document.querySelector("#email")!;

// body element from my html

  
    
      *other  fields similar to the one under*

// test of the errorHandle() in main.test.ts

test("To be an error", () => {
  expect(errorHandle(false, email)).toBeTruthy(); 
*// email is the exported html variable from main.js*
})
test("To not be an error", () => {
  expect(errorHandle(true, email)).toBeTruthy();
})

Thank you in advance!

Cannot read properties of null (reading 'classList')

0 Answers