Question

我有一个MySwiper组件，我将一些数据推送到一个空数组中并在Swiper插件中进行渲染。现在，我正在测试其内容文本，单元测试使用了一些模拟数据，我希望container.textContent是“ title 1subtitle 1title 2subtitle 2”。一个有效的示例，请参见此处：https://codesandbox.io/s/brave-wood-mvrmc

代码如下：

MySwiper.js：

import React, { useEffect, useReducer, useCallback } from "react";
import "./styles.css";
import { Swiper, SwiperSlide } from "swiper/react";
import SwiperCore, { Navigation, Pagination, Autoplay } from "swiper";
import "swiper/swiper-bundle.css";

SwiperCore.use([Navigation, Pagination, Autoplay]);

const slideData = [
  {
    id: 1,
    title: "title 1",
    subtitle: "subtitle 1",
    imgUrl: require("./images/xps.jpg")
  },
  {
    id: 2,
    title: "title 2",
    subtitle: "subtitle 2",
    imgUrl: require("./images/business.jpg")
  }
];

const App = () => {
  const slides = [];

  const [state, setState] = useReducer(
    (state, newState) => ({ ...state, ...newState }),
    { title: [], subtitle: [], imgUrl: [], renderBanner: false }
  );

  const setTitles = useCallback(() => {
    let _title = [];
    let _subtitle = [];
    let _imgUrl = [];
    slideData.forEach((e) => _title.push(e.title));
    slideData.forEach((e) => _subtitle.push(e.subtitle));
    slideData.forEach((e) => _imgUrl.push(e.imgUrl));
    setState({ title: _title });
    setState({ subtitle: _subtitle });
    setState({ imgUrl: _imgUrl });
  }, []);

  useEffect(() => {
    setTitles();
    setState({ renderBanner: true });
  }, [setTitles]);

  const storeSlides = () => {
    if (state.renderBanner === true) {
      for (let i = 0; i < slideData.length; i += 1) {
        slides.push(
          <SwiperSlide key={`slide-${i}`}>
            <div
              className="banner__img"
              style={{ backgroundImage: `url(${state.imgUrl[i]})` }}
            >
              <div className="center-content banner__content">
                <div className="banner__title">{state.title[i]}</div>
                <div className="banner__subtitle">{state.subtitle[i]}</div>
              </div>
            </div>
          </SwiperSlide>
        );
      }
    }
  };

  storeSlides();

  return (
    <div className="App">
      {state.renderBanner ? (
        <Swiper
          spaceBetween={0}
          slidesPerView={1}
          loop={true}
          navigation
          pagination
          autoplay={true}
        >
          {slides}
        </Swiper>
      ) : null}
    </div>
  );
};

export default App;

MySwiper.test.js

import React from "react";
import { render, unmountComponentAtNode } from "react-dom";
import { act } from "react-dom/test-utils";

import MySwiper from "./MySwiper";

let container = null;
beforeEach(() => {
  container = document.createElement("div");
  document.body.appendChild(container);
});

afterEach(() => {
  unmountComponentAtNode(container);
  container.remove();
  container = null;
});

const mockData = [
  {
    id: 1,
    title: "test title 1",
    subtitle: "test subtitle 1",
    imgUrl: require("./images/xps.jpg")
  },
  {
    id: 2,
    title: "test title 2",
    subtitle: "test subtitle 2",
    imgUrl: require("./images/business.jpg")
  }
];

it("Renders correct content", () => {
  act(() => {
    render(<MySwiper props={mockData} />, container);
  });
  expect(container.textContent).toBe(
    "title 2subtitle 2title 1subtitle 1title 2subtitle 2title 1subtitle 1"
  );
});

如您所见，期望返回了“标题2字幕2标题1字幕1标题2字幕2标题1字幕1”，该重复重复一次，并且在“标题1”之前还返回了“标题2”。为什么会这样？我期待的是“标题1字幕1标题2字幕2”。

为什么在测试此Swiper组件时我的Jest测试会返回重复的期望？

0 个答案: