Реагировать на тестирование библиотеки - написание теста для отображения последнего сообщения сверху

Question

Я новичок в библиотеке тестирования React. Я написал свой код так, что все последние сообщения будут отображаться в верхней части страницы с помощью функции даты. Я пишу тест для того же компонента, но получаю сообщение об ошибке, как только я импортирую (PostList.tsx) в мой файл App.test.tsx. Ошибка:

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

Как я могу исправить это и написать тест для отображения последнего сообщения сверху?

Вот коды двух файлов:

App.test.tsx
    // imported PostList, react, render, fireEvent, cleanup
    it('See asked question most recent at the top', async() => {
     const {getByTestId, debug, getByText, getByPlaceholderText} = render(
   <PostList/> // this is where I am getting the error  
);

 PostList.tsx

type Post = {
_id: number,
fullName: string,
title: string,
body: string,
updatedAt: string
};

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

function compareByUpdatedAt(first, second) {
const date1 = Date.parse(first.updatedAt);
const date2 = Date.parse(second.updatedAt);
if (date1 > date2)
    return -1;
if (date1 < date2)
    return 1;
return 0;
}

function dateToString(date: Date): string {
return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`
    + ` ${date.getHours()}-${date.getMinutes()}-${date.getSeconds()}`;
}

export default class PostList extends React.Component <State, Post> {
renderPost(post: Post, index: number) {
    const currentDateTime = new Date(post.updatedAt);
    return (
        <div key={index}><Container><Card>
            <Title>
                <Link to={`/posts/${post._id}`}>{post.title}</Link>
            </Title>

            <FullName>
                {`${post.fullName}|${dateToString(currentDateTime)}`}
            </FullName>
            <Line />
            <Question>{post.body}</Question>
        </Card></Container></div>
    )
}
renderPosts() {
    const posts = Object.values(this.props.posts);
    return posts.sort(compareByUpdatedAt).map(this.renderPost.bind(this));
}
render() {
    return (
        <div>
            <Headers />
            {this.renderPosts()}
        </div>
    )}}