什麼方法渲染添加到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的樣子的好主意，那麼你可以使用上面的Enzyme Selectors來尋找特定的屬性。

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