1
この構造を使用してvueコンポーネントを作成しました。ユニットテストビューコンポーネントレールアプリケーション
Vue.component('my-component', {
template: '<div>A custom component!</div>'
})
私はカルマとジャスミンまたはジャスミンレールの宝石を使用してこれをテストしたいと思います。私はどのようにコンポーネントをテストするのか分かりません。ドキュメントのすべての例では、requirejsモジュールのテスト方法を使用しています。私はコンポーネントを作成するグローバルコンポーネントの方法を使用します。
これらはドキュメントの例です。
<template>
<span>{{ message }}</span>
</template>
<script>
export default {
data() {
return {
message: 'hello!'
}
},
created() {
this.message = 'bye!'
}
}
</script>
// Import Vue and the component being tested
import Vue from 'vue'
import MyComponent from 'path/to/MyComponent.vue'
// Here are some Jasmine 2.0 tests, though you can
// use any test runner/assertion library combo you prefer
describe('MyComponent',() => {
// Inspect the raw component options
it('has a created hook',() => {
expect(typeof MyComponent.created).toBe('function')
})
// Evaluate the results of functions in
// the raw component options
it('sets the correct default data',() => {
expect(typeof MyComponent.data).toBe('function')
const defaultData = MyComponent.data()
expect(defaultData.message).toBe('hello!')
})
// Inspect the component instance on mount
it('correctly sets the message when created',() => {
const vm = new Vue(MyComponent).$mount()
expect(vm.message).toBe('bye!')
})
// Mount an instance and inspect the render output
it('renders the correct message',() => {
const Ctor = Vue.extend(MyComponent)
const vm = new Ctor().$mount()
expect(vm.$el.textContent).toBe('bye!')
})
})