如何测试用 div（react-testing-library）渲染的组件数量？

Question

I have this test file

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

And following matching component:

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;

What I want to test is the number of comments inside of the replies div, so, I did comment.replies.length + 1 as there is only 1 instance of Comment component outside of the replies div, but this is not really a good way, as I could add easily break my test if I add another Comment component outside of this div.

I suppose there is a better way?

Answer 1

I've just realized that there is a within helper.

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

The above test passes now.