CODEWITHSUNDEEP
javascriptreactjsreact-testing-libraryreact-lazy-load
Wisnu
Wisnu

Reputation: 337

react-lazy-load-image-component Getting Error "TypeError: Cannot read properties of undefined (reading 'prototype')"

I'm using the React Testing Library, and when the component I'm rendering contains a LazyLoadImage from "react-lazy-load-image-component" I get the error "TypeError: Cannot read properties of undefined (reading 'prototype')".

Here's a picture of the error I got:

enter image description here

And this is the image of the code snippet in the component that I rendered:

enter image description here

If anyone is experiencing the same thing as me and has found a solution I really appreciate it. Thank you

Upvotes: 1

Views: 608

Answers (2)

Krzyszof_P
Krzyszof_P

Reputation: 1

In my case, this mock removes this error, try to mock the component in the test/or your mockHelper

describe('describe',()=>{
it('test-case',()=>{
  vi.mock('react-lazy-load-image-component', () => ({
    LazyLoadImage: ({ src, alt }: { src: string; alt: string }) => (
      <img alt={alt} src={src} />
    ),
  }))

 const {container }= render(<PageExploreDetail />);
  
  expect(container).toBeInTheDocument();
})

Upvotes: 0

sachin
sachin

Reputation: 1117

I was having the similar kind of error ( Not exactly the same ) and resolved by changing few things.

  1. You are planning of assigning the value to src of LazyloadImage component only if :
    a. It contains image which is inside of meta ( which is intern inside of article ) and you are not sure that all the time these parameters be present.

  2. You have added a logical and condition to check the presence of each element in hierarchy so that there won't be an issue of cannot find an element of undefined

  3. The main thing is what if any of that condition block falls on false condition ?

At that time, your image tag receive src as false ( src accepts the string not boolean )

so,

Instead of <LazyLoadImage src={article && article.meta && article.meta.image} >

use : {article && article.meta && article.meta.image && <LazyLoadImage src={article.meta.image} >}

This will check the existence of src before compiling to the browser.

Hope this helps!

Upvotes: 0

Related Questions