reactjs 如何用API调用模拟这个定制的React钩子

dm7nw8vv  于 2022-12-22  发布在  React
关注(0)|答案(1)|浏览(124)

我是React测试的新手,我正在尝试为这个自定义钩子编写测试,它基本上从API获取数据并返回它。

const useFetch = (url) => {
    const [response, setResponseData] = useState();
    const [isLoading, setIsLoading] =  useState(true);

    useEffect(() => {
        fetch(url)
        .then(response => {
          if(response.ok === false){
            throw Error('could not fetch the data for that resource');
          } 
          return response.json();
        })
        .then(data => {
          setResponseData(data);
          setIsLoading(false);
        })
        .catch((err) => {
          console.log(err.message);
        })
      }, [url]);
    return {response, isLoading};
}

export default useFetch;

因为我是新来的,我已经尝试了许多解决方案,但没有一个工作,我也越来越困惑。你能为我提供一个简单的测试,以便我可以得到一个想法,如何做到这一点?

nwo49xxi

nwo49xxi1#

下面是https://testing-library.com/docs/react-testing-library/example-intro/使用msw库模拟服务器调用示例。
如果您模拟服务器而不是钩子,它将更能适应变化。
此外,如果您想学习如何避免抓取陷阱,我建议您使用像react-query这样的库,或者阅读它们的源代码并重新实现它们

相关问题