Question

我已经看到了许多示例，这些示例在React类组件中将模拟或子道具作为函数进行测试，我正在尝试对功能组件进行类似的测试。看起来孩子的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(); 似乎什么都没用，我看到beforeClick afterClick的值为0。在功能组件中调用子prop函数是否有其他方法？

Answer 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正在执行，我就改变了我访问道具的方式，并且奏效了！

开玩笑/酵素测试触发子道具作为反应功能组件中的功能

1 个答案: