• 简单的断言

    简单的断言

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

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