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")
  }
}

Answer 2

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

Answer 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>");
  });
});

用jest测试Vue滤镜

3 个答案: