0
393
ViewsError de broma: elementos.getAttribute no es una función
Estoy tratando de cubrir este código por prueba:
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') }esto es lo que cansó de probar la función 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() }) No entiendo porque me da el error: 
esto es lo que contiene la variable HTML: 
3 answers
Answer question0
No puedo ver exactamente en el código que ha mostrado cómo importó el render/documento o qué biblioteca de prueba está usando, sin embargo, lo que sí sé es que no puede usar las operaciones DOM en un código que en realidad no es un DOM. Su código probablemente funcionó anteriormente porque se ejecutó en un navegador y ahora lo está ejecutando sin ningún DOM. La solución a eso es asegurarse de que los elementos que está tratando de probar se hayan renderizado en un DOM real, es decir, render desde react-dom .
La razón por la que tiene ese problema es porque getAttribute no es una función, el objeto al que lo está llamando no se reconoce como un elemento.
0
No creo que el ícono se defina de esta manera: let icon = document.querySelector("your-element") que desea obtener esos atributos
0
Resuelvo el error modificando mi código como fluido: en realidad, los íconos eran del tipo NodeList y en lugar de hacer que cada elemento aplique el evento, aplico el evento solo en el primer elemento en NodeList y la prueba pasó
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 })