カルマ - 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')) 

は失敗しました。

私はRearmコンポーネントがレンダリングされているにもかかわらず、カルマのブラウザの世界的なコンテキスト（私はクロムを使用していますが、それは重要ではありません）ではjqueryが呼び出されています。

それは実際に選択することになっていたノードを見ることができるように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 "をクリックでは、メソッドの皮を呼び出す必要があります"関数のhideはいくつかのjQueryメソッドを呼び出す必要があります "

結果がより速くなり、テストはよりサポートしやすくなります