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