[英]How to test single file Vue components
我想使用ava
对我的Vue
组件进行单元测试。 现在我有一个非常简单的设置:
包.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
将返回以下错误:
> 1 | <template>
| ^
2 | <div>
3 | <h1>{{ notification }}</h1>
4 | </div>
我不知道如何使这项工作,任何帮助将不胜感激!
问题
您需要在运行之前将 .vue 文件编译成 JavaScript。
解决方案
您可以使用vue-node在需要时在模块上运行 vue-loader。
运行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"
]
},
作为财产。
你可以在这里看到一个工作示例 repo - https://github.com/eddyerburgh/avoriaz-ava-example
备择方案
该线程展示了几种使用 ava 进行测试的方法。
你快到了:
<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 ://v2.vuejs.org/v2/guide/single-file-components.html
您可以尝试使用汽油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);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.