Question

我是React的新手，在测试组件时遇到了一些麻烦。我有一张代表一些评论的卡片清单。每张卡均包含用户名，发布日期和评论正文。我使用假回复来创建两个评论，并且我想检查每个卡的值，但是我想确保我提供给第一张卡的值与第一张卡相对应，而第二张卡则相同一。我应该如何处理？到目前为止，我使用了 getAllByRole（'listitem'），并且得到了一个包含每个列表项的节点对象的数组。问题是我不知道如何提取用户名，日期和正文的值，以便我可以对其进行验证，或者如何检查我输入的用户名，日期和正文的值是否在该对象。

const fakeViewCommentsResponse = {
    success: 1,
    error: '',
    comments: [
      {
        user_id: 'USER-ID-1',
        date_posted: '2020-01-01 00:00:00',
        body: 'First comment',
      },
      {
        user_id: 'USER-ID-2',
        date_posted: '2020-01-01 01:00:00',
        body: 'Second comment',
      }
    ]
  };

这里是组件

function ViewComments(props) {
  const [viewComment, setViewComment] = useState([]);

  useEffect(() => {
    fetch('/api/comments/' + props.id)
    .then(response => response.json())
      .then(data => {
        if (data.success === 1) {
          setViewComment(data.comments);
        }
      })
  }, []);

  return (
    <>
    <List
      itemLayout="horizontal"
      dataSource={viewComment}
      className="site-layout"
      style={{ padding: '0 50px', marginTop: 64 }}
      renderItem={item => (
        <List.Item id="comments-id">
          <Card title={item.user_id} extra={item.date_posted} size="small"
            className="comment" id="card">
              {item.body}
          </Card>
        </List.Item>
      )}
    />
    </>
  );
}

测试反应成分含量

0 个答案: