Jak przetestować funkcje wewnętrzne zdefiniowane dla składników bezstanowych w reakcji z enzymem

Question

Używam enzymu do testowania moich składników reagujących. Mam element bezstanowy, który ma wewnętrzną funkcję. Jak mogę sprawdzić i przetestować tę wewnętrzną funkcję?

Oto mój komponent:

const Btn = (props) => { 
    const types = ['link', 'plainLink', 'primary', 'secondary', 'danger', 'info']; 

    const handleClick = (event) => { 
    event.preventDefault(); 
    props.onClick(event); 
    }; 

    return (
    <button onClick={handleClick} className={classes}> 
     <span>{props.children}</span> 
    </button> 
); 
}; 

Próbowałem następujących, ale pojawia się błąd mówiąc: TypeError: niezdefiniowane nie jest konstruktorem

const btnComp = shallow(<Btn />); 
btnComp.instance().handleClick(); 

Answer 1

zwykle przetestować tę funkcję przez ustawienie a sinon.spy dla zdarzenia:

const click = sinon.spy(); 
const btnComp = shallow(<Btn onClick={click} />); 

btnComp.find('button').simulate('click'); 

expect(click.called).to.equal(true); 

Teraz już wiesz że wewnętrzna funkcja rzeczywiście wywołała zdarzenie, które jest najważniejszą częścią jego pracy.