카르마 - Jquery : 카르마 테스트에서 클라이언트 측 Jquery 코드를 얻는 방법?

Question

내가 찾을 수있는 해결책이없는 것 같은 문제가 있습니다.

나는 같은 (간체 버전) 클릭 이벤트에 따라 약간의 DOM 노드의 클래스를 변경 jQuery를 사용하는 반응 요소가 있습니다 코드는 잘 작동

hide() { 
    if ($('.hidecontrols').hasClass('fa-arrow-left')) { 
    //hide UI 
    $('.hidecontrols').removeClass('fa-arrow-left'); 
    $('.hidecontrols').addClass('fa-arrow-right'); 
    } else { 
    //show UI 
    $('.hidecontrols').removeClass('fa-arrow-right'); 
    $('.hidecontrols').addClass('fa-arrow-left'); 
    } 
} 
render() { 
    return (
    <div> 
     <i onClick={this.hide} className="hidecontrols fa fa-2x fa-arrow-left" aria-hidden="true"/> 
    </div> 
); 
} 

난에서 테스트 브라우저. 나는이 시험으로 카르마를 달릴 때 :

it('should HIDE when the hide-arrow is clicked',() => { 
    var store = configure({}); 
    var provider = ReactTestUtils.renderIntoDocument(
    <Provider store={store}><Controls/></Provider> 
); 

    var controls = ReactTestUtils.scryRenderedComponentsWithType(provider, Controls)[0]; 
    var hideArrow = ReactTestUtils.scryRenderedDOMComponentsWithClass(controls, 'fa-arrow-left')[0]; 

    ReactTestUtils 
    .Simulate 
    .click(hideArrow); 

    var unHideArrow = ReactTestUtils.scryRenderedDOMComponentsWithClass(controls, 'fa-arrow-right')[0]; 

    expect(unHideArrow).toExist(); 
}); 

시험은 실패한다. this.hide()를 시뮬레이트 클릭 호출하지만 JQuery와 renderIntoDocument 렌더링 요소 중 하나를 볼 수 없기 때문에

if($('.hidecontrols').hasClass('fa-arrow-left')) 

실패한다.

짧게 말하면 jearery는 카르마 브라우저의 전역 컨텍스트에서 호출됩니다 (크롬을 사용하는 것이지 중요하지 않음). 내 React 구성 요소가 렌더링 된 컨텍스트가 아닙니다.

올바른 컨텍스트에서 jquery를 호출하여 실제로 선택할 노드를 볼 수있는 방법은 무엇입니까? 검색에서 찾은 어떤 것도이 문제를 해결하는 것 같지 않습니다.

Answer 1

테스트가 실패하지 않으려면 jQuery를 조롱해야합니다.

spyOn(window, 'jQuery').returns($('<div>')) 
spyOn(jQuery.fn, 'hasClass').returns({something}) 

제대로이 코드를 테스트하려면, 당신은 t이 테스트에서 복잡한 시나리오를 쓰기 t try to make end to end testing. Don shouldn. 예를 들면 :

테스트 # 1 : 확인 "... 객체를 생성해야한다"

테스트 # 2 :

시험 # "방법 숨기기를 호출해야 클릭에" 확인 3 : 확인 " 함수 숨기기가 일부 jQuery 메서드를 호출해야 함 "

결과가 더 빨리 나타나고 테스트가 더 많이 지원됩니다.