테스트에서 내 버튼이 정의되지 않은 이유는 무엇입니까?

Question

내 시험 :

describe('button component',() => { 
    it('should toggle off when clicked',() => { 
     let component; 
     component = ReactTestUtils.renderIntoDocument(<Search />); 
     let searchbtn = ReactTestUtils.findRenderedDOMComponentWithTag(component, 'button'); 
     ReactTestUtils.Simulate.click(searchbtn); 
     console.log(searchbtn, 'search button***'); //UNDEFINED 
     expect(searchbtn.calledOnce).to.equal(false); 
    }) 
    }); 

이 내 검색 구성 요소입니다

render() { 
    return (
     <div className="search"> 
     <button className="searchButton" onClick={this.handleSearch}>{this.state.on ? 'ON' : 'OFF'}</button> 
     </div> 
    ); 
    } 

내가 그것을 그것을 감시하거나 조롱해야합니까? 또는 반응하는 버튼을 테스트하는 더 좋은 방법이 있습니까?

Answer 1

enzyme 태그를 추가 했으므로 enzyme을 사용하여 답변 드리겠습니다.

이 얕은 렌더링을 통해 아주 쉽게 테스트 할 수 있습니다 -

const searchWrapper = shallow(<Search />); 
const button = searchWrapper.find('button').first(); 

당신이 버튼을 호출 할 것입니다 귀하의 경우 handleSearch입니다 onClick 소품 통해 제공되는 onClick 핸들러를 이벤트를 클릭 시뮬레이션합니다.

onClick 함수 호출에 따라 일부 상태를 설정하는 경우 해당 상태 변경에 따라 ui 변경 사항을 비교하거나 변경 사항이 dom에 올바르게 반영되었는지 확인할 수 있습니다.

또는

그냥 메서드가 호출되었는지 확인하려면 여부 유사한 이름의 가짜 방법을 사용하여 -

const onButtonClick = sinon.spy(); 
expect(onButtonClick.calledOnce).to.equal(false); 
button.setProps({ onClick:onButtonClick}); 
button.simulate('click'); 
expect(onButtonClick.calledOnce).to.equal(true);