What method of render adds to the DOM?

Question

How to render with enzyme a component or element to be added into the 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.

First, you can test to see what the render output will be in the first place, with something like this:

// 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()

(About enzyme/shallow)

The .debug() should give you a good idea of what will get rendered to the DOM.

If this output, though, isn't giving you a good idea of what the css will look like, then you can use the above Enzyme Selectors to look for specific attributes.

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

Answer 2

shallow is the method of enzyme you are looking for.

You can then use the 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'});