Как проверить свойства и функции на компоненте React?

Question

Я пробовал все с enzyme, однако я не могу найти правильный способ тестирования этих свойств ниже. Имейте в виду, что этот компонент завернут в фиктивный компонент Provider, чтобы я мог передать необходимые реквизиты (то есть Store) вниз для целей монтажа.

1) После монтажа, свойство устанавливается на Приемник событий было добавлено

3) на слушателя событий, someFunction вызывается экземпляром (например this.property)

2)

class SampleComponent extends Component { 

    componentDidMount() { 
    this.property = 'property'; 
    window.addEventListener('scroll', this.someFunction, true); 
    } 

    someFunction =() => { 
    return 'hello'; 
    }; 

    render() { 
    return <h1>Sample</h1>; 
    } 
} 

export default EvalueeExposureList; 

Answer 1

Хорошо, я обновил свой ответ на основе обсуждения с OP. В тестируемом компоненте у провайдера redux и связанного компонента есть дочерний элемент, поэтому мы выбираем использование фермента мелкого API.

---

В отношении отслеживания и тестирования addEventListener вы можете использовать sinon библиотеку для создания шпиона, который временно «заменяет» window.addEventListener. Это дает вам доступ к счету вызовов, а также к аргументам, с которыми он был вызван.

Используя фермент и мокко, я создал следующие тесты, которые проходили для меня. Первые два теста охватывают все ваши случаи выше и для хорошей меры. Я добавил еще один пример того, как тестировать вывод someFunction.

import React from 'react'; 
import { expect } from 'chai'; 
import sinon from 'sinon'; 
import { shallow } from 'enzyme'; 

// Under test. 
import SampleComponent from './SampleComponent'; 

describe('SampleComponent',() => { 
    let addEventListenerSpy; 

    beforeEach(() => { 
    // This replaces the window.addEventListener with our spy. 
    addEventListenerSpy = sinon.spy(window, 'addEventListener'); 
    }); 

    afterEach(() => { 
    // Restore the original function. 
    window.addEventListener.restore(); 
    }); 

    // This asserts your No 1. 
    it(`should set the property`,() => { 
    const wrapper = shallow(<SampleComponent />); 
    wrapper.instance().componentDidMount(); // call it manually 
    expect(wrapper.instance().property).equal('property'); 
    }); 

    // This asserts your No 2 and No 3. We know that by having 
    // passed the someFunction as an argument to the event listener 
    // we can trust that it is called. There is no need for us 
    // to test the addEventListener API itself. 
    it(`should add a "scroll" event listener`,() => { 
    const wrapper = shallow(<SampleComponent />); 
    wrapper.instance().componentDidMount(); // call it manually 
    expect(addEventListenerSpy.callCount).equal(1); 
    expect(addEventListenerSpy.args[0][0]).equal('scroll'); 
    expect(addEventListenerSpy.args[0][1]).equal(wrapper.instance().someFunction); 
    expect(addEventListenerSpy.args[0][2]).true; 
    }); 

    it(`should return the expected output for the someFunction`,() => { 
    const wrapper = mount(<SampleComponent />); 
    expect(wrapper.instance().someFunction()).equal('hello'); 
    }); 
}); 

Может быть, стоит отметить, что я бегу мои тесты на узле, но у меня есть jsdom установки в моей mocha конфигурации, которая, вероятно, кандидат отвечает за создание window.addEventListener в для использования в моей тестовой среде. Выполняете ли вы свои тесты через браузер или узел? Если узел вам может понадобиться сделать что-то похожее на меня.