Javascript 如何在ComponentDidMount-React+；打字脚本+；开玩笑+；酶 应用程序

该应用程序是一个简单的待办事项列表。此应用程序从中获取TODO

我想做什么 测试在App.tsx中的ComponentDidMount中执行的API调用

我想模拟API调用并返回一个包含两项的列表。然后检查数组或状态中是否有两项

哪些文件对您很重要？

App.tsx（待测试组件）

ToDoList.test.tsx（包含测试函数）

简化App.tsx的一小部分

类应用程序扩展组件{
公共状态：IState={
项目：[]，
数值：5，
deleteItemParent:this.deleteItemParent
};
getAllTodos=async（）=>{
待命(
`https://jsonplaceholder.typicode.com/todos?&_limit=${this.state.value}`
)
.then（（response）=>response.json（））
。然后（（json）=>{
this.setState（{items:json}）
});
};
componentDidMount（）{
这个。getAllTodos（）；
}
componentDidUpdate（prevProps:any，prevState:any）{
//如果状态更改，则更新todo
if（prevState.value！==此.state.value）{
这个。getAllTodos（）；
}
}
render（）{
返回(
要使其正常工作，您必须改变以下几点：


当您的组件装入时，您忘记触发获取笔记，方法是将其置于
componentDidMount
：

componentDidMount（）{
这个。getAllTodos（）；
}


正如您所说，数据响应是不是文字对象的列表，因此您必须使用
todos
属性更改返回数组而不是文字对象的模拟。但为了确保它运行良好，我们必须在每次之前移动
：



在每个之前（（）=>{
global.fetch=jest.fn（（）=>
承诺，决心({
json:（）=>Promise.resolve（[//在此处作为数组返回
{
标题：“Todo1”，
已完成：false
},
{
标题：“Todo2”，
已完成：false
}
])
})
)作为玩笑。嘲笑
嘿，非常感谢！但它仍然不起作用：（.我确实忘记添加componentDidMount函数。项的状态应该是json，因为如果我添加了项：json，实际应用程序会工作。我在状态中收到TODO，并且项显示在屏幕上。我还在测试文件中添加了延迟，但测试失败。预期：2收到：0。我在帖子中编辑了代码：）。我还尝试了wait的outcommented行。你还有什么想法吗？如果数据返回正确的东西，你模拟的数据可能是错误的，应该是数组而不是文字对象。我编辑了答案以指出正确的mock。抱歉，我反应太晚了，我会尝试更快地响应。我按照你说的编辑了代码，但仍然没有我注意到我收到了另一个错误：“TypeError:无法读取未定义的'then'属性”.我在我的帖子中编辑了一个屏幕截图。我为你删除了复制的链接你好！哈哈，我喜欢你知道我有一个问题；p.我有一个问题。我正在尝试测试一个组件。我的意思是使用React Testing Library和Jest btw。如果你有时间回答，那就太好了：p.这是问题的stackoverflow链接：