Enzyme: Full tree rendering without a DOM

[lelandrichardson]

We could implement a renderer that was like shallow in terms of lifecycle, and never actually attached to the DOM, but unlike shallow - rendered all the way down to leaf nodes:

function B(props) {
  return (
    <div className="b">
      <div>B</div>
      {props.children}
    </div>
  );
}
function A(props) {
  return (
    <B>
      <div>A</div>
      {this.props.children}
    </B>
  );
}
const wrapper = renderFull(<A>Root</A>);
wrapper.debug();

would output:

<A>
  <B>
    <div className="b">
      <div>B</div>
      <div>A</div>
      Root
    </div>
  </B>
</A>

(with a better name than renderFull of course)

[ljharb]

Would this method call the componentWillMount and componentDidMount lifecycle methods?

[sjdemartini]

Interesting concept. What would be the primary differences between this and a mount? When would we prefer this over a mount?

[sjdemartini]

I suppose the main advantage would be that some components rendered in the tree may have behavior in componentDidMount that we don't want to execute or test (like DOM dependencies)?

[lelandrichardson]

@sjdemartini one big "advantage" over mount is that this function wouldn't require a document to be present.