简单的断言

你不必为了可测性在组件中做任何特殊的操作，导出原始设置就可以了：

  1. <template>
  2.   <span>{{ message }}</span>
  3. </template>
  5. <script>
  6.   export default {
  7.     data () {
  8.       return {
  9.         message: 'hello!'
  10.       }
  11.     },
  12.     created () {
  13.       this.message = 'bye!'
  14.     }
  15.   }
  16. </script>

然后随着 Vue 导入组件的选项，你可以使用许多常见的断言 (这里我们使用的是 Jasmine/Jest 风格的 expect 断言作为示例)：

  1. // 导入 Vue.js 和组件，进行测试
  2. import Vue from 'vue'
  3. import MyComponent from 'path/to/MyComponent.vue'
  5. // 这里是一些 Jasmine 2.0 的测试，你也可以使用你喜欢的任何断言库或测试工具。
  7. describe('MyComponent', () => {
  8.   // 检查原始组件选项
  9.   it('has a created hook', () => {
  10.     expect(typeof MyComponent.created).toBe('function')
  11.   })
  13.   // 评估原始组件选项中的函数的结果
  14.   it('sets the correct default data', () => {
  15.     expect(typeof MyComponent.data).toBe('function')
  16.     const defaultData = MyComponent.data()
  17.     expect(defaultData.message).toBe('hello!')
  18.   })
  20.   // 检查 mount 中的组件实例
  21.   it('correctly sets the message when created', () => {
  22.     const vm = new Vue(MyComponent).$mount()
  23.     expect(vm.message).toBe('bye!')
  24.   })
  26.   // 创建一个实例并检查渲染输出
  27.   it('renders the correct message', () => {
  28.     const Constructor = Vue.extend(MyComponent)
  29.     const vm = new Constructor().$mount()
  30.     expect(vm.$el.textContent).toBe('bye!')
  31.   })
  32. })