Jest测试handleClickIconEye报getAttribute is not a function如何解决

核心错误原因 #

你的测试代码里给handleClickIconEye传错了参数：

• 点击事件的回调函数第一个参数是事件对象Event，而你的原handleClickIconEye方法要求接收的是DOM元素对象，你把事件对象直接传给方法，事件对象本身没有getAttribute方法，就会抛出对应错误。
• 额外传入的icons参数也是多余的，原方法只接收1个icon参数。

修复后的测试代码 #

test("Then i click on Action icon modal should be open", () => {
  // mock jQuery相关方法避免DOM依赖报错
  $.fn.modal = jest.fn();
  $.fn.width = jest.fn(() => 500);
  $.fn.html = jest.fn();
  $.fn.find = jest.fn(() => ({ html: $.fn.html }));

  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;

  // spyOn原方法监听调用
  const handleClickSpy = jest.spyOn(bill, 'handleClickIconEye');
  const icons = screen.getAllByTestId('icon-eye');
  
  icons.forEach(icon => {
    fireEvent.click(icon);
    // 验证每次点击都传入了正确的icon元素
    expect(handleClickSpy).toHaveBeenCalledWith(icon);
  });

  expect(handleClickSpy).toHaveBeenCalledTimes(icons.length);
});

额外注意事项 #

你原测试代码里额外给icon加点击事件监听的操作是多余的，Bills类的构造函数已经给所有eye icon绑定了点击事件，直接触发点击就能调用到对应方法，用spyOn监听原方法比你手动封装一层jest.fn更准确，也不会出现传参错误的问题。

内容的提问来源于stack exchange，提问作者Ghaith Diab