title: Vue.js - Unit testing component with complex children
body: <p>Let's assume a basic <a href="https://getbootstrap.com/" rel="nofollow noreferrer">Bootstrap</a> driven HTML form as part of a custom Vue component <code>MyForm.vue</code></p>
  
  <pre><code>&lt;template&gt;
    &lt;form&gt;
      &lt;div class="form-group"&gt;
        &lt;label for="email"&gt;Email address&lt;/label&gt;
        &lt;input type="email" class="form-control" id="email"&gt;
      &lt;/div&gt;
      &lt;button type="submit" class="btn btn-primary"&gt;Submit&lt;/button&gt;
    &lt;/form&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p>A unit test for testing if the template is rendered successfully is pretty simple</p>
  
  <pre><code>describe('MyForm', () =&gt; {
  
    let wrapper;
  
    beforeEach(...);
  
    it('Should be rendered', () =&gt; {
  
      let field = wrapper.find('#email');
      expect(field.element.value).toEqual('');
    });
  });
  </code></pre>
  
  <p>This line works <code>field.element.value</code> works because <code>field.element</code> is of native type <code>HtmlInputElement</code> with <code>value</code> attribute.</p>
  
  <p>What if I want access an attribute of a complex component let's say of <a href="https://bootstrap-vue.js.org/docs/components/form-input" rel="nofollow noreferrer">b-form-input</a>, the Bootstrap-Vue's default input element? <code>b-form-input</code> is of type <code>BFormInput</code> how to deal with it? Just cast the <code>HtmlElement</code> to <code>BFormInput</code>?</p>
  
  <pre><code>&lt;template&gt;
    &lt;b-form&gt;
      &lt;b-form-group label="Email"&gt;
        &lt;b-form-input type="email" id="email"&gt;&lt;/b-form-input&gt;
      &lt;/b-form-group&gt;
      &lt;b-button type="submit" variant="primary"&gt;Submit&lt;/button&gt;
    &lt;/b-form&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p>How to test non-native components? Specially with type-safety means TypeScript. Any ideas?</p>
  
  <p><strong>Edit 03/01/2020</strong></p>
  
  <p>Following up to <a href="https://stackoverflow.com/users/2316540/muka-gergely">muka.gergely</a>'s answer I found <a href="https://medium.com/js-dojo/when-to-unstub-a-component-in-a-vue-js-unit-test-608c7d1c646" rel="nofollow noreferrer">this</a> article. <code>shallowMount</code> is stubbing all child components by default which prevents also event handling. Moreover <code>shallowMount</code> allows to manually <em>unstub</em> components, in my case to unstub <code>b-form</code> and <code>b-button</code> for submit event testing.</p>
  
  <pre><code>const stubs = { // Originally intended to provide custom stubs, here used to unstub components
    BButton,
    BForm,
  };
  
  wrapper = shallowMount&lt;MyComponent&gt;(MyComponent, {stubs});
  </code></pre>
  
  <p>This effects that these components are rendered instead of stubbed. All remaining components like the <code>b-form-input</code> are still automatically stubbed.</p>