title: Enzyme not shallow rendering child
body: <p>I am trying to test that a child component exists by shallow-rendering it with Enzyme. However, it does not appear to be getting past the return of the component and instead shallow-renders <code>&lt;undefined /&gt;</code>.</p>
  
  <h1>MainComponentContainer.js</h1>
  
  <pre><code>import PropTypes from 'prop-types'
  import React from 'react'
  import createReactClass from 'create-react-class'
  import ImmutablePropTypes from 'react-immutable-proptypes'
  import MainComponent from './MainComponent'
  import {addSelection} from '../../actions/betslip'
  import {connect} from 'react-redux'
  
  export const MainComponentContainter = createReactClass({
    displayName: 'MainComponentCont',
    propTypes: {
      displayMode: PropTypes.string,
      other: ImmutablePropTypes.map,
      addSelection: PropTypes.func,
      prices: ImmutablePropTypes.map,
      selections: ImmutablePropTypes.map,
    },
  
    render() {
      return (
        &lt;div&gt;
          {this.props.other.valueSeq().map(this.renderMain)}
        &lt;/div&gt;
      )
    },
  
    renderMain(other) {
      const yesOutcome = other.get('markets').first().get('outcomes').first()
      const newPrice = this.props.prices.getIn([yesOutcome.get('id'), 'price'])
  
      if (newPrice) {
        return (
          &lt;MainComponent key={other.get('id')}
                      ...some other props/&gt;
        )
      }
      return null
    }
  })
  
  const mapStateToProps = () =&gt; {
    return (state) =&gt; {
      const displayMode = state.ui.get('displayMode')
      const selections = state.stp.get('selections')
      const prices = state.catalog.get('prices')
      const other = state.catalog.get('other')
  
      return {
        displayMode,
        other,
        prices,
        selections,
      }
    }
  }
  
  const mapDispatchToProps = {
    addSelection,
  }
  
  export default connect(mapStateToProps, mapDispatchToProps)(MainComponentContainer)
  </code></pre>
  
  <h1>MainComponent.js</h1>
  
  <p>This just basically returns another component to the above component.</p>
  
  <pre><code>return (
      &lt;div style={[styles.container, styles.container[displayMode]]}&gt;
        &lt;div style={[styles.logo, styles.logo[displayMode]]}&gt;
          {renderLogo(displayMode, quoteExtraLogo)}
          {displayMode === 'mobile' &amp;&amp;
            renderButton({displayMode, selected, suspended, clickHandler})}
        &lt;/div&gt;
        &lt;div style={[styles.content, styles.content[displayMode]]}&gt;
          &lt;h2 style={[styles.headline, styles.headline[displayMode]]}&gt;
            {title}
          &lt;/h2&gt;
          &lt;div style={[styles.offer, styles.offer[displayMode]]}&gt;
            &lt;div style={[styles.details, styles.details[displayMode]]}&gt;
              &lt;p style={[styles.market, styles.market[displayMode]]}&gt;
                {text}
              &lt;/p&gt;
              &lt;div&gt;
                &lt;p style={[styles.improvedOdds, styles.improvedOdds[displayMode]]}&gt;
                  &lt;span style={styles.improvedOddsAt}&gt;a&lt;/span&gt; {newPrice}
                &lt;/p&gt;
                &lt;p style={[styles.previousOdds, styles.previousOdds[displayMode]]}&gt;
                  invece di{' '}
                  &lt;span className="strikethrough"&gt;
                    {oldPrice}
                  &lt;/span&gt;
                &lt;/p&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            {displayMode === 'desktop' &amp;&amp;
              renderButton({displayMode, selected, suspended, clickHandler})}
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    )
  </code></pre>
  
  <h1>Test</h1>
  
  <pre><code>describe.only('MainComponentContainer Component', () =&gt; {
  
    beforeEach(() =&gt; {
      sandbox = sinon.sandbox.create()
      addSelectionSpy = sinon.spy()
    })
  
    afterEach(() =&gt; {
      sandbox.restore()
    })
  
    function getOutput({
      displayMode = 'mobile',
      other = mockData,
      addSelection = spy,
      prices = pricesMock,
      selections = selectionsMock,
    } = {}) {
  
      return shallow(
        &lt;MainComponentContainer
          displayMode = {displayMode}
          other = {mockData}
          addSelection = {addSelection}
          prices = {prices}
          selections = {selections}
        /&gt;
      )
    }
  
    it('should include a MainComponent component', () =&gt; {
      const pb = getOutput().find('MainComponent')
      expect(pb.length).to.equal(1)
    })
  </code></pre>
  
  <p>When doing the above test (should include a <code>MainComponent</code> component), I get the following error:</p>
  
  <blockquote>
  <pre><code> AssertionError: expected 0 to equal 1
   + expected - actual
  
   -0
   +1
  </code></pre>
  </blockquote>
  
  <p>However I have logged out <code>getOutput().debug()</code>, and it returns <code>&lt;div&gt;&lt;undefined /&gt;&lt;/div&gt;</code>.</p>