Ошибка: Uncaught [TypeError: Невозможно прочитать свойство 'состояние' из неопределенного

Question

Я использую библиотеку тестирования React и получаю следующую ошибку

Ошибка: Uncaught [TypeError: Невозможно прочитать свойство 'состояние' из неопределенного "в последней строке моего файла Test.tsx .

Как посмотреть, отображаются ли все мои компоненты? Под компонентами я подразумеваю: полное имя, заголовок, дату и другие в соответствии с моим файлом Ab c .tsx. Что должно быть параметр, который позволяет отображать все компоненты моего ShowPage? Потому что, если я только отображаю <Abc/> в рамках визуализации, это дает мне ошибку:

Никакая перегрузка не соответствует этому вызову. Перегрузка 1 из 2 , '(props: Readonly): ShowPage', выдал следующую ошибку. Свойство 'post' отсутствует в типе '{}', но требуется в типе 'Readonly'. Перегрузка 2 из 2, '(props: ShowProps, context ?: any): ShowPage ', выдал следующую ошибку: свойство' post 'отсутствует в типе' {} ', но требуется в типе' Readonly '.

Test.tsx

export default class Abc extends React.Component < ShowProps > {
  render() {
    ;

    return (
      <div className="Post-description">
          <Title>{post.title}</Title>
          <hr/>
          <Name>
          {`${post.fullName}|${dateToString(currentDateTime)}`}
          </Name>
          <br/>
          <Question>{post.body}</Question>
          <hr/>
          <AllComments/>
      </div>
    ) 
  }
}

Answer 1

Гоча. this.state должно быть неопределенным в вашем тесте, так как тестовый пример не является регулярным компонентом реакции. Кроме того, вы должны смоделировать свой пост и передать его в качестве реквизита в свой ShowPage компонент во время тестирования. Тогда тебе будет хорошо до go. И я не думаю, что вам нужны Router и Route как оболочки, если вы не используете API от маршрутизатора, то есть объект истории.

const post = {
  fullName: 'Muhammad Ali',
  title: 'Post title',
  body: 'Post body',
  updatedAt: '1/30/2020',
}
const {getByPlaceholderText, queryByTestId} = render(
   <ShowPage post={post}/>
);