レンダリングのどのような方法がDOMに追加されますか？

Question

DOMに追加するコンポーネントまたは要素をenzymeでレンダリングするにはどうすればよいですか？

// 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'});