title: Karma/Jasmine/Vue/Sinon unit tests - mock a Vue child component?
body: <p>I would like to test my Parent component independently of its Child components:</p>
  
  <p><strong>Parent.vue</strong></p>
  
  <pre><code>&lt;template&gt;&lt;div&gt;
      Hello World
      &lt;child&gt;&lt;/child&gt;
  &lt;/div&gt;&lt;/template&gt;
  
  &lt;script&gt;
      import Child from './Child.vue'
  
      export default {
          components: {Child}
      }
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>Child.vue</strong></p>
  
  <pre><code>&lt;template&gt;&lt;div&gt;Child&lt;/div&gt;&lt;/template&gt;
  
  &lt;script&gt;
      export default {}
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>parent.spec.js</strong></p>
  
  <pre><code>import Vue from 'vue'
  import Parent from '../components/Parent.vue'
  
  describe('Parent', () =&gt; {
  
      it('should show mocked child', function () {
          const Child = {
              template: '&lt;div&gt;Mocked&lt;/div&gt;'
          }
  
          const vm = new Vue({
              template: '&lt;parent&gt;&lt;/parent&gt;',
              components: {Parent, Child},
          }).$mount();
  
          expect(vm.$el.textContent).not.toContain('Child')
          expect(vm.$el.textContent).toContain('Mocked')
      });
  });
  </code></pre>
  
  <p><strong>Failing result</strong></p>
  
  <pre><code>PhantomJS 2.1.1 (Mac OS X 0.0.0) Parent should show mocked child FAILED
      Expected '
          Hello World
          Child' not to contain 'Child'.
      webpack:///resources/assets/js/tests/parent.spec.js:16:49 &lt;- tests/parent.spec.js:9880:49
      Expected '
          Hello World
          Child' to contain 'Mocked'.
      webpack:///resources/assets/js/tests/parent.spec.js:17:45 &lt;- tests/parent.spec.js:9881:45
  </code></pre>