编写渲染 post 列表的测试用例

Question

我想为下面的代码编写一个测试，它基本上呈现所有博客 post，以便最新的 post 位于顶部。我是 React 测试库的新手，每次我在 React 测试库中添加我的组件时，我都会收到以下错误：

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'.

这是我的测试文件

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

查看 PostList class 组件的泛型类型，我注意到 posts 是它的 props 所必需的属性。因此，当您在测试中渲染组件时，您需要包含所需的道具 (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
  }
}

编写渲染 post 列表的测试用例

Writing test case for rendering post list

unit-testing

typescript

reactjs

react-testing-library