如何测试使用div(react测试库)渲染的组件数量

Question

我有这个测试文件

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内的注释数量，所以我做了comment.replies.length + 1，因为repliesdiv外只有一个Comment组件的实例，但这不是一个好方法，因为如果我在这个div外添加另一个Comment组件，我可以很容易地添加，从而破坏我的测试。

我想还有更好的方法吗？

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

以上测试现已通过。