时间戳

首页 > 解决方案 > 我如何在 redux 中测试组件

reactjs - 我如何在 redux 中测试组件

问题描述

我在测试组件时遇到问题

import React from "react";
import { useSelector } from "react-redux";
import { PopupListWrapper, Song } from "./PopupListStyles";

const PopupList = () => {
  const selectedAlbum = useSelector((state) => state.album);

  return (
    <PopupListWrapper data-testid="popupList-test">
      {selectedAlbum.map((song) => {
        const { trackName, trackTime } = song;
        return (
          <Song key={trackName}>
            <p>{trackName}</p>
            <p>{trackTime}</p>
          </Song>
        );
      })}
    </PopupListWrapper>
  );
};

export default PopupList;

我想检查它是否更红，但我的内部功能仍然有问题

import { render } from "@testing-library/react";
import "@testing-library/jest-dom/extend-expect";
import configureStore from "redux-mock-store";
import { Provider } from "react-redux";
import * as reactRedux from "react-redux";
import PopupList from "./PopupList";

describe("<PopupAlbumInformation/>", () => {
  const initialState = {
    selectedAlbum: [],
  };
  const mockStore = configureStore();
  let store;
  const useSelectorMock = jest.spyOn(reactRedux, "useSelector");

  beforeEach(() => {
    useSelectorMock.mockClear();
  });

  it("whether the component PopupList is rendering", () => {
    store = mockStore(initialState);
    useSelectorMock.mockReturnValue({ initialState });
    const { selectedAlbum } = initialState;

    const { getByTestId } = render(
      <Provider store={store}>
        <PopupList>{selectedAlbum}</PopupList>
      </Provider>
    );
  });
});

这是错误 TypeError: selectedAlbum.map is not a function

  10 |   return (
  11 |     <PopupListWrapper data-testid="popupList-test">
> 12 |       {selectedAlbum.map((song) => {
     |                      ^
  13 |         const { trackName, trackTime } = song;
  14 |         return (
  15 |           <Song key={trackName}>

是的，我知道我还没有断言，但由于这个问题，我不能再进一步了。有什么帮助吗？

标签： reactjsreduxjestjs

解决方案

无需模拟或监视选择器。只需将组件包装在 redux 提供程序中，传递正确的初始状态，您就绝对是 gucci

推荐阅读