Question

我终于能够按照我想要的方式测试.vue组件，但是，为了让它工作，我有点担心我要添加的一些东西 - 任何解释都会很棒。这也是测试子组件。

使用vueify-template 1.0，我将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>

孩子看起来像这样：

<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')
  })
})

现在 - 如果有人有时间回答那么几个问题，我对Vue＆amp; ES6等如果它们显而易见就道歉！

在我能够在测试中安装组件之前，我必须执行export default Vue.extend({ .... })。这有关系吗？该应用程序似乎执行相同，所以我不确定这里发生了什么。
主要问题是我的<template>如果我没有正确命名的包装div类（例如<div class="child">）那么什么都会生成到vm中。$ el。奇怪（对我而言）如果我有完全相同的测试，但不包括<child></child>标签，那么vm.$el至少会被创建......所以我有点困惑。
这是 evil 测试的方法吗？我在与框架作斗争吗？

感谢任何和所有指针 - 我希望这对于SO来说不是太通用的问题。

测试.vue组件（Browserify，jasmine，vueify）。为什么我需要一个包装器div？

0 个答案: