I want to test the rendering of the images of my functional component, the products are in a json, I tried to import the json and pass it in the component but it didn't work :
import "react-responsive-carousel/lib/styles/carousel.min.css";
import Modal from "../OverlayComponent/Modal";
import ImageGallery from "../ImageGallery/ImageGallery"
import "./ImageGalleryStatic.css";
function ImageGalleryStatic(props) {
const { product } = props;
return (
<>
{/* Image´s gallery */}
<section className="photo-gallery">
<div className="product-photos">
<div className="photos-container">
<figure className="photo">
<img src={product.images[0].url} alt="imagen del alojamiento" />
</figure>
<figure className="photo">
<img src={product.images[1].url} alt="imagen del alojamiento" />
</figure>
<figure className="photo">
<img src={product.images[2].url} alt="imagen del alojamiento" />
</figure>
<figure className="photo">
<img src={product.images[3].url} alt="imagen del alojamiento" />
</figure>
<figure className="photo">
<img src={product.images[4].url} alt="imagen del alojamiento" />
</figure>
{/* Image´s gallery pop-up */}
<Modal product={product} divider=" de "/>
</div>
</div>
</section>
<section className="photo-gallery-tablet">
<ImageGallery productImages={product.images} divider="/" showThumbs={false}/>
</section>
</>
)
}
export default ImageGalleryStatic;
My initial test to verify rendering
import React from 'react'
import {render} from '@testing-library/react'
import Enzyme from "enzyme";
import ImageGalleryStatic from './ImageGalleryStatic'
import Adapter from "enzyme-adapter-react-16"
const { shallow } = Enzyme;
Enzyme.configure({ adapter: new Adapter() })
describe('Test for RatingStars', () => {
test("renders correctly", () => {
shallow(<ImageGalleryStatic />);
});
});
The error is in the next line, (TypeError: Cannot read property 'images' of undefined):
<img src={product.images[0].url} alt="imagen del alojamiento" />
CodePudding user response:
You have a property product
on your component, you need to pass that in like this:
test("renders correctly", () => {
const testProduct = {
images: [
{
url: ''
}
]
};
shallow(<ImageGalleryStatic product={testProduct} />);
});
You'll need to construct your product object correctly with the other properties you are relying on.