title: this.props.children.map is not a function when testing react component with enzyme
body: <p>I have a React component which also makes use of its children using <code>this.props.children</code>:</p>
  
  <pre><code>import classnames from 'classnames';
  import React from 'react';
  
  export default function Toolbar(props) {
      return &lt;ul className="sulu-Toolbar"&gt;{props.children}&lt;/ul&gt;;
  }
  
  Toolbar.Item = class extends React.Component {
      constructor(props) {
          super(props);
  
          this.state = {
              open : false
          };
      }
  
      static propTypes = {
          title: React.PropTypes.string,
          isChild: React.PropTypes.bool
      };
  
      static defaultProps = {
          title: '',
          isChild: false
      };
  
      render() {
          var classNames = classnames({
              'sulu-Toolbar-Item': !this.props.isChild,
              'sulu-Toolbar-Item-Dropdown-Item': this.props.isChild
          });
  
          return &lt;li className={classNames} onClick={this.onClick}&gt;
              {this.props.title} {this.props.children ? &lt;span className="sulu-Toolbar-Item-Arrow"/&gt; : ''}
              {!!this.props.children ? this.getChildren() : ''}
          &lt;/li&gt;;
      }
  
      getChildren = () =&gt; {
          var children = null;
  
          if (!!this.state.open) {
              children = &lt;ul className="sulu-Toolbar-Item-Dropdown"&gt;
                  {
                      this.props.children.map((child) =&gt; {
                          return &lt;Toolbar.Item {...child.props} key={child.key} isChild={true}/&gt;;
                      })
                  }
              &lt;/ul&gt;;
          }
  
          return children;
      };
  
      onClick = () =&gt; {
          !!this.props.children ? this.toggleOpen() : this.props.onClick();
      };
  
      toggleOpen = () =&gt; {
          this.setState({open: !this.state.open});
      };
  };
  </code></pre>
  
  <p>This works great so far in a browser, but when I want to test it using enzyme I get a strange error. This is the test:</p>
  
  <pre><code>import {mount, shallow} from 'enzyme';
  import React from 'react';
  import test from 'tape';
  
  import Toolbar from '../src/toolbar';
  
  import './setup.js';
  
  test('Toolbar item should open and close', (t) =&gt; {
      const toolbarItem = mount(&lt;Toolbar.Item&gt;&lt;Toolbar.Item/&gt;&lt;/Toolbar.Item&gt;);
  
      t.test('Toolbar item should open', (t) =&gt; {
          t.plan(1);
          toolbarItem.find('li').simulate('click');
          t.equals(toolbarItem.find('p').length, 1);
      });
  
      t.test('Toolbar item should close', (t) =&gt; {
          t.plan(1);
          toolbarItem.find('li').simulate('click');
          t.equals(toolbarItem.find('p').length, 0);
      });
  });
  
  test('Toolbar item should execute onclick handler', (t) =&gt; {
      t.plan(1);
  
      const toolbarItem = shallow(&lt;Toolbar.Item onClick={() =&gt; {t.ok(true)}}/&gt;);
  
      toolbarItem.find('li').simulate('click');
  });
  
  test ('Toolbar item should show title', (t) =&gt; {
      t.plan(1);
  
      const toolbarItem = shallow(&lt;Toolbar.Item title="Test"/&gt;);
  
      t.ok(toolbarItem.contains('Test'));
  });
  </code></pre>
  
  <p>When I want to execute that test I get the following error message:</p>
  
  <pre><code>&gt; @ test /Users/daniel/Development/personal/react-playground
  &gt; tape -r ./test/babel-register-setup test/*-test.js
  
  TAP version 13
  # Toolbar item should open and close
  # Toolbar item should open
  /Users/daniel/Development/personal/react-playground/src/toolbar.js:54
                      _this.props.children.map(function (child) {
                                           ^
  
  TypeError: _this.props.children.map is not a function
      at _class._this.getChildren (toolbar.js:45:41)
      at _class.render (toolbar.js:35:43)
      at ReactCompositeComponentMixin._renderValidatedComponentWithoutOwnerOrContext (/Users/daniel/Development/personal/react-playground/node_modules/react/lib/ReactCompositeComponent.js:785:34)
      at ReactCompositeComponentMixin._renderValidatedComponent (/Users/daniel/Development/personal/react-playground/node_modules/react/lib/ReactCompositeComponent.js:811:32)
      at ReactCompositeComponentMixin._updateRenderedComponent (/Users/daniel/Development/personal/react-playground/node_modules/react/lib/ReactCompositeComponent.js:735:36)
      at ReactCompositeComponentMixin._performComponentUpdate (/Users/daniel/Development/personal/react-playground/node_modules/react/lib/ReactCompositeComponent.js:715:10)
      at ReactCompositeComponentMixin.updateComponent (/Users/daniel/Development/personal/react-playground/node_modules/react/lib/ReactCompositeComponent.js:634:12)
      at ReactCompositeComponentMixin.performUpdateIfNecessary (/Users/daniel/Development/personal/react-playground/node_modules/react/lib/ReactCompositeComponent.js:548:12)
      at Object.ReactReconciler.performUpdateIfNecessary (/Users/daniel/Development/personal/react-playground/node_modules/react/lib/ReactReconciler.js:165:22)
      at runBatchedUpdates (/Users/daniel/Development/personal/react-playground/node_modules/react/lib/ReactUpdates.js:151:21)
  
  npm ERR! Darwin 15.4.0
  npm ERR! argv "/usr/local/Cellar/node/6.3.1/bin/node" "/usr/local/bin/npm" "run" "test"
  npm ERR! node v6.3.1
  npm ERR! npm  v3.10.3
  npm ERR! code ELIFECYCLE
  npm ERR! @ test: `tape -r ./test/babel-register-setup test/*-test.js`
  npm ERR! Exit status 1
  npm ERR!
  npm ERR! Failed at the @ test script 'tape -r ./test/babel-register-setup test/*-test.js'.
  npm ERR! Make sure you have the latest version of node.js and npm installed.
  npm ERR! If you do, this is most likely a problem with the  package,
  npm ERR! not with npm itself.
  npm ERR! Tell the author that this fails on your system:
  npm ERR!     tape -r ./test/babel-register-setup test/*-test.js
  npm ERR! You can get information on how to open an issue for this project with:
  npm ERR!     npm bugs
  npm ERR! Or if that isn't available, you can get their info via:
  npm ERR!     npm owner ls
  npm ERR! There is likely additional logging output above.
  
  npm ERR! Please include the following file with any support request:
  npm ERR!     /Users/daniel/Development/personal/react-playground/npm-debug.log
  </code></pre>
  
  <p>I have tried to do that with <code>mount</code> and <code>shallow</code>, although I would prefer <code>shallow</code> of course. But both functions don't work as I expect. For <code>mount</code> I am also using jsdom, with the following <code>setup.js</code> script which is included in the test:</p>
  
  <pre><code>import jsdom from 'jsdom';
  
  if (typeof document === 'undefined') {
      global.document = jsdom.jsdom('&lt;html&gt;&lt;body&gt;&lt;/body&gt;&lt;/html&gt;');
      global.window = document.defaultView;
      global.navigator = window.navigator;
  }
  </code></pre>
  
  <p>And ideas what I am doing wrong?</p>
  
  <p>UPDATE:</p>
  
  <p>When I am adding a <code>console.log(this.props.children)</code> to the code I get the following structure in the test:</p>
  
  <pre><code>{ '$$typeof': Symbol(react.element),
    type:
     { [Function: _class]
       propTypes: { title: [Object], isChild: [Object] },
       defaultProps: { title: '', isChild: false } },
    key: null,
    ref: null,
    props: { title: '', isChild: false },
    _owner: null,
    _store: {} }
  </code></pre>