Reactjs 仅当存在另一个测试时，反应测试用例失败

Post.jsx：

import axios from "axios";
const Post = ({ url }) => {
  const [data, setData] = useState(null);
  useEffect(() => {
    const sendReq = async () => {
      const res = await axios.get(url);
      setData(res.data);
    };
    sendReq();
  }, []);
  if (!data) {
    return <span data-testid="loading">"Loading...."</span>;
  }
  return (
    <div>
      <span data-testid="body">{data.body}</span>
    </div>
  );
};

export default Post;

从“axios”导入axios；
const Post=（{url}）=>{
const[data，setData]=useState（null）；
useffect（（）=>{
const sendReq=async（）=>{
const res=等待axios.get（url）；
setData（res.data）；
};
sendReq（）；
}, []);
如果（！数据）{
返回“加载…”；
}
返回(
{data.body}
);
};
导出默认帖子；

Post.test.jsx：

import { cleanup, screen, render, waitFor } from "@testing-library/react";
import Post from "./Post";
import axios from "axios";
jest.mock("axios");

describe("Post component", () => {
  it("shows loading", () => {
    render(<Post url="/test"></Post>);
    expect(screen.getByTestId("loading")).toHaveTextContent(/loading/i);
    cleanup();
  });
  it("shows post", async () => {
    const resp = { data: { body: "COunter strike" } };
    axios.get.mockResolvedValue(resp);
    render(<Post url="/test"></Post>);
    await waitFor(() => screen.getByTestId("body"));
    screen.debug();
    expect(screen.getByTestId("body")).toHaveTextContent(/counter/i);
  });
});

从“@testing library/react”导入{cleanup，screen，render，waitFor}；
从“/Post”导入Post；
从“axios”导入axios；
开玩笑的模仿（“axios”）；
描述（“后组件”，（）=>{
它（“显示加载”，（）=>{
render（）；
期望（screen.getByTestId（“加载”））.toHaveTextContent（/loading/i）；
清理（）；
});
它（“显示post”，异步（）=>{
const resp={data:{body:“COunter strike”}；
axios.get.mockResolvedValue（resp）；
render（）；
等待waitFor（（）=>screen.getByTestId（“body”）；
screen.debug（）；
期望（screen.getByTestId（“body”）.toHaveTextContent（/counter/i）；
});
});

第二个测试失败，因为它说我的模拟响应未定义。但是，当我删除第一个测试时，第二个测试通过了。如果我在运行测试时打印出组件中的响应，它将显示模拟响应的状态。我不知道这两个测试用例之间是否存在某种关系，或者发生了什么

---

有人能帮我理解发生了什么以及为什么吗？谢谢。

据我了解，原因是第一次测试在运行时出现问题，导致第二次测试失败

我的意思是效果中的代码将从第一个测试运行到第二个测试，但在第二个测试运行的同时，在这一行的右侧出现了一个错误：

const sendReq=async（）=>{
const res=等待axios.get（url）；
//res在第1次测试中未定义
//因此它不会读取数据属性，您可能会在日志终端中看到这一点
setData（res.data）；
}

简言之，要解决此问题，您可能必须在运行第二个测试之前清理所有内容，或者在第一个测试中模拟以获得值，以避免异常：

it（“显示加载”，（）=>{
//模拟以避免异常
axios.get.mockResolvedValue（{data:{}}）；
render（）；
期望（screen.getByTestId（“加载”））.toHaveTextContent（/loading/i）；
//它不能帮助停止异步任务的效果
清理（）；
});

据我所知，原因是第一个测试在运行时出现问题，导致第二个测试失败

我的意思是效果中的代码将从第一个测试运行到第二个测试，但在第二个测试运行的同时，在这一行的右侧出现了一个错误：

const sendReq=async（）=>{
const res=等待axios.get（url）；
//res在第1次测试中未定义
//因此它不会读取数据属性，您可能会在日志终端中看到这一点
setData（res.data）；
}

简言之，要解决此问题，您可能必须在运行第二个测试之前清理所有内容，或者在第一个测试中模拟以获得值，以避免异常：

it（“显示加载”，（）=>{
//模拟以避免异常
axios.get.mockResolvedValue（{data:{}}）；
render（）；
期望（screen.getByTestId（“加载”））.toHaveTextContent（/loading/i）；
//它不能帮助停止异步任务的效果
清理（）；
});

谢谢，伙计，我终于明白了。你是个老板，谢谢你。谢谢你，老兄，我终于明白了。你是老板，谢谢。