如何测试单文件 Vue 组件
How to test single file Vue components
我想使用 ava
对我的 Vue
组件进行单元测试。现在我有一个非常简单的设置:
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>{{ notification }}</h1></div>',
props: ['message'],
computed: {
notification() {
return this.message.toUpperCase();
}
}
};
当我 运行 ava
一切正常时:1 passed
.
如果我可以使用以下组件语法,我会更高兴:
./src/Notification.vue
<template>
<div>
<h1>{{ notification }}</h1>
</div>
</template>
<script>
export default {
props: ['message'],
computed: {
notification() {
return this.message.toUpperCase();
}
}
}
</script>
但是ava
会return出现以下错误:
> 1 | <template>
| ^
2 | <div>
3 | <h1>{{ notification }}</h1>
4 | </div>
我不知道如何进行这项工作,任何帮助将不胜感激!
你快到了:
<template>
<div>
<h1>{{ notification }}</h1>
</div>
</template>
<script>
export default {
props: ['message'],
computed: {
notification() {
return this.message.toUpperCase();
}
}
}
</script>
我做的是,当开始一个新文件时,我通常使用这个模板
<template>
</template>
<script>
export default {
}
</script>
<style>
</style>
然后开始写代码
这里有更多信息:https://vuejs.org/v2/guide/single-file-components.html
问题
您需要先将 .vue 文件编译成 JavaScript,然后再 运行 编译它们。
解决方案
您可以 运行 模块上的 vue-loader 使用 vue-node.
运行 npm install --save-dev vue-node
,将 vue-node 添加到您的项目
在您的 /helpers 目录中,创建一个 setup.js 文件
添加以下内容:
const hook = require('vue-node');
const { join } = require('path');
// Pass an absolute path to your webpack configuration to the hook function.
hook(join(__dirname, './path/to/webpack.config.js'));
其中 ./path/to/webpack.config.js
是相对于您的项目的带有 vue-loader
的 webpack 配置的路径。
在package.json中添加
"ava": {
"require": [
"./test/helpers/setup.js"
]
},
作为 属性.
您可以在此处查看工作示例存储库 - https://github.com/eddyerburgh/avoriaz-ava-example
备选方案
This thread 展示了几种使用 ava 进行测试的方法。
你可以试试汽油 https://github.com/MGMonge/petrol
然后做类似的事情
import Notification from "../src/Notification.vue";
import VueTestCase from "petrol/core/VueTestCase.js";
export default class NotificationTest extends VueTestCase {
beforeEach() {
this.SUT = this.mount(Notification, {message: 'soMe MeSSagE'});
}
/** @test */
it_converts_message_to_upper_case() {
this.assertEquals('SOME MESSAGE', this.SUT.notification);
}
}
我想使用 ava
对我的 Vue
组件进行单元测试。现在我有一个非常简单的设置:
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>{{ notification }}</h1></div>',
props: ['message'],
computed: {
notification() {
return this.message.toUpperCase();
}
}
};
当我 运行 ava
一切正常时:1 passed
.
如果我可以使用以下组件语法,我会更高兴:
./src/Notification.vue
<template>
<div>
<h1>{{ notification }}</h1>
</div>
</template>
<script>
export default {
props: ['message'],
computed: {
notification() {
return this.message.toUpperCase();
}
}
}
</script>
但是ava
会return出现以下错误:
> 1 | <template>
| ^
2 | <div>
3 | <h1>{{ notification }}</h1>
4 | </div>
我不知道如何进行这项工作,任何帮助将不胜感激!
你快到了:
<template>
<div>
<h1>{{ notification }}</h1>
</div>
</template>
<script>
export default {
props: ['message'],
computed: {
notification() {
return this.message.toUpperCase();
}
}
}
</script>
我做的是,当开始一个新文件时,我通常使用这个模板
<template>
</template>
<script>
export default {
}
</script>
<style>
</style>
然后开始写代码
这里有更多信息:https://vuejs.org/v2/guide/single-file-components.html
问题
您需要先将 .vue 文件编译成 JavaScript,然后再 运行 编译它们。
解决方案
您可以 运行 模块上的 vue-loader 使用 vue-node.
运行 npm install --save-dev vue-node
,将 vue-node 添加到您的项目
在您的 /helpers 目录中,创建一个 setup.js 文件
添加以下内容:
const hook = require('vue-node');
const { join } = require('path');
// Pass an absolute path to your webpack configuration to the hook function.
hook(join(__dirname, './path/to/webpack.config.js'));
其中 ./path/to/webpack.config.js
是相对于您的项目的带有 vue-loader
的 webpack 配置的路径。
在package.json中添加
"ava": {
"require": [
"./test/helpers/setup.js"
]
},
作为 属性.
您可以在此处查看工作示例存储库 - https://github.com/eddyerburgh/avoriaz-ava-example
备选方案
This thread 展示了几种使用 ava 进行测试的方法。
你可以试试汽油 https://github.com/MGMonge/petrol
然后做类似的事情
import Notification from "../src/Notification.vue";
import VueTestCase from "petrol/core/VueTestCase.js";
export default class NotificationTest extends VueTestCase {
beforeEach() {
this.SUT = this.mount(Notification, {message: 'soMe MeSSagE'});
}
/** @test */
it_converts_message_to_upper_case() {
this.assertEquals('SOME MESSAGE', this.SUT.notification);
}
}