Test de l'unité
Vue CLI propose des options intégrées pour les tests unitaires avec Jest ou Mocha prêts à l'emploi. Nous disposons également de Vue Test Utils officiels pour fournir des conseils plus détaillés et des paramètres personnalisés.
Table des matières
Assertions simples
Vous n'avez rien à faire de spécial dans votre composant pour la testabilité, exportez simplement les paramètres d'origine :
<template>
<span>{{ message }}</span>
</template>
<script>
export default {
data () {
return {
message: 'hello!'
}
},
created () {
this.message = 'bye!'
}
}
</script> Ensuite, avec l'option d'importation du composant par Vue, vous pouvez utiliser de nombreuses assertions courantes (Ici, nous utilisons les assertions expect de style Jasmine/Jest comme exemple) : expect 断言作为示例)：
// 导入 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!')
})
})编写可被测试的组件
很多组件的渲染输出由它的 props 决定。事实上，如果一个组件的渲染输出完全取决于它的 props，那么它会让测试变得简单，就好像断言不同参数的纯函数的返回值。看下面这个例子：
<template>
<p>{{ msg }}</p>
</template>
<script>
export default {
props: ['msg']
}
</script>你可以在不同的 props 中，通过 propsData 选项断言它的渲染输出：
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')
})
})断言异步更新
由于 Vue 进行 异步更新 DOM 的情况，一些依赖 DOM 更新结果的断言必须在 Vue.nextTick
// 在状态更新后检查生成的 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()
})
})Écrire des composants qui peuvent être testés
Le résultat du rendu de nombreux composants est déterminé par ses accessoires. En fait, si le résultat rendu d'un composant dépend entièrement de ses accessoires, cela rend les tests aussi simples que l'affirmation de la valeur de retour d'une fonction pure avec différents paramètres. Regardez l'exemple suivant :
propsData : 🎜rrreee🎜🎜🎜
