用jest测试Vue滤镜

Question

我正在尝试使用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
        })
    })
}

这是我想测试的过滤器有没有人知道如何编写这种测试？

Answer 1

如果您正在编写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")
  }
}