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

Question

我想测试我的功能组件的图像渲染，产品在 json 中，我尝试导入 json 并在组件中传递它但它没有'不工作：

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;

我验证渲染的初步测试

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 />);
    });
});

错误在下一行，(TypeError: Cannot read 属性 'images' of undefined):

<img src={product.images[0].url} alt="imagen del alojamiento" />

Answer 1

您的组件上有一个属性 product，您需要像这样传递它：

 test("renders correctly", () => {
        const testProduct = {
           images: [
              {
                 url: ''
              }
           ]
        };
        shallow(<ImageGalleryStatic product={testProduct} />);
  });

您需要使用您依赖的其他属性正确构建您的产品对象。

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

Testing render JSON in react component with Jest

reactjs

jestjs