如何使用React钩子测试功能组件内部的功能

Question

我有一个使用useState钩子的功能组件，如下所示：

import React,{useState} from 'react';
export const PList = (props) =>{
const [obj, setObj]= useState({
value: null,
open: null
});
let onDeleteList = (data) =>{
setObj({....});
};
return(
<React.Fragment>
{ 
props.arr.map((p,i)=>{
return <childA onDeleteList={onDeleteList} />
})
}
</React.Fragment>
);
}

我正在使用Jest+酶，并希望编写一个测试用例来测试该组件中的onDeleteList函数。我尝试了以下代码：

describe('PList',()=>{
let wrapper = shallow(<Plist {...props}/>);
it('should call onDeleteList',()=>{
expect(wrapper.find('onDeleteList')).toBeTruthy();
});
});

我不确定这是否是正确的方式，覆盖率报告仍然显示测试用例中没有覆盖onDeleteList((。有人能告诉我如何为这个场景编写测试用例吗？

Answer 1

这就是您应该测试的方式：

import childA here 
describe('PList',()=>{
let wrapper = shallow(<Plist {...props}/>);
it('should call onDeleteList',()=>{
const onDeleteListHandler=wrapper.find(childA).at(0).prop("onDeleteList");
onDeleteListhandler(pass your data here);
expect(onDeleteListhandler).toHaveBeenCalledTimes(1);

});

});