Unit Test Vue Component Rails App - ruby-on-rails

Question

I have created vue components using this structure.
Vue.component('my-component', {
template: '<div>A custom component!</div>'
})
I would like to test this using karma and jasmine or jasmine rails gem. I can't figure out how to test the component. In all the examples on the docs they use a requirejs module way of testing. I use the global component way of creating components.
These are the examples from the docs.
<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!')
})
})

Answer 1

import foo from 'bar'; and var foo = require('bar'); does the same thing, making foo available as a variable in the current file. In the test example, MyComponent is the imported vue component instance, which can also be achieved with MyComponent = Vue.component(...); in the current file. So if your test is in the same file, just use the MyComponent variable, if not, you'll need to export MyComponent first with module.exports = MyComponent or export default MyComponent. These exports assume MyComponent is the only thing you want to export, if you want to export multiple variables, checkout the docs: http://wiki.commonjs.org/wiki/Modules/1.1 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/export