Jest/Enzyme Test 在 React 功能組件中將 Child prop 觸發為 function

Question

我已經看到許多關於在反應 class 組件中測試模擬或子道具 function 的示例，我正在嘗試為功能組件測試類似的東西。 看起來孩子 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();似乎沒有任何效果，我看到 beforeClick afterClick 值為 0。在功能組件中調用子道具 function 有不同的方法嗎？

Answer 1

我明白了，哪里出了問題，在模擬事件之后，我沒有在子對象上調用 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 正在執行，我就改變了我訪問道具的方式並且它起作用了！