ujian unit
Vue CLI mempunyai pilihan terbina dalam untuk ujian unit dengan Jest atau Mocha di luar kotak. Kami juga mempunyai Vue Test Utils rasmi untuk memberikan panduan yang lebih terperinci dan tetapan tersuai.
Bable of Contents
Penegasan mudah Anda tidak perlu melakukan sesuatu yang istimewa dalam komponen anda untuk kebolehujian, cuma eksport tetapan asal: <template>
<span>{{ message }}</span>
</template>
<script>
export default {
data () {
return {
message: 'hello!'
}
},
created () {
this.message = 'bye!'
}
}
</script> Kemudian dengan pilihan Vue mengimport komponen, anda boleh menggunakan banyak pernyataan biasa (Di sini kami menggunakan pernyataan expect gaya Jasmine/Jest sebagai contoh):
// 导入 Vue.js 和组件，进行测试
import Vue from 'vue'
import MyComponent from 'path/to/MyComponent.vue'
// 这里是一些 Jasmine 2.0 的测试，你也可以使用你喜欢的任何断言库或测试工具。
describe('MyComponent', () => {
// 检查原始组件选项
it('has a created hook', () => {
expect(typeof MyComponent.created).toBe('function')
})
// 评估原始组件选项中的函数的结果
it('sets the correct default data', () => {
expect(typeof MyComponent.data).toBe('function')
const defaultData = MyComponent.data()
expect(defaultData.message).toBe('hello!')
})
// 检查 mount 中的组件实例
it('correctly sets the message when created', () => {
const vm = new Vue(MyComponent).$mount()
expect(vm.message).toBe('bye!')
})
// 创建一个实例并检查渲染输出
it('renders the correct message', () => {
const Constructor = Vue.extend(MyComponent)
const vm = new Constructor().$mount()
expect(vm.$el.textContent).toBe('bye!')
})
})Tulis komponen yang boleh diujiexpect 断言作为示例)：
<template>
<p>{{ msg }}</p>
</template>
<script>
export default {
props: ['msg']
}
</script>编写可被测试的组件
很多组件的渲染输出由它的 props 决定。事实上，如果一个组件的渲染输出完全取决于它的 props，那么它会让测试变得简单，就好像断言不同参数的纯函数的返回值。看下面这个例子：
import Vue from 'vue'
import MyComponent from './MyComponent.vue'
// 挂载元素并返回已渲染的文本的工具函数
function getRenderedText (Component, propsData) {
const Constructor = Vue.extend(Component)
const vm = new Constructor({ propsData: propsData }).$mount()
return vm.$el.textContent
}
describe('MyComponent', () => {
it('renders correctly with different props', () => {
expect(getRenderedText(MyComponent, {
msg: 'Hello'
})).toBe('Hello')
expect(getRenderedText(MyComponent, {
msg: 'Bye'
})).toBe('Bye')
})
})你可以在不同的 props 中，通过 propsData 选项断言它的渲染输出：
// 在状态更新后检查生成的 HTML
it('updates the rendered message when vm.message updates', done => {
const vm = new Vue(MyComponent).$mount()
vm.message = 'foo'
// 在状态改变后和断言 DOM 更新前等待一刻
Vue.nextTick(() => {
expect(vm.$el.textContent).toBe('foo')
done()
})
})断言异步更新
由于 Vue 进行 异步更新 DOM 的情况，一些依赖 DOM 更新结果的断言必须在 Vue.nextTick
Keluaran pemaparan banyak komponen ditentukan oleh propnya. Malah, jika output yang diberikan komponen bergantung sepenuhnya pada propnya, ia menjadikan ujian semudah menegaskan nilai pulangan fungsi tulen dengan parameter yang berbeza. Lihat contoh berikut: rrreeeAnda boleh menegaskan output pemaparannya dalam prop yang berbeza melalui pilihan propsData:
