OlmerDale OlmerDale -4 years ago 153
React JSX Question

What method of render adds to the DOM?

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 Source

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

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);
});
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download