Javascript 为什么我的单元测试返回'；无法读取属性'；模拟'；未定义的'；在这个反应测试中？

我有一个应用程序，它通过映射一个数组对象来渲染多张卡片。每张卡都有一个按钮，点击它会增加物品成本。以下是一个工作示例：

代码如下：

Home.js：

const卡=[
{
id:1，
标题：“汽车”，
价格:10
},
{
id:2，
标题：“自行车”，
价格:20
},
{
id:3，
标题：“飞机”，
价格:30
}
];
常量Home=（）=>{
const[totalPrice，setTotalPrice]=useState（[]）；
常量handleClick=（id，数量）=>{
让newState=[…总价]；
if（newState.find（（item）=>item.id==id）！==未定义）{
newState.find（（item）=>item.id==id）.qty+=qty；
}否则{
newState.push（{id:id，qty:qty}）；
}
设置总价格（newState）；
};
返回卡。地图（（d）=>{
const stateItem=totalPrice.find（（item）=>item.id==d.id）；
const qty=stateItem？stateItem.qty:0；
返回(
);
});
};
导出默认主页请注意，在浅层渲染中，将只渲染卡组件（仅渲染没有叶节点的包装器）。因此，如果需要渲染所有潜在客户节点，则需要使用
mount

此外，您还可以通过控制台记录
查找（“.add”）的结果-

console.log（buttons.debug（））

我建议在你把浅水区改成坐骑之前先把它记录下来。只是为了了解渲染的内容

进口将是

从“酶”导入{mount，shallow，configure}；

测试将是

it（“单击添加按钮时应显示正确的成本”，（）=>{
const wrapper=mount（）；//呈现所有内容
console.log（wrapper.debug（））；//检查呈现的内容
const buttons=wrapper.find（“.add”）；
console.log（buttons.debug（））；//记录找到的节点
按钮.at（0）.模拟（“单击”）；//在选择器处使用
expect（wrapper.find（“.total price”）.at（0.text（））.toBe（“10”）；
});
你不是应该做一些事情吗，比如
包装器。查找（'.add'）。在（0）处模拟（'click'）
.find（）
应该返回一个包装器。不是array@YevgenGorbunkov我尝试了
wrapper.find（'.add'）。在（0）处进行模拟（'click'），给了我错误：
方法“simulate”要在1个节点上运行。找到0。
很好，我如何检查控制台日志？Jest刚刚在terminal中给了我通过或失败的解释，我不知道在Browser中在哪里可以看到呈现的组件。你能告诉我如何通过更新答案来编写测试吗？我试过了，可以看到
console.log（buttons.debug（））记录3个按钮，但
按钮[0]。模拟（“单击”）
给我错误：
无法读取未定义的属性“模拟”
您需要在选择器处获取第0个元素。更新代码