用 jest 测试 Vue 过滤器

Posted 2023-02-22

【中文标题】用 jest 测试 Vue 过滤器

【英文标题】：Testing Vue filters with jest

【发布时间】：2018-07-02 02:26:09

【问题描述】：

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

这是我要测试的过滤器 有谁知道如何编写这种测试？

【参考方案1】：

单元测试 Vue 过滤器的正确方法是在组件中本地声明它（使用 Vue 的 API 和 Vue.filter）。 然后，您可以在 Vue 组件中编写单元测试。 可以查看this case

【讨论】：

这仅在过滤器用于单个组件时才有效。如果您尝试共享组件，这将导致一堆不必要的重复代码和测试。

【参考方案2】：

如果您编写的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")
  

【参考方案3】：

我们可以使用手工制作的组件来测试过滤器。例如，我们有一个将日期转换为所需格式的过滤器：

// 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>");
  );
);

【讨论】：

嗯，这是测试过滤器的最佳方法。测试过滤器功能本身很好，但我更喜欢你的方法，更“在情况下”:)