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

Question

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

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

Вот мой тестовый файл

afterEach(cleanup);
it('renders correctly with all my props', () => {
const post = {
    Name: 'abc',
    title: 'Post title',

  }
  const {getByPlaceholderText, queryByTestId, debug} = render(
     <Notes={notes}/>
  );

        debug();
  });

Answer 1

Глядя на типизацию Generics для вашего компонента класса PostList, я заметил, что posts является обязательным свойством для его реквизита. Поэтому, когда вы визуализируете свой компонент в своих тестах, вы должны включить необходимые реквизиты (posts). Как правило, в модульных тестах будет нормально снабжать ваши реквизиты фиктивными данными.

const samplePostsData = {
  1: {
    _id: 1,
    fullName: 'abc',
    title: 'This is the title',
    body: 'Random post created for testing purpose only',
    updatedAt: ''
  }
};

render(<PostList posts={samplePostsData}/>)

Кроме того, ключ должен иметь тип string.

interface State {
  posts: {
    [key: string]: Post
  }
}