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 war N]：フィルタを解決するために失敗しました：私は新しいVueのアプリを初期化する前にフィルタを登録する
main.jsを変更する場合生かす（コンポーネントで見つかった<アプリ>）
は、それは問題なく動作します。
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 }
})
1つの理由とそれ以外の理由はありますか？
質問2：私は必要、通過する上記試験について
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.')
})
})
：
<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：その上の例ではVue.filter(...作品、IはWorld.vueコンポーネントのテストを追加しましたfilter capitalizeの定義をVue.filter(...に含めると、テストが失敗します。だから私の質問は、どのようにフィルタ/コンポーネントを構造化し、それらを初期化するので、テストは簡単ですか？
ユニットテストでフィルタを登録する必要はありません。コンポーネントの初期化の一部でなければなりません。しかし、コンポーネントがメインアプリケーションから定義されたフィルタを継承/使用している場合、テストコンポーネントは動作しません。
提案、コメント、読書資料はありますか？