Jest/Enzyme 测试将 Child prop 触发为反应功能组件中的功能答案

【问题标题】：Jest/Enzyme Test firing Child prop as function in react functional componentJest/Enzyme 测试将 Child prop 触发为反应功能组件中的功能
【发布时间】：2020-11-24 00:59:35
【问题描述】：

我已经看到很多关于在反应类组件中测试模拟或子道具作为函数的示例，我正在尝试为功能组件测试类似的东西。看起来孩子 onClick 没有被解雇。

我的组件.jsx

const myComponent = () => {
const [val, setVal] = useState(0);
const clickedVal = () => {
    setVal(prev => prev + 1);
  };
return (
 <Paper variant="outlined">
   <IconButton onClick={() => clickedVal()}>
    <MaterialUIIcon/>
   </IconButton>
<Child val={val}/>
</Paper>
)
}

我在下面试过了，

我的组件.test.jsx

it("test", () => {
wrapper = shallow(<MyComponent/>);
const child = wrapper.find(Child);
const iconButton = wrapper.find(IconButton)
console.log(`beforeClick ${child.prop("val")}`);
iconButton.simulate("click")
console.log(`afterClick ${child.prop("val")}`);

我根本看不到值的变化，我也尝试了以下 iconButton.prop("onClick)(); iconButton.props().onClick(); nothings 似乎工作，我看到 beforeClick afterClick 值为 0。在功能组件中调用子 prop 函数有不同的方法吗？

【问题讨论】：

您的代码看起来不错。在 clickedVal 中添加一个 console.log 并查看它是否正在执行。可能是您在孩子中访问 val 的方式是错误的。也可以在模拟点击后尝试 wrapper.update()
@soumyasunny 我刚刚在 clickedVal 中检查了 console.log 它正在执行，我可以看到值在我的代码中从 0 更新到 1 但仍然console.log(afterClick ${child.prop( "val")}); 显示为 0。我尝试在模拟后添加 wrapper.update() 没有任何区别

标签： javascript reactjs jestjs enzyme

【解决方案1】：

我知道了，哪里出错了，在模拟事件之后，我没有在 child 上调用 prop val，而是再次找到 Child 组件，然后像下面那样获取 prop val

it("test", () => {
wrapper = shallow(<MyComponent/>);
const child = wrapper.find(Child);
const iconButton = wrapper.find(IconButton)
console.log(`beforeClick ${child.prop("val")}`); // val is 0
iconButton.simulate("click")
console.log(`afterClick ${wrapper.find(Child).prop("val")}`);// val is 1

感谢@soumyasunny，一旦我看到 clickedVal 正在执行，我就改变了访问道具的方式并且它起作用了！

【讨论】：