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

Question

I have a functional component which uses useState hook as shown below:

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>
      );
    }

I an using Jest+ enzyme and looking to write a test case to test the onDeleteList function in this component. I have tried with the below code:

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

I am not sure if this is the correct way, the coverage report still shows the onDeleteList() is not covered in the test case. Can anyone please advise how can I write a test case for this scenario?

Answer 1

This is how you should be testing:

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);
    

   });
   
 });