Карма - JQuery: Как получить код JQery на стороне клиента для работы в тестах кармы?

Question

У меня проблема, которая, похоже, не имеет решения, которое я могу найти.

У меня есть среагировать компонент, который использует JQuery изменить классы некоторых DOM-узлов на основе события щелчка, как так (упрощенный вариант):

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() вызываются моделируемым щелчок, но

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

не удался, потому что JQuery не может видеть любого из элементов, предоставляемых renderIntoDocument.

Короче говоря, jQuery вызывается в глобальном контексте браузера Кармы (я использую хром, а не то, что он имеет значение), а не в каком бы контексте рендеринга моего компонента React.

Любые идеи о том, как получить jquery для вызова в правильном контексте, чтобы он мог видеть узлы, которые он должен выбрать? Ничего, что я нашел из поиска, похоже, не справляется с этой проблемой.

Answer 1

Если вы хотите избежать ошибок, вы должны издеваться над jQuery.

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

Если вы хотите проверить этот код правильно, вы не должны t try to make end to end testing. Don т писать сложные сценарии в тесте. Например:

Тест # 1: Check "... следует создать объект"

Тест # 2: Проверка "по щелчку должен вызвать метод скрыть"

Тест # 3: Check " функция hide должна вызывать некоторые методы jQuery "

Результаты будут получены быстрее, и тесты будут более полезными