Vue.js滤波器及测试
我使用vue-cli创建示例项目vue init webpack my-test3，并选择包括e2e和单元测试。
问题1:基于模板过滤器文档的尝试在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警告:未能解析过滤器:大写(在组件中找到)
如果我在初始化新的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 }
})为什么一个工作，而另一个不工作？
问题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(...定义，否则测试将失败。所以我的问题是，如何构造过滤器/组件并初始化它们，这样测试就更容易了？
我觉得我不应该在单元测试中注册过滤器，这应该是组件初始化的一部分。但是，如果组件正在继承/使用从主应用程序中定义的过滤器，则测试组件将无法工作。
有什么建议，评论，阅读材料吗？
回答 2
Stack Overflow用户
发布于 2019-07-13 23:18:02
一个好的做法是创建一个filters文件夹，并在这个文件夹中的单个文件中定义您的过滤器，如果您想在所有组件中访问它们，请在全局范围内定义所有过滤器，例如：
// capitalize.js
export default function capitalize(value) {
if (!value) return '';
value = value.toString().toLowerCase();
value = /\.\s/.test(value) ? value.split('. ') : [value];
value.forEach((part, index) => {
let firstLetter = 0;
part = part.trim();
firstLetter = part.split('').findIndex(letter => /[a-zA-Z]/.test(letter));
value[index] = part.split('');
value[index][firstLetter] = value[index][firstLetter].toUpperCase();
value[index] = value[index].join('');
});
return value.join('. ').trim();
}要成功地测试它，如果使用@vue/test-utils，则可以使用createLocalVue测试单个文件组件，如下所示：
// your-component.spec.js
import { createLocalVue, shallowMount } from '@vue/test-utils';
import capitalize from '../path/to/your/filter/capitalize.js';
import YOUR_COMPONENT from '../path/to/your/component.vue';
describe('Describe YOUR_COMPONENT component', () => {
const localVue = createLocalVue();
// this is the key line
localVue.filter('capitalize', capitalize);
const wrapper = shallowMount(YOUR_COMPONENT, {
// here you can define the required data and mocks
localVue,
propsData: {
yourProp: 'value of your prop',
},
mocks: {
// here you can define all your mocks
// like translate function and others.
},
});
it('passes the sanity check and creates a wrapper', () => {
expect(wrapper.isVueInstance()).toBe(true);
});
});我希望能帮助你。
致以问候。
Stack Overflow用户
发布于 2016-11-17 05:58:29
我最好的猜测是，如果您在组件中定义了filters，那么它们将只能在此组件中使用。在您的示例中，您只能在主Vue实例中使用capitalize，而不能在其子组件中使用它。将其转移到全球层面解决了这个问题。
对于第二个问题，您正在通过在测试文件中添加过滤器定义来做正确的事情。
https://stackoverflow.com/questions/40637254
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号