Jest/酶测试射击儿童道具作为反应功能部件的功能

Question

我见过很多在react类组件中测试模拟或子道具作为函数的例子，我正在尝试为功能组件测试类似的东西。看起来child onClick没有被解雇。

my-component.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>
)
}

我在下面试过了，

my-component.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();似乎什么都不起作用，我看到beforeClickafterClick值为0。是否有不同的方法来调用函数组件中的子道具函数？

Answer 1

我拿到了，哪里出了问题，在模拟事件后，我没有在child上调用prop-val，而是再次使用findtheChild组件，然后在下面获得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

谢谢@soumyasanson，当我看到clickedVal被执行时，我改变了访问道具的方式，它成功了！