如何测试使用 div 呈现的组件数量（react-testing-library）？答案

【问题标题】：How to test the number of components that are rendered with a div (react-testing-library)?如何测试使用 div 呈现的组件数量（react-testing-library）？
【发布时间】：2020-10-28 00:30:54
【问题描述】：

我有这个测试文件

import React from "react";
import { render } from "@testing-library/react";
import ParentComment from "../components/ParentComment";

describe("ParentComment", () => {
  const comment = {
    id: "4b2d74e6-7d1a-4ba3-9e95-0f52ee8ebc6e",
    author: "Reed Fisher",
    body: "Sint in in sunt amet.",
    postedAt: 1550488214207,
    replies_count: 3,
    replies: [
      {
        id: "116dbd01-d5f3-4dfb-afeb-f822a9264a5e",
        comment_id: "4b2d74e6-7d1a-4ba3-9e95-0f52ee8ebc6e",
        author: "Kathleen Nikolaus",
        body:
          "Officia suscipit sint sint impedit nemo. Labore aut et quia quasi ut. Eos voluptatibus quidem eius delectus beatae excepturi.",
        postedAt: 1550419941546,
      },
      {
        id: "116dbd01-d643-4dfb-afeb-f822a9264a5e",
        comment_id: "4b2d74e6-7d1a-4ba3-9e95-0f52ee8ebc6e",
        author: "Kathleen Nikolaus",
        body:
          "Offici sint sint impedit nemo. Labore aut et quia quasi ut. Eos voluptatibus quidem eius delectus beatae excepturi.",
        postedAt: 1550419941546,
      },
    ],
  };
  let component;
  beforeEach(() => {
    component = render(<ParentComment comment={comment} />);
  });
  it("has a class parent-comment", () => {
    expect(
      component.container.querySelector(".parent-comment")
    ).toBeInTheDocument();
  });
  it("renders replies for comment", () => {
    let comments = component.getAllByTestId("comment");
    expect(comments.length).toBe(comment.replies.length + 1);
  });
});

以及以下匹配组件：

import React from "react";
import Comment from "./Comment";

const ParentComment = (props) => {
  const replies = props.comment.replies.map((reply) => (
    <Comment key={reply.id} comment={reply} />
  ));
  const handleShowMoreReplies = (e) => {
    e.preventDefault();
    props.onShowMoreReplies(props.comment.id);
  };
  return (
    <div className="parent-comment">
      <Comment comment={props.comment} />
      <div className="replies">
        {replies}
        {props.comment.replies_count !== replies.length ? (
          <a href="#" className="show_more" onClick={handleShowMoreReplies}>
            Show More Replies ({props.comment.replies_count - 1})
          </a>
        ) : null}
      </div>
    </div>
  );
};

export default ParentComment;

我要测试的是回复 div 中的 cmets 数量，所以我做了comment.replies.length + 1，因为在replies div 之外只有 1 个 Comment 组件实例，但这并不是一个很好的选择方式，因为如果我在这个 div 之外添加另一个 Comment 组件，我可以轻松地破坏我的测试。

我想有更好的方法吗？

【问题讨论】：

标签： reactjs react-testing-library

【解决方案1】：

我刚刚意识到有一个within 助手。

  it("renders replies for comment", () => {
    const { getAllByTestId } = within(
      component.container.querySelector(".replies")
    );
    let comments = getAllByTestId("comment");
    expect(comments.length).toBe(comment.replies.length);
  });

上面的测试现在通过了。

【讨论】：