reactjs - 如何使用 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() 未包含在测试用例中。谁能告诉我如何为这种情况编写测试用例？

标签： reactjsjestjsenzyme

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

   });
   
 });