title: React/enzyme: How to test for subcomponent?
body: <p>This is how my <em>Messenger</em> Component looks like. As you can see there is the main component and a list component. The main component is exported as default.
  With this everything is working as expected in my application.</p>
  
  <p><strong>/imports/ui/components/messenger.jsx</strong></p>
  
  <pre><code>import React, { Component } from 'react'
  import PropTypes from 'prop-types'
  import { Container, Segment, Loader, Header } from 'semantic-ui-react'
  
  class Messenger extends Component {
    static get propTypes () {
      return {
        data: PropTypes.array,
        articleId: PropTypes.string,
        isLoading: PropTypes.bool
      }
    }
  
    render () {
      const { data, articleId, isLoading } = this.props
  
      if (isLoading) { return (&lt;Loader active inverted size='massive' className='animated fadeIn' /&gt;) }
      if (articleId) { return (&lt;MessengerList data={data} articleId={articleId} /&gt;) }
  
      return (
        &lt;Container&gt;
          &lt;Segment id='' className='m-b-1'&gt;
            &lt;Header as='h1'&gt;Title&lt;/Header&gt;
            &lt;MessengerList data={data} /&gt;
          &lt;/Segment&gt;
        &lt;/Container&gt;
      )
    }
  }
  
  class MessengerList extends Component {
    /* ... */
  }
  
  export default Messenger
  </code></pre>
  
  <p>Now I would like to do some unit testing for the main component using enzyme. This is how I am doing it, but the last test is failing as <code>MessengerList</code> is not defined. So how should this be done.</p>
  
  <pre><code>import React from 'react'
  import { expect } from 'meteor/practicalmeteor:chai'
  import { shallow } from 'enzyme'
  
  import { Container, Loader } from 'semantic-ui-react'
  import Messenger from '/imports/ui/components/messenger.jsx'
  
  describe('&lt;Messenger /&gt;', () =&gt; {
    const defaultProps = {
      data: [],
      articleId: '',
      isLoading: true
    }
  
    it('should show &lt;Loader /&gt; while loading data', () =&gt; {
      const wrapper = shallow(&lt;Messenger {...defaultProps} /&gt;);
      expect(wrapper.exists()).to.be.true
      expect(wrapper.find(Loader).length).to.equal(1)
    })
    it('should show &lt;Container /&gt; data has been loaded', () =&gt; {
      defaultProps.isLoading = false
      const wrapper = shallow(&lt;Messenger {...defaultProps} /&gt;);
      expect(wrapper.find(Container).length).to.equal(1)
      expect(wrapper.find(Loader).exists()).to.be.false
    })
    it('should show &lt;MessengerList /&gt; if articleID is given', () =&gt; {
      defaultProps.articleID = 'dummy'
      defaultProps.isLoading = false
      const wrapper = shallow(&lt;Messenger {...defaultProps} /&gt;);
      expect(wrapper.find(MessengerList).length).to.equal(1)
      expect(wrapper.find(Loader).exists()).to.be.false
    })
  })
  </code></pre>
  
  <p>I do not want to change <code>export default Messenger</code></p>