title: How to test if a React component contains another component with Tape and Enzyme?
body: <p>Suppose I have the following <a href="https://facebook.github.io/react/index.html" rel="noreferrer">React</a> component:</p>
  
  <pre><code>import React from 'react'
  import AppBar from 'material-ui/lib/app-bar'
  
  class NavBar extends React.Component {
    render () {
      return (
        &lt;div&gt;
          &lt;AppBar
            title='My NavBar Title'
          /&gt;
        &lt;/div&gt;
      )
    }
  }
  
  export default NavBar
  </code></pre>
  
  <p>And I want to set up a test to make sure the user sees a <a href="http://www.material-ui.com/#/components/app-bar" rel="noreferrer">material-ui AppBar</a> when the <code>NavBar</code> is rendered, using <a href="https://github.com/substack/tape" rel="noreferrer">Tape</a> and <a href="http://airbnb.io/enzyme/index.html" rel="noreferrer">Enzyme</a> for that:</p>
  
  <pre><code>import NavBar from './NavBar'
  import React from 'react'
  import test from 'tape'
  // import { I don't know exactly what to import here. Maybe `shallow`? } from 'enzyme'
  
  test('NavBar component test', (assert) =&gt; {
    test('I should see an AppBar', (assert) =&gt; {
      // How can I test for it?
      // Also, can I test only for the presence of `AppBar`, without
      // necessarily for the overriding of props? For example,
      // even if I actually have &lt;AppBar title='My NavBar title' /&gt;,
      // can I test only for `AppBar`?
      assert.end()
    })
    assert.end()
  })
  </code></pre>
  
  <p>How can I do it properly?</p>