Vue.js 测试.vue组件（Browserify、jasmine、vueify）。为什么我需要一个包装袋？

我终于能够以我想要的方式测试.vue组件了，但是，为了让它工作，我不得不添加一些东西，这让我有点困惑——任何解释都会很好。这也是在测试子组件

使用，我将Hello.vue更改为

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <child></child>
  </div>
</template>

<script>
import Vue from 'vue'
import Child from './Child.vue'

export default Vue.extend({
  data () {
    return {
      msg: 'Hello World!'
    }
  },

  components: {
    Child
  }
})
</script>

现在-如果有人有时间回答一些问题，我对Vue&ES6等都是新手。如果问题明显，请道歉

在我能够在测试中装载组件之前，我必须执行导出默认Vue.extend（{….}）。这有关系吗？该应用程序的性能似乎完全相同，所以我不确定这里到底发生了什么

主要的问题是，在我的

中，如果没有正确命名的包装器div类（例如

），那么将不会在vm中生成任何内容。$el。奇怪的是（对我来说）如果我有完全相同的测试，但不包括

标记，那么

vm.$el

至少会被创建。。。所以我有点困惑

这是一种邪恶的测试方式吗？我在与框架抗争吗

谢谢你的指点——我希望这不是一个太普通的问题

<template>
  <div class="child">
    Child Content
  </div>
</template>

<script>
import Vue from 'vue'

export default Vue.extend({

})
</script>

import Vue from 'vue'
import Hello from '../../src/components/Hello.vue'

describe('Hello.vue', () => {
  it('should render correct contents into el', () => {
    var mount = document.createElement('div');
    const vm = new Hello({
      el: mount,
    });
    expect(vm.$el.querySelector('.hello h1').textContent).toBe('Hello World!')
    expect(vm.$el.querySelector('.hello .child').textContent.trim()).toBe('Child Content')
  })
})