농담으로 Vue 필터 테스트

농담으로 Vue 필터 테스트

내 Vue 프로젝트에서 jest를 사용하여 필터에 대한 테스트를 작성하려고 하는데, 어떤 구성 요소에도 사용하지 않고 필터를 테스트할 수 있는지, 즉 (함수와 같은) 단위로 테스트할 수 있는지?많이 검색했는데 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
        })
    })
}

이것은 내가 테스트하고 싶은 필터야. 이런 종류의 테스트를 쓸 줄 아는 사람 있니?

글을 쓰고 있다면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")
  }
}

우리는 손으로 만든 부품으로 필터를 테스트할 수 있다.예를 들어 날짜를 필요한 형식으로 변환하는 필터가 있다.

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

Vue 필터를 유닛 테스트하는 올바른 방법은 구성 요소 내에서 로컬로 선언하는 것이다(Vue의 API 및 Vue.filter 사용).그런 다음 Vue 구성 요소 내에서 단위 테스트를 작성할 수 있다.당신은 이 케이스를 확인할 수 있다.

참조URL: https://stackoverflow.com/questions/48398816/testing-vue-filters-with-jest