単体テスト
Vue CLI には、すぐに使用できる Jest または Mocha を使用した単体テスト用のオプションが組み込まれています。より詳細なガイダンスとカスタム設定を提供する公式 Vue Test Utils もあります。
#目次
単純なアサーション
追加する必要はありませんテストを容易にするためのコンポーネント 特別な操作を行うには、元の設定をエクスポートするだけです:<template>
<span>{{ message }}</span>
</template>
<script>
export default {
data () {
return {
message: 'hello!'
}
},
created () {
this.message = 'bye!'
}
}
</script>次に、コンポーネントをインポートする Vue のオプションを使用して、多くの一般的なアサーションを使用できます (ここでは Jasmine/ Jest スタイル 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>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()
})
})
Vue Test Utils
Vue コンポーネントの単体テスト クックブックの記事。
