Реагируйте на тестирование с помощью Typescript: передача массива объектов в качестве реквизита

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'.