1
我已經使用此結構創建了vue組件。單元測試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!')
})
})