Tengo una función en mi aplicación de la siguiente manera:
import React from 'react'; import { useHistory } from "react-router-dom"; const Main: React.FunctionComponent<{ data: any[] }> = ({ data: result }) => { const history = useHistory(); return ( <> {result?.map(inner => { const handleClick = () => { history.push(`/list/${result?.id}`, { item: result?.item}) } return ( <div key={result.id} onClick={handleClick}> <div className="inner-content">{result?.content}</div> </div> ) })} </> ) } export default Main;Tengo un caso de prueba en mis pruebas de la siguiente manera:
const mockHandleClick = jest.fn(); jest.mock('react-router-dom', () => ({ ...jest.requireActual('react-router-dom'), useHistory: () => ({ push: mockHandleClick, }), })); it('Should test history push', () => { let tree = create(<div onClick={mockHandleClick}><div class="inner- content">Content Here</div></div>); const button = tree.root.findByType('div') button.props.onClick() expect(mockHandleClick).toHaveBeenCalledTimes(1); }); Esto pasa, pero la función handleClick todavía se marca en la cobertura del código. así que no estoy logrando una cobertura del 100%.
¿Algunas ideas?
Creo que tiene problemas para obtener una cobertura de código más completa porque está declarando una devolución de llamada handleClick para cada objeto de elemento de result iterado. La prueba parece seleccionar solo el primer div .
Refactorice el controlador handleClick en el cuerpo del componente y pase un solo controlador a cada elemento asignado y pase el objeto asignado al controlador.
const Main: React.FunctionComponent<{ data: any[] }> = ({ data: result }) => { const history = useHistory(); const handleClick = (inner) => () => { history.push(`/list/${inner?.id}`, { item: inner?.item }); }; return ( <> {result?.map(inner => ( <div key={inner.id} onClick={handleClick(inner)}> <div className="inner-content">{inner?.content}</div> </div> ))} </> ); };