0
391
Viewsjest Error : elements.getAttribute is not a function
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')
}
this is what tired to test the function 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()
})
I don't understand why it gives me the error:
this is what HTML variable contain:
3 answers
Answer question0
I can't see exactly from the code you've shown how you imported render/document or what testing library you're using, however what I do know is that you can't just use DOM operations on code that isn't actually a DOM. Your code probably previously worked becasue it was executed in a browser and now you're running it without any DOM. The fix to that is to make sure that the elements you're trying to test on has actually been rendered to an actual DOM, i.e. render from react-dom.
The reason you're getting that issue is because getAttribute isn't a function, the object you're calling it on isn't recognized as an element.
0
I don't think the icon is defined
something like this :
let icon = document.querySelector("your-element")
which you want get that attributes
0
I solve the Error by modifying my code like flowing: actually, icons were NodeList type and instead of making forEach element apply the event, I apply the event just in the first element on the NodeList and the test passed
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
})