如何使用Jest独立测试Vue过滤器（无需关联组件）

当然可以！你完全不用把过滤器绑定到组件上才能测试——Vue本质上就是把过滤器作为普通函数注册的，所以我们可以直接测试这个函数本身。这里有两种实用的方法：

你的代码已经通过Vue.filter注册了过滤器，我们只需要先执行注册函数，然后从Vue中取出这个过滤器函数就能测试了：

import Vue from 'vue'
import registerEnglishNumberFilter from '@/path/to/your/filter/file'

describe('englishNumber Filter', () => {
  // 在所有测试前注册过滤器
  beforeAll(() => {
    registerEnglishNumberFilter()
  })

  it('converts Persian digit "۰" to numeric 0', () => {
    const filter = Vue.filter('englishNumber')
    expect(filter('۰')).toBe(0)
  })

  it('returns empty string for falsy values', () => {
    const filter = Vue.filter('englishNumber')
    expect(filter('')).toBe('')
    expect(filter(null)).toBe('')
    expect(filter(undefined)).toBe('')
  })

  it('converts non-string values to string before processing', () => {
    const filter = Vue.filter('englishNumber')
    // 数字0会被转为字符串"0"，不会触发替换
    expect(filter(0)).toBe('0')
    // 数字123转为字符串后也不会被替换
    expect(filter(123)).toBe('123')
  })

  it('replaces all Persian digits with English equivalents', () => {
    const filter = Vue.filter('englishNumber')
    expect(filter('۱۲۳۴۵۶۷۸۹۰')).toBe('1234567890')
    expect(filter('مبلغ: ۴۵۰۰ تومان')).toBe('مبلغ: 4500 تومان')
  })
})

如果想让测试更简洁，同时让过滤逻辑可以复用在非Vue场景，建议把过滤逻辑从Vue注册代码中抽离出来：

重构后的过滤器文件： #

// @/filters/englishNumber.js
// 独立的过滤函数
export function 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
  })
}

// 原有的Vue注册函数
export default function () {
  import Vue from 'vue'
  Vue.filter('englishNumber', englishNumber)
}

对应的测试代码： #

import { englishNumber } from '@/filters/englishNumber'

describe('englishNumber Filter Function', () => {
  it('converts Persian digit "۰" to numeric 0', () => {
    expect(englishNumber('۰')).toBe(0)
  })

  it('returns empty string for falsy values', () => {
    expect(englishNumber('')).toBe('')
    expect(englishNumber(null)).toBe('')
    expect(englishNumber(undefined)).toBe('')
  })

  it('converts non-string values to string before processing', () => {
    expect(englishNumber(0)).toBe('0')
    expect(englishNumber(123)).toBe('123')
  })

  it('replaces all Persian digits with English equivalents', () => {
    expect(englishNumber('۱۲۳۴۵۶۷۸۹۰')).toBe('1234567890')
    expect(englishNumber('شماره تلفن: ۰۲۱-۸۷۶۵۴۳۲۱')).toBe('شماره تلفن: 021-87654321')
  })
})

这种方法的好处是完全脱离Vue依赖测试核心逻辑，代码复用性更高，测试也更高效。

内容的提问来源于stack exchange，提问作者Hossein Karamzadeh