在反应测试库中单击后如何测试链接消失？

Question

我有一个组件，当单击链接时，会执行一些异步操作以获取其他回复，一旦完成并且重新呈现组件，链接就会消失。 这是下面的组件：

import axios from "axios";
import Comment from "./Comment";

const CommentThread = ({ comment, comments, setComments }) => {
  const handleMoreReplies = async (e) => {
    e.preventDefault();
    const response = await axios.get(
      `/api/comment_replies?comment_id=${comment.id}`
    );
    const replies = response.data;
    setComments(
      comments.map((c) => {
        if (c.id === comment.id) {
          return { ...c, replies: c.replies.concat(replies) };
        }
        return c;
      })
    );
  };

  return (
    <div className="parent-comment">
      <Comment {...comment} />
      <div className="replies">
        {comment.replies.map((reply) => {
          return <Comment key={reply.id} {...reply} />;
        })}
        {comment.replies_count === comment.replies.length ? null : (
          <a href="#" className="show_more" onClick={handleMoreReplies}>
            Show More Replies (2)
          </a>
        )}
      </div>
    </div>
  );
};

export default CommentThread;

我想测试当点击按钮时链接不再显示在页面上。 我可以测试 axios 请求是否已通过正确的 url 传递，但我无法测试链接是否消失，就好像我确实waitForElementToBeRemoved我收到一个错误，它无法读取undefined的属性data ，这意味着响应是undefined 。

/**
 * @jest-environment jsdom
 */
import "@testing-library/jest-dom";

import { render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import CommentThread from "../components/CommentThread";

jest.mock("axios");

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,
    },
  ],
};

const comments = [
   {
    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,
      },
    ],
  }


test("setComments called when the link is clicked", async () => {
  const user = userEvent.setup();

  const response = {
    data: [
      {
        id: "116dbd01-d5f3-4dfb-afeb-f822a9264a5f",
        comment_id: "4b2d74e6-7d1a-4ba3-9e95-0f52ee8ebc6e",
        author: "Srdjan",
        body: "Officia suscipit sint sint impedit nemo. Labore aut et quia quasi ut. Eos voluptatibus quidem eius delectus beatae excepturi.",
        postedAt: 1550419941546,
      },
      {
        id: "116dbd01-d5f3-4dfb-afeb-f822a9264a5d",
        comment_id: "4b2d74e6-7d1a-4ba3-9e95-0f52ee8ebc6e",
        author: "Max",
        body: "Officia suscipit sint sint impedit nemo. Labore aut et quia quasi ut. Eos voluptatibus quidem eius delectus beatae excepturi.",
        postedAt: 1550419941546,
      },
    ],
  };
  const func = jest.fn();
  render(
    <CommentThread comment={comment} comments={comments} setComments={func} />
  );
  const link = screen.getByRole("link", { name: /Show More Replies/ });

  axios.get.mockResolvedValueOnce(response);
  await user.click(link);
  expect(axios.get).toHaveBeenCalledWith(
    `/api/comment_replies?comment_id=${comment.id}`
  );
});

为了能够测试链接是否消失，我需要以某种方式从服务器获取 axios 响应并用其他回复填充评论。

Answer 1

我试图快速理解您的代码，看起来setComments回调方法以某种方式用于更新comments中的comment ；）？

所以我们要做的是使用该方法回调值并使用新更新的comment object 重新渲染组件。 然后我们可以实际查询链接是否仍然存在。

一种快速的解决方案是：

(...)
  const func = jest.fn();
  const commentThread = render(
    <CommentThread comment={comment} comments={comments} setComments={func} />
  );
  const link = screen.getByRole("link", { name: /Show More Replies/ });
 
  axios.get.mockResolvedValueOnce(response);
  await user.click(link);
  expect(axios.get).toHaveBeenCalledWith(
    `/api/comment_replies?comment_id=${comment.id}`
  );

  const newComments = func.mock.calls[0][0]

  commentThread.rerender(
    <CommentThread comment={newComments.find(({ id }) => id === comment.id )} comments={comments} setComments={func} />
  );

  expect(screen.queryByRole("link", { name: /Show More Replies/ })).toBeNull();
}