Question

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;

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

第二项测试失败，因为它说我的模拟响应未定义。但是，当我删除第一个测试时，第二个测试通过了。如果我在运行测试时在组件中打印出响应，则表明我模拟的响应是应该的。我不知道这两个测试用例之间有什么关系或发生了什么。

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

Answer 1

据我了解，原因是第一个测试的运行出现问题，导致第二个测试失败。

我的意思是效果中的代码将从第一个测试运行到第二个测试，但是第二个测试在此行运行的同时发生错误：

const sendReq = async () => {
  const res = await axios.get(url);
  // res is undefined in the 1st test
  // so it won't read the data property, you might see this in your log terminal
  setData(res.data);
}

简而言之，要解决此问题，您可能必须在运行第二项测试之前清理所有内容，或者只是为了在第一项测试中具有价值而进行模拟以避免异常：

it("shows loading", () => {
  // Mock to avoid exception
  axios.get.mockResolvedValue({ data: {} });
 
  render(<Post url="/test"></Post>);
  expect(screen.getByTestId("loading")).toHaveTextContent(/loading/i);
  
  // It can't help to stop async task in effect
  cleanup();
});

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

1 个答案: