使用 Typescript 进行 React 测试：将对象数组作为 props 传递

Question

我正在尝试将对象数组传递给模拟组件数据以进行测试，如下所示：

const mockPackage = {
  id: '1232-1234-12321-12321',
  name: 'Mock Package',
  price: 8.32,
  description: 'Mock description',
  globalProduct: {
    imageUrl: 'http://imageurl.com',
  },
};

const mockPackageData = {
  name: 'Package',
  packages: [mockPackage],
};

beforeEach(() => {
  component = render(
    <SuiteContextProvider>
      <PackageCard
        showDetail={{ display: true, selectedIndex: 1, hideOthers: false }}
        handleShowDetail={handleShowDetail}
        packageData={mockPackageData}
      />
    </SuiteContextProvider>,
  );
});

但是，我收到以下错误：

接收数据的组件像这样解构packageData：

export interface Package {
  id: string;
  name: string;
  price: number;
  description: string;
  globalProduct: {
    imageUrl: string;
  };
}
export interface PackageData {
  name: string;
  packages: [];
}

type Props = {
  packageData: PackageData;
  handleShowDetail: (data: DefaultPackageProps) => void;
  showDetail: {
    display: boolean;
    selectedIndex: number | null;
    hideOthers: boolean;
  };
};

const PackageCard: React.FC<Props> = ({ packageData, handleShowDetail, showDetail }: Props) => {


  return (
    <>
      {packageData.packages.map((packageInfo: Package, index: number) => {
        const {
          id,
          name,
          price,
          description,
          globalProduct: { imageUrl },
        } = packageInfo;

Answer 1

您的 PackageData 定义应该是

export interface PackageData {
  name: string;
  packages: Package[];
}

您当前的代码 packages: []; 声明 packages 必须是一个空数组，这就是您收到类型“0”错误的原因。

使用 Typescript 进行 React 测试：将对象数组作为 props 传递

React testing with Typescript: Passing array of objects as props

typescript

reactjs

react-testing-library