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!')
})
})