title: How to target first child of selector when testing component with jest
body: <p>I'm trying to write a test to to target if a default prop is passed in the HTML correctly using <code>jest</code> and <code>vue-test-utils</code>. I can not seem to find my target selector. I want to be able to test that a particular <code>p</code> tag contains the proper text. In this case if a name prop is passed, it renders that. If not, then the default function renders the default <code>payTo</code> value.</p>
  
  <p>I've been trying several combinations of chaining to the wrapper to no avail.</p>
  
  <pre><code>console.log(wrapper.html()) // presents all the page html
  </code></pre>
  
  <pre><code>console.log(wrapper.classes()) // array showing only one class ('.row-space-between')
  </code></pre>
  
  <p>Here is my component:</p>
  
  <pre><code>&lt;template&gt;
    &lt;div class="row-space-between"&gt;
      &lt;div&gt;
        &lt;h3&gt;{{ $t('label.payTo') }}&lt;/h3&gt;
        &lt;p&gt;{{ merchantName.payTo }}&lt;/p&gt; // TARGET SELECTOR
      &lt;/div&gt;
      &lt;div class="align-right"&gt;
        &lt;h3&gt;{{ $t('label.estimatedTotal') }}&lt;/h3&gt;
        &lt;p&gt;{{ amount }}&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    name: 'PayTo',
    props: {
      'merchant-name': {
        type: Object,
        // default: {} with type obj or arr default function is required
        default: function () {
          return { merchantName: {
            payTo: 'Order Total'
           }
         }
      },
      amount: {
        type: String,
        default: ''
      }
    }
  }
  </code></pre>
  
  <p>And here is my test:</p>
  
  <pre><code>describe('PayTo.vue', () =&gt; {
    let wrapper
  
    beforeEach(() =&gt; {
      wrapper = shallowMount(PayTo, {
        mocks: {
          $t
        },
        propsData: {
          merchantName: {
            payTo: 'foo-merchant-name'
          },
          amount: '$110.00'
        }
      })
    })
    it('[positive] should render correct contents', () =&gt; {
      // PayTo.props.merchantName.default()
      expect(wrapper.html()).toMatchSnapshot()
    })
  
    // The following two tests satisfy testing the default function in PayTo.vue props validation if not tested, coverage falls to zero
  
    // This test is meaningless until I can be more specific in targeting
  
    it('[positive] should display `AWS`', () =&gt; {
      wrapper.setProps({
        merchantName: {
          payTo: 'AWS'
        }
      })
      expect(wrapper.contains('p'))
    })
  
    it('[negative] should display `Order Total`', () =&gt; {
      wrapper.setProps({
        merchantName: {
          payTo: 'Order Total'
        }
      })
      console.log(wrapper.contains('div &gt; p'))
      expect(wrapper.contains('p'))
    })
  </code></pre>