使用jest测试Vue过滤器
使用jest测试Vue过滤器
提问于 2018-01-23 17:57:03
我正在尝试使用jest为我的Vue项目中的一个过滤器编写测试，我可以在不在任何组件中使用它的情况下测试该过滤器吗?我的意思是，我可以将其作为一个单元(如函数)进行测试吗？我搜索了很多，但我没有找到任何东西来向我展示如何在Vue中为过滤器编写单独的测试
import Vue from 'vue'
export default function () {
Vue.filter('englishNumber', (value) => {
if (value === '۰') return 0
if (!value) return ''
if (typeof value !== 'string') {
value = value.toString()
}
return value.replace(/[\u06F0-\u06F9]+/g, function (digit) {
let ret = ''
for (let i = 0, len = digit.length; i < len; i++) {
ret += String.fromCharCode(digit.charCodeAt(i) - 1728)
}
return ret
})
})
}这是我想测试的过滤器，有人知道怎么写这种测试吗？
回答 3
Stack Overflow用户
回答已采纳
发布于 2018-06-08 04:15:04
如果您正在编写在多个组件中使用的filters，那么测试它非常容易。
由于Vue.filter只接受一个函数，因此您可以通过导出定义为该函数编写独立于过滤器的测试，如下所示：
// Define the function independently and export it
export const englishNumber = function (value) {
if (value === '۰') return 0
if (!value) return ''
if (typeof value !== 'string') {
value = value.toString()
}
return value.replace(/[\u06F0-\u06F9]+/g, function (digit) {
let ret = ''
for (let i = 0, len = digit.length; i < len; i++) {
ret += String.fromCharCode(digit.charCodeAt(i) - 1728)
}
return ret
})
}
// Pass the function in to the filter defintion
Vue.filter('englishNumber', englishNumber)然后在您的测试文件中，导入该函数并像执行其他操作一样对其进行测试：
import { englishNumber } from '#/lib/filters.js'
describe("englishNumber") {
it("does whatever") {
expect(englishNumber("actual")).toEqual("expected")
}
}Stack Overflow用户
发布于 2020-08-07 19:51:55
我们可以用手工制作的组件来测试过滤器。例如，我们有一个将日期转换为所需格式的过滤器：
// filters.js
import Vue from "vue";
Vue.filter("dateFormat", (incomingDate) => {
// does the work here
}因此，我们可以通过以下方式进行测试：
// filters.spec.js
import Vue from "vue";
import "@/components/filters";
import { mount, createLocalVue } from "@vue/test-utils";
const myComponent = Vue.component("myComponent", {
data() {
return {
date: new Date("January 1, 2020 01:10:30")
};
},
template: "<p> {{ date | dateFormat }} </p>"
});
const localVue = createLocalVue();
describe("filter dateFormat", () => {
it("filter transforms date to readable format", () => {
const wrapper = mount(myComponent, {
localVue
});
expect(wrapper.html()).toBe("<p> 01 January 2020 </p>");
});
});Stack Overflow用户
发布于 2018-01-23 18:05:22
对Vue过滤器进行单元测试的正确方法是在您的组件中本地声明它(使用Vue的API和Vue.filter)。然后，您可以在Vue组件中编写单元测试。你可以查看this case
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/48398816
复制相关文章
相似问题