测试 Vue.js 过滤器

Posted 2023-02-22

【中文标题】测试 Vue.js 过滤器

【英文标题】：Testing Vue.js Filters

【发布时间】：2020-01-05 23:56:56

【问题描述】：

我正在尝试为我的 Vue.js 过滤器编写一个测试，但我不知道从哪里开始特别是过滤器????

过滤器

Vue.filter('pluralize', (word: string, amount: number) => amount > 1 ? `$words` : word);

在 Vue.js 组件中的使用

 'recharge' | pluralize(count) 

所以如果计数大于 1，Recharge 变为 Recharges。

测试标记

这是迄今为止我对测试标记的了解：

import createLocalVue from '@vue/test-utils';

describe('pluralize', () => 
  let localVue = createLocalVue();
  localVue.filter('pluralize', (word: string, amount: number) => amount > 1 ? `$words` : word);

  it('returns plural suffix value', () => 
    // Test comes here...
  );
);

【问题讨论】：

您检查过我的答案是否适合您吗？ @KD1

嗨@user9993 是的，谢谢你按照建议工作:)

请随意标记已接受的答案。 @KD1

【参考方案1】：

如果它是一个过滤器，那么您通常可以将其视为Pure function。它总是为给定的输入返回相同的输出。

知道了这一点，我会改为测试函数本身，而不是尝试通过组件对其进行测试。如果它自己工作，那么你就知道它会在组件内部工作。

我也会利用 ES 模块，让我们看看它是如何工作的。

filters.js:

const pluralize = (word: string, amount: number) => amount > 1 ? `$words` : word);

export 
    pluralize,
    // ... other filters
;

filters.spec.js:

import  pluralize  from './filters.spec.js';

describe('filters', () => 
    test('pluralize should return suffix value', () => 
        expect(pluralize('recharge', 10)).toBe('recharges');
    );
    // ... your other tests here

PS：如果您尝试将“cacti”转换为“cactus”，此代码将不起作用，您最终会得到“cactis”。