Неопределенное свойство библиотеки тестирования реакции в компоненте

#reactjs #react-testing-library

Вопрос:

Я не понимаю, почему свойство компонента нарушает тест? Должен ли я передавать компоненту свойства? Даже если я передам реквизиты, я все равно получу ту же ошибку.

Я не хочу проверять детали реализации.

Заранее спасибо!

Вот мой код:

 it("render correctly", () => {
    const { getByTestId } = render(<CalendarAvailability />);
    const date = getByTestId("date");

    expect(date).toBeInTheDocument();
})
 

Компонент:

 import {Availability, AvailableDate, Status, AvailableDateContainer} from './CalendarAvailability.css'

function CalendarAvailability({unitData}) {
  return(
    <Availability data-testid="calendar-availability-component">
      <AvailableDateContainer>
        <AvailableDate data-testid="date">{unitData.date}</AvailableDate>
      </AvailableDateContainer>
    </Availability>
  )
}

export default CalendarAvailability;
 

Неудачный тест:

   ● <CalendarAvailability /> › renders without breaking

TypeError: Cannot read property 'date' of undefined

   5 |     <Availability data-testid="calendar-availability-component">
   6 |       <AvailableDateContainer>
>  7 |         <AvailableDate data-testid="date">{unitData.date}</AvailableDate>
     |                                                     ^
   8 |       </AvailableDateContainer>
  9 |     </Availability>
 

Я не хочу проверять реквизит только при отображении div?

Комментарии:

1. Откуда это unitData берется?

2. Это опора, которую получает компонент

3. Можете ли вы попытаться передать издевательскую дату для компонента, например render(<CalendarAvailability date={mockedDate} />) ?

4. Как протестировать условный рендеринг в компоненте? содержимое компонента отображает только то, что у меня есть единичные данные