Javascript 如何使用jest和Ezyme测试异步数据获取组件？

我有一个react组件，它使用

useffect

hook获取数据并相应地设置加载、成功和失败状态

import React, { useState, useEffect } from "react";
import { fetchData } from "./api";

function App({ id }) {
  const [data, setData] = useState(null);
  const [isFetching, setIsFetching] = useState(false);
  const [error, setError] = useState(null);
  useEffect(() => {
    setIsFetching(true);
    fetchData(id)
      .then(
        response => {
          setData(response.data);
          setIsFetching(false);
        },
        err => {
          setError(err);
          setIsFetching(false);
        }
      )
      .catch(err => {
        setError(err);
        setIsFetching(false);
      });
  }, [id]);

  if (data) {
    return <pre>{JSON.stringify(data)}</pre>;
  }
  if (isFetching) {
    return <div>fetching...</div>;
  }
  if (error) {
    return <pre>{JSON.stringify(error)}</pre>;
  }
  return <div>null</div>;
}

export default App;

import React，{useState，useffect}来自“React”；
从“/api”导入{fetchData}；
函数App（{id}）{
const[data，setData]=useState（null）；
const[isFetching，setIsFetching]=useState（false）；
const[error，setError]=useState（null）；
useffect（（）=>{
setIsFetching（true）；
获取数据（id）
.那么(
响应=>{
setData（response.data）；
setIsFetching（false）；
},
错误=>{
设置错误（err）；
setIsFetching（false）；
}
)
.catch（错误=>{
设置错误（err）；
setIsFetching（false）；
});
}，[id]）；
如果（数据）{
返回{JSON.stringify（data）}；
}
如果（正在获取）{
回程取回。。。；
}
如果（错误）{
返回{JSON.stringify（error）}；
}
返回null；
}
导出默认应用程序；

我试图用jest和酶来测试这个组件

这是一个沙箱

我收到一个奇怪的错误

无法读取未定义的属性'Isty'

---

是否有人可以帮助修复此测试？

以下是单元测试解决方案：

app.jsx

：

import React，{useState，useffect}来自“React”；
从“/api”导入{fetchData}；
函数App（{id}）{
const[data，setData]=useState（null）；
const[isFetching，setIsFetching]=useState（false）；
const[error，setError]=useState（null）；
useffect（（）=>{
setIsFetching（true）；
获取数据（id）
.那么(
（回应）=>{
setData（response.data）；
setIsFetching（false）；
},
（错误）=>{
设置错误（err）；
setIsFetching（false）；
},
)
.catch（（错误）=>{
设置错误（err）；
setIsFetching（false）；
});
}，[id]）；
如果（数据）{
返回
app.test.jsx
：

从“/App”导入应用程序；
从“酶”导入{mount}；
从“/api”导入{fetchData}；
从'react dom/test utils'导入{act}；
jest.mock（'./api.js'，（）=>{
返回{
fetchData:jest.fn（），
};
});
描述（'59586141'，（）=>{
之后（（）=>{
开玩笑。clearAllMocks（）；
});
它（'应该正确地获取数据'，异步（）=>{
constmresponse={data:{id:1}}；
常量mProps={id:1}；
fetchData.mockResolvedValueOnce（mResponse）；
const wrapper=mount（
jest在代码沙盒中运行时有问题吗？您能看一下并帮助我修复这里的错误吗