reactjs - 具有 useEffect 的反应组件的单元测试

Question

我正在尝试在下面的代码中测试 useEffect 中的 useEffect 和函数调用。它有 useEffect 和 useState 钩子。

const App = () => {
  const [search, setSearch] = useState("");
  const [images, setImages] = useState([]);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);

  const getImageData = async () => {
    console.log(getImages());
    const { data, error } = await getImages();
    handleData(data, error);
  };

  const searchImageData = async (search) => {
    const { data, error } = await searchImages(search);
    handleData(data, error);
  };

  const handleData = (data, error) => {
    setLoading(true);
    if (data) {
      setImages(data);
    } else if (error) {
      setError(error);
    }
    setLoading(false);
  };

  // get images using hooks
  useEffect(async () => {
    if (search.length > 0) {
      searchImageData(search);
    } else {
      getImageData();
    }
  }, [search]);

  return (
    <center>
      <h1>Photo Search App</h1>
      <SearchBox search={search} setSearch={setSearch} />
      <div className="photo-container">
        {loading ? (
          <p>Loading</p>
        ) : error ? (
          <p>Error loading data</p>
        ) : images.length > 0 ? (
          <Gallery images={images} />
        ) : (
          <p>No photos found</p>
        )}
      </div>
    </center>
  );
};

我不知道如何模拟与钩子相关的东西。有什么测试钩子和异步函数调用的建议吗？