TDD с ферментом мелководье и крепление?

Question

При визуализации компонента с использованием shallow или mount компонент отображается в памяти и не привязан к DOM.

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

Как я должен работать с Test Driven Development, если я не вижу, как компонент, который я разрабатываю, выглядит так, как должен? (стиль css, размеры и т. д.)

Answer 1

Если вы хотите, чтобы ваш компонент был визуализирован, установите «браузер», а не используйте метод render() Enzyme. Обязательно наличие окна (см. Jsdom для подделки окна). Но ИМО, вы должны быть в состоянии сделать все ваши испытания с мелкой или монтировки, то API хорошо

Answer 2

Как я должен сделать Test Driven Development, если я не могу видеть, если компонент Я развивающийся выглядит так, как должен? (CSS стиль, размеры и т.д.)

Цель Фермент не визуальный тест регрессии, для этого вам придется использовать такие инструменты, как PhantomJS, незавершенная статья https://css-tricks.com/visual-regression-testing-with-phantomcss/

Вы можете достичь своего рода тестирования моделирования проверяя, имеет ли ваш компонент правильные селекторы при их рендеринге. например

it('should add the "selected" class when a click happend to one of the Elements',() => { 
    const wrapper = mount(<Elements />); 

    const option = wrapper.find('h5'); 
    expect(option.hasClass('selected')).to.equal(false); 
    option.simulate('click'); 
    expect(option.hasClass('selected')).to.equal(true); 
});