玩笑和酶 - 如何在 React 中测试组件道具

Question

我正在测试下面的组件，它接受字符串和组件作为道具。

SlickCarouselDefault.js

import React from "react";
import Slider from "react-slick";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";

function SlickCarouselDefault(props) {
  const { id, items, settings, ItemComponent } = props;
  return (
    <div>
      <Slider {...settings}>
        {items.map((item) => {
          return (
            <div key={item.id}>
              {id === "intro" ? (
                <ItemComponent
                  title={item.title}
                  imgSrc={item.imgSrc}
                  imgAlt={item.name}
                  url={item.url}
                />
              ) : id === "roadmap" ? (
                <ItemComponent
                  phaseNumber={item.phaseNumber}
                  date={item.date}
                  description={item.description}
                />
              ) : (
                ""
              )}
            </div>
          );
        })}
      </Slider>
    </div>
  );
}

export default SlickCarouselDefault;

在App.js中，

import "./styles.css";

import SlickCarouselDefault from "./SlickCarouselDefault";

export default function App() {
  const introItems = [
    {
      id: 1,
      title: "Intro Title 1",
      url: "Intro Url 1",
      imgSrc: "",
      imgAlt: "Intro Alt 1"
    },
    {
      id: 2,
      title: "Intro Title 2",
      url: "Intro Url 2",
      imgSrc: "",
      imgAlt: "Intro Alt 2"
    },
    {
      id: 3,
      title: "Intro Title 3",
      url: "Intro Url 3",
      imgSrc: "",
      imgAlt: "Intro Alt 3"
    }
  ];
  const phases = [
    {
      id: 1,
      phaseNumber: 1,
      date: "20 November 2021",
      description: "Desription 1"
    },
    {
      id: 2,
      phaseNumber: 2,
      date: "11 December 2021",
      description: "Description 2"
    }
  ];
  const slickCarouselSettings = {
    dots: true,
    infinite: true,
    speed: 500,
    slidesToShow: 1,
    slidesToScroll: 1
  };

  const IntroItem = ({ title, imgSrc, imgAlt, url }) => {
    return (
      <div>
        <a href={url}>
          <img src={imgSrc} alt={imgAlt} />
        </a>
        <div style={{ marginTop: "16px" }}>{title}</div>
      </div>
    );
  };
  const RoadmapItem = ({ phaseNumber, date, description }) => {
    return (
      <div>
        <div>Phase {phaseNumber}</div>
        <div>{date}</div>
        <div
          dangerouslySetInnerHTML={{
            __html: description
          }}
        ></div>
      </div>
    );
  };
  return (
    <div className="App">
      <h1>Intro</h1>
      <SlickCarouselDefault
        id="intro"
        items={introItems}
        ItemComponent={IntroItem}
        settings={slickCarouselSettings}
      />
      <br />
      <br />
      <br />
      <h1>Roadmap</h1>
      <SlickCarouselDefault
        id="roadmap"
        items={phases}
        ItemComponent={RoadmapItem}
        settings={slickCarouselSettings}
      />
    </div>
  );
}

我不确定如何测试这个组件，因为它有 2 种类型 - 介绍和路线图。

我已经创建了一个测试用例，但我不确定如何测试

光滑的轮播-default.test.js

import { shallow } from "enzyme";
import React from "react";

import SlickCarouselDefault from "./SlickCarouselDefault";

it("render SlickCarouselDefault Component", () => {
  const mockItems = [
    {
      id: 1,
      title: "Title 1",
      url: "www.google.com",
    },
    {
      id: 2,
      title: "Title 2",
      url: "https://www.yahoo.com.hk",
    },
  ];
  const MockItemComponent = ({ id, title, url }) => {
    return (
      <div key={id}>
        The url of {title}: {url}
      </div>
    );
  };
  const slickCarouselSettings = {
    infinite: true,
    speed: 500,
    arrows: false,
  };
  expect(
    shallow(
      <SlickCarouselDefault
        id="intro"
        items={mockItems}
        ItemComponent={MockItemComponent}
        settings={slickCarouselSettings}
      />
    )
  ).toMatchSnapshot();
});

测试它的正确方法是什么？

代码沙盒
https://codesandbox.io/s/nifty-cache-28nc7?file=/src/App.js