Vue.js - "SyntaxError: Unexpected token <" when testing component

Question

I am trying to create a component with Vue.js. My component is currently defined like this:

MyComponent.vue

<template id="my-template">
    <div>
        <button class="btn" v-on:click="increment">increment</button>
    </div>
</template>

<script type="text/javascript">
    Vue.component('incrementer', {
        template: '#my-template',
        props: {
            i: {
                type: Number,
                default: 1,
            }
        },

        data: function() {
            return {
                count: 0
            }
        },

        methods: {
            increment: function() {
              this.count = this.count + this.i;
            }
        }
    });
</script>

I am trying to create some automated tests for this component. In an attempt to do this, I have the following:

my-component.spec.js

const MyComponent = require('../src/MyComponent.vue');

describe('my-component', function() {
    // Inspect the raw component options
    it('has a created hook', () => {
        expect(typeof MyComponent .created).toBe('function')
    });
});

I am trying to run this test via Jasmine through Gulp. In Gulp, my test task looks like this:

gulpfile.js

gulp.task('test', ['build'], function() {
    return gulp.src(['test/**/*spec.js'])
        .pipe(jasmine({
            timeout: 10000,
            includeStackTrace: false,
            color: false
         }))
    ;
});

When this task gets executed, I receive the following error:

(function (exports, require, module, __filename, __dirname) { <template id="my-template">
                                                              ^
SyntaxError: Unexpected token <

I don't understand why I'm receiving this error. What do I need to do to test a component in Vue.js via Jasmine?

Thank you!

Answer 1

According to Vue Docs :

In terms of code structure for testing, you don't have to do anything special in your components to make them testable. Just export the raw options

When you test that component, all you have to do is import the object along with Vue to make many common assertions

So in you MyComponent.vue file:

<template>
<div>
    <button class="btn" v-on:click="increment">increment</button>
</div>
</template>

<script type="text/javascript">
export default {
    props: {
        i: {
            type: Number,
            default: 1,
        }
    },

    data: function() {
        return {
            count: 0
        }
    },

    methods: {
        increment: function() {
          this.count = this.count + this.i;
        }
    }
}
</script>

Then in your my-component.spec.js :

const Vue = reuqire("vue")
const MyComponent = require('../src/MyComponent.vue');

describe('my-component', function() {
    // Inspect the raw component options
    it('has a created hook', () => {
        expect(typeof MyComponent.created).toBe('function')
    });
});