为呈现帖子列表编写测试用例

Question

I am wanting to write a test for the code below which basically renders all the blog posts such that the latest post is on the top. I am new to React test Library and every time I add my components in the React testing Library I get the following error :

No overload matches this call. Overload 1 of 2, '(props: Readonly): PostList', gave the following error. Property 'posts' is missing in type '{}' but required in type 'Readonly'. Overload 2 of 2, '(props: State, context?: any): PostList', gave the following error. Property 'posts' is missing in type '{}' but required in type 'Readonly'.

Here is my test file

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

Looking at the Generics typings for your PostList class component, I noticed that posts is a required property for its props. Therefore, when you render your component in your tests, you are required to include the required props ( posts ). Usually, in unit tests, it will be fine to supply your props with mock data.

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}/>)

In addition, key needs to be of type string .

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