测试Vue.js滤波器

Question

我正试图为我的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...
  });
});

Answer 1

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

知道了这一点，我会测试函数本身，而不尝试通过组件测试它。如果它本身就能工作，那么您就知道它将在组件中工作。

我还会利用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:如果你尝试把“仙人掌”转换成“仙人掌”，你就会得到“仙人掌”。