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

【问题标题】：Testing render JSON in react component with Jest使用 Jest 在 React 组件中测试渲染 JSON
【发布时间】：2021-12-03 01:29:34
【问题描述】：

我想测试我的功能组件的图像渲染，产品在一个 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 property 'images' of undefined）：

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

【问题讨论】：

欢迎来到 Stack Overflow。无法读取未定义的属性“图像”意味着变量 product 未定义。只需尝试查看product 的来源以及您的代码为何找不到它。由于它来自props，您现在知道您遗漏了什么。尝试理解错误。这将比其他任何事情都更能帮助您。

标签： reactjs jestjs

【解决方案1】：

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

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

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

【讨论】：

注意：在images 中添加 5 个对象，因为您通过它们的索引访问它们。这仍然会给您一个错误，但不是您的问题主要涉及的错误。