什么渲染方法添加到 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 to check the render output or specifically the props。

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

什么渲染方法添加到 DOM？

What method of render adds to the DOM?

unit-testing

reactjs

enzyme