Какой способ рендеринга добавляет к DOM?

Question

Как визуализировать с enzyme компонент или элемент, который необходимо добавить в DOM?

// pseudocode 

let wrapper = (shallow or mount or render)(<div style={{width: '100px', height: '100px'}}></div>); 

console.log(wrapper[?].getBoundingClientRect().width); // 100? 

Answer 1

Enzyme Selectors may be what you're looking for.

Во-первых, вы можете проверить, чтобы увидеть, что делают вывод будет в первую очередь, с чем-то вроде этого:

// from your component.js module 
class Pseudocode extends React.Component { 
    render() { 
    const styles = {width: 100, height: 100} 
    return (
     <div style={styles}></div> 
    ) 
    } 
} 

// from your test.js module 
const wrapper = shallow(<Pseudocode />) 
wrapper.debug() 

(О enzyme/shallow)

.debug() должен дать вам хорошее представление о том, что будет отображаться в DOM.

Если этот вывод не дает вам представления о том, как будет выглядеть css, вы можете использовать вышеуказанные ферментные селекторы для поиска определенных атрибутов.

it('Renders the appropriate width',() => { 
    const wrapper = shallow(<Pseudocode />); 
    const width = wrapper.find('[width=100]'); 
    assert.equal(width, 100); 
}); 

Answer 2

shallow - метод фермента, который вы ищите.

Затем вы можете использовать API of shallow для проверки вывода вывода или, в частности, props.

const wrapper = shallow(<div style={{width: '100px', height: '100px'}}></div>); 
expect(wrapper.prop('style')).to.equal({width: '100px', height: '100px'});