什么方法渲染添加到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'});