Jest Error: Unable to find the "window" object for the given node

Question

I am trying to cover this code by test:

    export default class {
  constructor({ document, onNavigate, firestore, localStorage }) {
    this.document = document
    this.onNavigate = onNavigate
    this.firestore = firestore
    const buttonNewBill = document.querySelector(`button[data-testid="btn-new-bill"]`)
    if (buttonNewBill) buttonNewBill.addEventListener('click', this.handleClickNewBill)
    const iconEye = document.querySelectorAll(`div[data-testid="icon-eye"]`)
    if (iconEye) iconEye.forEach(icon => {
      icon.addEventListener('click', (e) => this.handleClickIconEye(icon))
    })
    new Logout({ document, localStorage, onNavigate })
  }

  handleClickNewBill = e => {
    this.onNavigate(ROUTES_PATH['NewBill'])
  }

  handleClickIconEye = (icon) => {
    const billUrl = icon.getAttribute("data-bill-url")
    const imgWidth = Math.floor($('#modaleFile').width() * 0.5)
    $('#modaleFile').find(".modal-body").html(`<div style='text-align: center;'><img width=${imgWidth} src=${billUrl} /></div>`)
    $('#modaleFile').modal('show')
  }

I did part of the test and it pass by jest for the event handleClickNewBill like this:

describe("when i am on Bills Page and i click on new Bill Button",()=>{
  test("Then form new bill should be open",()=>{
      const onNavigate=(pathname)=>{
        document.body.innerHTML=ROUTES({pathname})
      }
      Object.defineProperty(window,'localStorage',{value:localStorageMock})
      window.localStorage.setItem('user',JSON.stringify({
        type:'Employee'
      }))
      const bills=new Bills({
        document,onNavigate,firestore:null,localStorage:window.localStorage})
      const html=BillsUI({data:bills})
      document.body.innerHTML=html
      const buttonNewBill=screen.getByTestId('btn-new-bill')
      const handleClickNewBill=jest.fn((e)=>bills.handleClickNewBill(e))
      buttonNewBill.addEventListener('click',handleClickNewBill)
      userEvent.click(buttonNewBill)
      expect(handleClickNewBill).toHaveBeenCalled()

  })
})

for the second method (handelClickIconEye) I try to test it like this :

test("Then i click on Action icon modal should be open", ()=>{
      const onNavigate=(pathname)=>{
        document.body.innerHTML=ROUTES({pathname})
      }
      Object.defineProperty(window,'localStorage',{value:localStorageMock})
      window.localStorage.setItem('user',JSON.stringify({
        type:'Employee'
      }))
      const bills=new Bills({
        document,onNavigate,firestore:null,localStorage:window.localStorage})
        const url = '/fake_url'
      const html=Actions(url)
      document.body.innerHTML=html
      const icons=screen.getByTestId('icon-eye')
      const handleClickIconEye1=jest.fn((e)=>bills.handleClickIconEye(icons))
      icons.addEventListener('click',handleClickIconEye1)
      userEvent.click(handleClickIconEye1)
      
      expect(handleClickIconEye1).toHaveBeenCalled()
    })

but I have the error by jest

Any idea why the first test method work but not the second

this is my file package.json

{
  "scripts": {
    "test": "jest --coverage --noStackTrace --silent"
  },
  "jest": {
    "verbose": false,
    "setupFiles": [
      "./setup-jest.js"
    ],
    "collectCoverageFrom": [
      "**/*.{js,jsx}",
      "!**/app/**",
      "!**/assets/**",
      "!**/external/**",
      "!**/fixtures/**",
      "!**/lcov-report/**"
    ]
  },
  "type": "module",
  "dependencies": {
    "express": "^4.17.1",
    "jquery": "^3.5.1",
    "path": "^0.12.7"
  },
  "devDependencies": {
    "@babel/preset-env": "^7.10.4",
    "@testing-library/dom": "^7.20.0",
    "@testing-library/jest-dom": "^5.11.0",
    "@testing-library/user-event": "^12.0.11",
    "babel-jest": "^26.1.0",
    "jest": "^26.1.0",
    "jest-html-reporter": "^3.1.3"
  }
}

And in the top of my file testing I add :

/**
 * @jest-environment jsdom
 */

also doesn't work

Answer 1

As a first question before I can give you a more accurate answer, how do you have the jest environment configured?

https://jestjs.io/docs/configuration#testenvironment-string

In case you use it in jsom.

Try doing the following at the beginning of the test

global.window = {}