Error when Component render function returns different type of root element

[mocheng]

I found this issue when unit testing a server-side-only like component. To make it simple, below code snippet demo the problem.

    class DummyComponent extends React.Component {
      constructor() {
        super(...arguments);

        this.state = {
          ready: false
        };
      }

      componentDidMount() {
        this.setState({ready: true});
      }

      render() {
         // first render returns <div/>;
         // re-render after mount will return <span/>
         return this.state.ready ? <span/> : <div/>;
      }
    }

    const wrapper = mount(<DummyComponent />);

The mount method report error like this.

Invariant Violation: dangerouslyReplaceNodeWithMarkup(...): Cannot render markup in a worker thread. Make sure `window` and `document` are available globally before requiring React when unit testing or use ReactDOMServer.renderToString() for server rendering.

Though the error message reads lacking of window and document. It is not the root cause. I have jsdom-global set up.

If the render function changes to return same type on re-render. The unit testing works fine.

      render() {
        return this.state.ready ? <div>hello</div> : <div>world</div>;
      }

It should be valid for one component to return different type of root element in re-render. I tried in in live app and it works. So, there must be something different in mount.

[mocheng]

It turns out not a issue of enzyme, but chai-enzyme enzymejs/chai-enzyme#158