时间戳

首页 > 解决方案 > Jest/Enzyme 测试将 Child 道具作为反应功能组件中的功能

javascript - Jest/Enzyme 测试将 Child 道具作为反应功能组件中的功能

问题描述

我已经看到很多关于在反应类组件中测试模拟或子道具作为函数的示例，我正在尝试为功能组件测试类似的东西。看起来孩子 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。在功能组件中调用子 prop 函数是否有不同的方法？

标签： javascriptreactjsjestjsenzyme

解决方案

我明白了，在模拟事件之后，哪里出错了，而不是在 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 正在执行，我就改变了访问道具的方式并且它起作用了！

推荐阅读