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

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!

via user687554