1
我用vue-cli創建示例項目vue init webpack my-test3，並選擇包括e2e和單元測試。Vue.js過濾器和測試
問題1：基於文檔template filters我嘗試新的過濾器main.js添加爲這樣：
import Vue from 'vue'
import App from './App'
/* eslint-disable no-new */
new Vue({
el: '#app',
template: '<App/>',
components: { App },
filters: {
capitalize: function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
})
而且我App.vue：
<template>
<div id="app">
<img src="./assets/logo.png">
<hello></hello>
<world></world>
<div class="test-test">{{ 'tesT' | capitalize }}</div>
</div>
</template>
<script>
import Hello from './components/Hello'
import World from './components/World'
export default {
name: 'app',
components: {
Hello,
World
}
}
</script>
我得到警告（錯誤）：
[Vue戰爭N]：無法解析過濾器：利用（在組件中發現<應用>）
如果我修改main.js初始化新的Vue應用前，註冊過濾器，那麼它的工作原理沒有問題。
import Vue from 'vue'
import App from './App'
Vue.filter('capitalize', function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
})
/* eslint-disable no-new */
new Vue({
el: '#app',
template: '<App/>',
components: { App }
})
爲什麼一個人和其他人不工作？
問題2：隨着上面的例子，工程Vue.filter(...，我添加爲World.vue成分的測試：
<template>
<div class="world">
<h1>{{ msg | capitalize }}</h1>
<h2>{{ desc }}</h2>
Items (<span>{{ items.length }}</span>)
<ul v-for="item in items">
<li>{{ item }}</li>
</ul>
</div>
</template>
<script>
export default {
name: 'world',
data() {
return {
msg: 'worldly App',
desc: 'This is world description.',
items: [ 'Mon', 'Wed', 'Fri', 'Sun' ]
}
}
}
</script>
而且World.spec.js：
import Vue from 'vue'
import World from 'src/components/World'
Vue.filter('capitalize', function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
})
describe('World.vue',() => {
it('should render correct title',() => {
const vm = new Vue({
el: document.createElement('div'),
render: (h) => h(World)
})
expect(vm.$el.querySelector('.world h1').textContent)
.to.equal('Worldly App')
})
it('should render correct description',() => {
const vm = new Vue({
el: document.createElement('div'),
render: (w) => w(World)
})
expect(vm.$el.querySelector('.world h2').textContent)
.to.equal('This is world description.')
})
})
對於上述測試通過，我需要包括Vue.filter(...過濾器大寫的定義，否則測試將失敗。所以我的問題是，如何構造過濾器/組件並初始化它們，因此測試更容易？
我覺得我不應該在單元測試中註冊過濾器，這應該是組件初始化的一部分。但是，如果組件是繼承/使用從主應用程序定義的過濾器，測試組件將無法正常工作。
任何建議，意見，閱讀材料？