jest Error : elements.getAttribute is not a function

Question

我正在尝试通过测试覆盖这段代码：

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

这就是测试函数 handelClickIconEye 的累赘

 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 bill=new Bills({
      document,onNavigate,firestore:null,localStorage:window.localStorage})
      const html=BillsUI({data:bills})
      document.body.innerHTML=html
      const icons=screen.getAllByTestId('icon-eye')
      const handleClickIconEye1=jest.fn((e)=>bill.handleClickIconEye(e,icons))
      icons.forEach(icon=>{icon.addEventListener('click',handleClickIconEye1)
      fireEvent.click(icon)
    })
      expect(handleClickIconEye1).toHaveBeenCalled()
    })

我不明白为什么它会给我错误：

这是 HTML 变量包含的内容：

Answer 1

我无法从您展示的代码中确切地看到您是如何导入的 render/document 或您正在使用的测试库，但是我所知道的是您不能只使用 DOM 对实际上不是 DOM 的代码的操作。您的代码之前可能有效，因为它是在浏览器中执行的，现在您运行它没有任何 DOM。解决方法是确保您尝试测试的元素实际上已呈现为实际的 DOM，即来自 react-dom.

的 render

您遇到该问题的原因是 getAttribute 不是函数，您调用它的对象未被识别为元素。

Answer 2

我认为图标没有定义是这样的： let icon = document.querySelector("your-element") 你想要得到那个属性

Answer 3

我通过修改我的代码来解决错误，如下所示：实际上，图标是 NodeList 类型，而不是让 forEach 元素应用事件，我只在 NodeList 的第一个元素中应用事件并且测试通过

 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 bill=new Bills({
      document,onNavigate,firestore:null,localStorage:window.localStorage})
      const html=BillsUI({data:bills})
      document.body.innerHTML=html
      const icons=screen.getAllByTestId('icon-eye')
      const handleClickIconEye1=jest.fn((e)=>bill.handleClickIconEye(e,icons[0]))
 
      fireEvent.click(icon[0])
      expect(handleClickIconEye1).toHaveBeenCalled() //test passed
    })

jest Error : elements.getAttribute is not a function

jest Error : elements.getAttribute is not a function

javascript

unit-testing

jestjs