I have this component that I would like to test using Jest and React testing library :

export function GenericDivider({ stepsHeader = [], componentsFactory = [] }) {

   const [currentPage, changePage] = useState(0);

   const Component = componentsFactory[currentPage] || (() => <></>);



   return (

    <div className=container page__container>

          ...

                 <a

                   href=#

                   key={name}

                   onClick={e => {

                     e.preventDefault();

                     if (index < componentsFactory.length) changePage(index);

                   }}

                   className={`nav-link ${currentPage === index && 'active'}`}

                 >

                   {name}

                 </a>

          ...

    </div>

   );

}



export default memo(GenericDivider);

I would like to test if changePage is called when I fire a click, is there a way i can do that using Jest and React testing library ?

I'm new to testing and I tried this but it doesn't seem to work

it('Should call changePage when button clicked', () => {

    const changePage = jest.fn();



    const { container } = render(

      <GenericDivider

        stepsHeader={['hamid', 'walid', 'khalid']}

        componentsFactory={[() => <></>, () => <></>, () => <></>]}

      />,

    );



    const button = container.querySelector('a');

    fireEvent.click(button);

    expect(changePage).toHaveBeenCalled();

  });