jasmine + karma for vue test

README

In order to run tests:

$ npm install -g karma-cli
$ npm install -g phantomjs

then to start test watcher:

$ karma start

Alert.vue

<style>
    .Alert {
        padding: 2em;
    }
    .Alert-Success {
        border: 10px solid green;
    }
    .Alert-Error {
        border: 10px solid red;
    }
</style>

<template>
    <div class="Alert"
        v-bind:class="{
            'Alert-Success': type == 'success',
            'Alert-Error': type == 'error',
        }"
        v-show="show">
        <p>
            {{ msg }}
        </p>
    </div>
</template>

<script>
export default {

    data() {
        return {
            show: true
        }
    },
    props: ['msg', 'type'],
    ready() {
    }
}
</script>

AlertSpec.js

describe("Alert component", function() {

    var c = require('./../../../resources/assets/js/components/Alert.vue');

    it('should have data', function () {
        expect(typeof c.data).toBe('function');
    });

    it('should be visible', function () {
        var defaultData = c.data();
        expect(defaultData.show).toBe(true);
    });

});

karma.conf.js

// Karma configuration
// Generated on Fri Nov 20 2015 18:27:44 GMT+0100 (CET)

module.exports = function (config) {
    config.set({

        // base path that will be used to resolve all patterns (eg. files, exclude)
        basePath: '',


        // frameworks to use
        // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
        frameworks: [
            'browserify',
            'jasmine'
        ],


        // list of files / patterns to load in the browser
        files: [
            'tests/js/**/*Spec.js'
        ],


        // list of files to exclude
        exclude: [],


        // preprocess matching files before serving them to the browser
        // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
        preprocessors: {
            'tests/**/*.js': ['browserify']
        },

        browserify: {
            debug: true, // debug=true to generate source maps
            transform: [ 'vueify' ]
        },

        // test results reporter to use
        // possible values: 'dots', 'progress'
        // available reporters: https://npmjs.org/browse/keyword/karma-reporter
        reporters: ['progress'],


        // web server port
        port: 9876,


        // enable / disable colors in the output (reporters and logs)
        colors: true,


        // level of logging
        // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
        logLevel: config.LOG_INFO,


        // enable / disable watching file and executing tests whenever any file changes
        autoWatch: true,


        // start these browsers
        // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
        browsers: [
            'PhantomJS',
            'Chrome'
        ],


        // Continuous Integration mode
        // if true, Karma captures browsers, runs the tests and exits
        singleRun: false,

        // Concurrency level
        // how many browsers should be started simultaneously
        concurrency: Infinity
    })
}

package.json

{
    "private": true,
    "dependencies": {
        "babel-runtime": "^5.8",
        "laravel-elixir": "^3.0",
        "vue": "^1.0",
        "vue-hot-reload-api": "^1.2",
        "vue-i18n": "^2.2",
        "vue-resource": "^0.1",
        "vue-router": "^0.7",
        "vueify-insert-css": "^1.0"
    },
    "devDependencies": {
        "gulp": "^3.9",
        "jasmine": "^2.3",
        "karma": "^0.13",
        "karma-browserify": "^4.4",
        "karma-chrome-launcher": "^0.2",
        "karma-jasmine": "^0.3",
        "karma-phantomjs-launcher": "^0.2",
        "phantomjs": "^1.9"
    }
}

Writing this for anyone in the future who is running into problems following these directions. Not sure if this was just a personal problem of mine, but after setting this up I was getting errors like

17 07 2016 00:40:44.501:ERROR [framework.browserify]: bundle error

./../../../tests/js/site/Validator.spec.js:1
import Validator from './mixins/Validator.js'
^
ParseError: 'import' and 'export' may appear only with 'sourceType: module'

What eventually ended up working for me was making my browserify setup in karma.conf.js look like the following:

browserify: {
    debug: true, // debug=true to generate source maps
    transform: [ ['babelify', {presets: ["es2015"]}], 'vueify' ],
},

And of course you have to add the following into your package.json:

"babelify": "^7.3.0",

Thanks for this. Was a great help.

So wish I would have found this before I banged away at the keyboard for two hours. Thanks for the work.

Thanks for your guide.