在 react 中测试显示的组件而不是用户交互是否被认为是好的

问：

我正在 react 中练习 TDD，只是好奇我是否做对了事情。看，我有这个非常简单的组件：

export default function Reviews({ reviews }: { reviews: Review[] }) {
  return (
    <div data-testid={"reviews"}>
      {reviews.map((review: Review) => (
          <div data-testid={"user-name"}>{review.user.name}</div>
          <div data-testid={"review-text"}>{review.text}</div>
          <div data-testid={"review-date"}>{review.date}</div>
        </div>
      ))}
    </div>
  );
}

问题是 - 这套测试是否被认为是多余的，因为它不测试用户与组件的交互，它只是测试组件是否正确渲染传递的道具。

describe("Reviews", () => {
  it("displays user's name", () => {
    const reviews = [getCarReviews()[0]];
    render(<Reviews reviews={reviews} />);

    expect(screen.getByTestId("user-name")).toHaveTextContent(
      reviews[0].user.name,
    );
  });

  it("displays review text", () => {
    const reviews = [getCarReviews()[0]];
    render(<Reviews reviews={reviews} />);

    expect(screen.getByTestId("review-text")).toHaveTextContent(
      reviews[0].text,
    );
  });

  it("displays review date", () => {
    const reviews = [getCarReviews()[0]];
    render(<Reviews reviews={reviews} />);

    expect(screen.getByTestId("review-date")).toHaveTextContent(
      reviews[0].date,
    );
  });
});