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

   });
   
 });

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

1 个答案: