Как правильно протестировать компонент React?

Question

Когда я тестирую реагирующий компонент, каковы наилучшие практики и на что мне нужно проверять? В обычных тестах я обычно просто проверяю, правильное ли состояние + вход приводит к правильному состоянию + выход

Но компоненты React немного отличаются. У них есть состояние + реквизит + userInput, которые приводят к состоянию + разметка.

Это может привести ко многим и многим потенциальным сценариям. Нужно ли проверять состояние всех этих сценариев? Разметка может быть огромной. Должен ли я проверить, соответствует ли вся разметка? Или просто его часть? Как определить, какую часть разметки нужно проверить?

Answer 1

Первые очевидные вещи, которые нужно иметь в виду:

• Если логика ваших компонентов может быть воплощен в модули и испытаны независимо друг от друга, то сделайте это. Пример. Для компонента калькулятора сами вычисления могут быть протестированы независимо от компонента. Я знаю, что это очевидно, но просто чтобы сказать суть.
• Разделите свои компоненты на более мелкие и тщательно проверьте каждый из них.

Что касается компоненты, всегда теста:

• Если правильный реквизит будет оказывать правильный вывод (HTML).
• Если правильное взаимодействие с пользователем (щелчок, нажатие клавиш ...) приведет к соответствующим событиям и приведет к правильному выходу (HTML). Обычно я не занимаюсь состоянием компонентов во время модульных тестов, так как я не считаю это хорошей практикой. Для тестирования телевизора вам не нужно открывать его.

Если вы не уверены в том, какую библиотеку использовать для тестирования компонентов React, я настоятельно рекомендую Enzyme.

Примеры из своей страницы GitHub:

describe('<MyComponent />',() => { 
    it('renders three <Foo /> components',() => { 
    const wrapper = shallow(<MyComponent />); 
    expect(wrapper.find(Foo)).to.have.length(3); 
    }); 

    it('renders an `.icon-star`',() => { 
    const wrapper = shallow(<MyComponent />); 
    expect(wrapper.find('.icon-star')).to.have.length(1); 
    }); 

    it('renders children when passed in',() => { 
    const wrapper = shallow(
     <MyComponent> 
     <div className="unique" /> 
     </MyComponent> 
    ); 
    expect(wrapper.contains(<div className="unique" />)).to.equal(true); 
    }); 

    it('simulates click events',() => { 
    const onButtonClick = sinon.spy(); 
    const wrapper = shallow(
     <Foo onButtonClick={onButtonClick} /> 
    ); 
    wrapper.find('button').simulate('click'); 
    expect(onButtonClick).to.have.property('callCount', 1); 
    }); 
});