vendredi 28 avril 2017

How to test single file Vue components

I would like to use ava for unit testing my Vue components. Right now I have a very simple setup:

package.json

{
    "name": "vue-testing",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "babel": {
        "presets": [
            "es2015"
        ]
    },
    "ava": {
        "require": [
            "babel-register",
            "./test/helpers/setup-browser-env.js"
        ]
    },
    "devDependencies": {
        "ava": "^0.18.1",
        "babel-preset-es2015": "^6.24.1",
        "babel-register": "^6.22.0",
        "browser-env": "^2.0.21"
    },
    "dependencies": {
        "vue": "^2.1.10"
    }
}

./test/helpers/setup-browser-env.js

import browserEnv from 'browser-env';

browserEnv();

./test/Notification.js

import Vue from 'vue/dist/vue.js';
import test from 'ava';
import Notification from '../src/Notification';

let vm;

test.beforeEach(t => {
    let N = Vue.extend(Notification);

    vm = new N({ propsData: {
        message: 'Foobar'
    }}).$mount();
});


test('that it renders a notification', t => {
    t.is(vm.$el.textContent, 'FOOBAR');
});

src/Notification.js

export default {
    template: '<div><h1></h1></div>',
    props: ['message'],
    computed: {
        notification() {
            return this.message.toUpperCase();
        }
    }
};

When I run ava everything works as expected: 1 passed.

I'd be more happy if I could use the following component syntax:

./src/Notification.vue

<template>
    <div>
        <h1></h1>
    </div>
</template>
<script>
     props: ['message'],

    computed: {
        notification() {
            return this.message.toUpperCase();
        }
    }
</script>

But then ava will return the following error:

> 1 | <template>
    | ^
  2 |     <div>
  3 |         <h1></h1>
  4 |     </div>

I can't figure out how to make this work, any help would be greatly appreciated!

Aucun commentaire:

Enregistrer un commentaire