blocks|key|947112|text|对Vue过滤器进行单元测试的正确方法是在您的组件中本地声明它(使用Vue的API和Vue.filter)。然后，您可以在Vue组件中编写单元测试。你可以查看this+case|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|947113|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/40637254/vue-js-filters-and-testing^0|26|9|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

The correct way to unit test a Vue filter would be to declare it locally inside your component (using Vue's API and Vue.filter).
You can then write unit tests inside your Vue component.
You can check <a href="https://stackoverflow.com/questions/40637254/vue-js-filters-and-testing">this case</a>

blocks|key|489009|text|如果您正在编写在多个组件中使用的filters，那么测试它非常容易。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|489010|由于Vue.filter只接受一个函数，因此您可以通过导出定义为该函数编写独立于过滤器的测试，如下所示：|489011|//+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]%2B/g,+function+(digit)+{
++++let+ret+=+''
++++for+(let+i+=+0,+len+=+digit.length;+i+<+len;+i%2B%2B)+{
++++++ret+%2B=+String.fromCharCode(digit.charCodeAt(i)+-+1728)
++++}
++++return+ret
++})
}

//+Pass+the+function+in+to+the+filter+defintion
Vue.filter('englishNumber',+englishNumber)|code-block|syntax|javascript|489012|然后在您的测试文件中，导入该函数并像执行其他操作一样对其进行测试：|489013|import+{+englishNumber+}+from+'#/lib/filters.js'

describe("englishNumber")+{+
++it("does+whatever")+{
++++expect(englishNumber("actual")).toEqual("expected")
++}
}|489014|entityMap^0|G|7|0|2|A|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@$9|T|A|U|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|V|8|@$9|W|A|X|B|C]]|D|@]|E|$]]|$1|H|3|I|5|J|7|Y|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|Z|8|@]|D|@]|E|$]]|$1|O|3|P|5|J|7|10|8|@]|D|@]|E|$K|L]]|$1|Q|3|-4|5|6|7|11|8|@]|D|@]|E|$]]]|R|$]]

If you're writing <code>filters</code> used in multiple components, then it's quite easy to test. 

Since <code>Vue.filter</code> simply takes a function, you can just write a test for the function independently of the filter by exporting the definition, like so:

<pre class="lang-js prettyprint-override"><code>// 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 &lt; len; i++) {
 ret += String.fromCharCode(digit.charCodeAt(i) - 1728)
 }
 return ret
 })
}

// Pass the function in to the filter defintion
Vue.filter('englishNumber', englishNumber)
</code></pre>

Then in your test file, import the function and test it like you do anything else:

<pre class="lang-js prettyprint-override"><code>import { englishNumber } from '#/lib/filters.js'

describe("englishNumber") { 
 it("does whatever") {
 expect(englishNumber("actual")).toEqual("expected")
 }
}
</code></pre>

blocks|key|947106|text|我们可以用手工制作的组件来测试过滤器。例如，我们有一个将日期转换为所需格式的过滤器：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|947107|//+filters.js

import+Vue+from+"vue";

Vue.filter("dateFormat",+(incomingDate)+=>+{
++//+does+the+work+here
}|code-block|syntax|javascript|947108|因此，我们可以通过以下方式进行测试：|947109|//+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:+"+{{+date+%7C+dateFormat+}}+"
});

const+localVue+=+createLocalVue();

describe("filter+dateFormat",+()+=>+{
++it("filter+transforms+date+to+readable+format",+()+=>+{
++++const+wrapper+=+mount(myComponent,+{
++++++localVue
++++});
++++expect(wrapper.html()).toBe("+01+January+2020+");
++});
});|947110|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

We can test filters with hand-made components. For example we have a filter that transform date into needed format:
<pre><code>// filters.js

import Vue from &quot;vue&quot;;

Vue.filter(&quot;dateFormat&quot;, (incomingDate) =&gt; {
 // does the work here
}
</code></pre>
So we can test it the following way:
<pre><code>// filters.spec.js

import Vue from &quot;vue&quot;;
import &quot;@/components/filters&quot;;
import { mount, createLocalVue } from &quot;@vue/test-utils&quot;;

const myComponent = Vue.component(&quot;myComponent&quot;, {
 data() {
 return {
 date: new Date(&quot;January 1, 2020 01:10:30&quot;)
 };
 },
 template: &quot;&lt;p&gt; {{ date | dateFormat }} &lt;/p&gt;&quot;
});

const localVue = createLocalVue();

describe(&quot;filter dateFormat&quot;, () =&gt; {
 it(&quot;filter transforms date to readable format&quot;, () =&gt; {
 const wrapper = mount(myComponent, {
 localVue
 });
 expect(wrapper.html()).toBe(&quot;&lt;p&gt; 01 January 2020 &lt;/p&gt;&quot;);
 });
});
</code></pre>

i'm trying to write a test for one of my filters in my Vue project using jest , can i Test that filter without using it in any component, i mean can i test it as a unit(like a function)? i searched a lot but i couldn't find anything to show me how to write an individual test for a filter in Vue

<pre><code>import Vue from 'vue'

export default function () {
 Vue.filter('englishNumber', (value) =&gt; {
 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 &lt; len; i++) {
 ret += String.fromCharCode(digit.charCodeAt(i) - 1728)
 }
 return ret
 })
 })
}
</code></pre>

this is the filter i want to test
does anyone know how to write this kind of test ?

Testing Vue filters with jest

单元测试

我正在尝试使用jest为我的Vue项目中的一个过滤器编写测试，我可以在不在任何组件中使用它的情况下测试该过滤器吗?我的意思是，我可以将其作为一个单元(如函数)进行测试吗？我搜索了很多，但我没有找到任何东西来向我展示如何在Vue中为过滤器编写单独的测试import Vue from 'vue'export default...

问使用jest测试Vue过滤器
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用jest测试Vue过滤器EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用jest测试Vue过滤器
EN