Jest測試Vue組件的過濾器

在Vue中，過濾器（Filters）被用來對文本進行格式化。然而，在Vue 3中，過濾器的概念已經被移除，因此在Vue 3中不再支持過濾器。在Vue 2中，你可以通過全局或局部注冊過濾器，并在模板中使用它們。

對于Vue 2中的過濾器，你可以使用Jest來測試它們。以下是一個簡單的例子，展示了如何使用Jest測試一個Vue組件中的過濾器：

首先，安裝Jest和Vue Test Utils：

npm install --save-dev jest @vue/test-utils vue-jest babel-jest

然后，創建一個Vue組件，其中包含一個過濾器：

<!-- MyComponent.vue --><template>
  <div>{{ message | capitalize }}</div>
</template><script>
export default {
  data() {
    return {
      message: 'hello'
    };
  },
  filters: {
    capitalize(value) {
      if (!value) return '';
      value = value.toString();
      return value.charAt(0).toUpperCase() + value.slice(1);
    }
  }
};
</script>

接下來，編寫一個測試文件來測試這個過濾器：

// MyComponent.spec.js
import { shallowMount } from '@vue/test-utils';
import MyComponent from './MyComponent.vue';

describe('MyComponent', () => {
  it('should render the message in capitalized form', () => {
    const wrapper = shallowMount(MyComponent);
    expect(wrapper.text()).toBe('Hello');
  });
});

在這個測試中，我們使用shallowMount來掛載組件，然后檢查渲染的文本是否符合預期。

請注意，由于Vue 3不再支持過濾器，如果你正在使用Vue 3，你應該考慮使用計算屬性（computed properties）或方法（methods）來替代過濾器。在這種情況下，你可以直接測試這些計算屬性或方法，而不是在模板中使用它們。