使用 Jest 在反应组件中测试渲染 JSON

Question

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" />

Answer 1

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.