测试 Vue.js 过滤器答案

【问题标题】：Testing Vue.js Filters测试 Vue.js 过滤器
【发布时间】：2020-01-05 23:56:56
【问题描述】：

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

过滤器

Vue.filter('pluralize', (word: string, amount: number) => amount > 1 ? `${word}s` : 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 ? `${word}s` : word);

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

【问题讨论】：

您检查过我的答案是否适合您吗？ @KD1
嗨@user9993 是的，谢谢你按照建议工作:)
请随意标记已接受的答案。 @KD1

标签： javascript vue.js testing filter jestjs

【解决方案1】：

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

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

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

filters.js:

const pluralize = (word: string, amount: number) => amount > 1 ? `${word}s` : 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”。

【讨论】：