Vue 計算的 JEST 單元測試

Question

如何為此計算編寫 JEST 單元測試以按類型檢查和過濾：

模板：

輸入 email：

        <CommunicationPreference
          v-for="(communication, index) in communicationPreferenceTypeEmail"
          :key="index + communication.name"
          :consent="communication.consent"
          :name="communication.name"
          @update="updateConsent"
        />

不輸入 email：

        <CommunicationPreference
          v-for="(communication, index) in communicationPreferenceTypeNotEmail"
          :key="index + communication.name"
          :consent="communication.consent"
          :name="communication.name"
          @update="updateConsent"
        />

按類型計算文件管理器，以便我可以在兩個單獨的列表中顯示一個類型為 email 的列表，然后一個是其他所有類型的列表：

  computed: {
    ...mapState('account', ['communicationPreferences']),
    communicationPreferenceTypeEmail() {
      return this.communicationPreferences.filter((e) => e.type === 'EMAIL')
    },
    communicationPreferenceTypeNotEmail() {
      return this.communicationPreferences.filter((e) => e.type !== 'EMAIL')
    },
  },

我的測試規格：

  it('should filter communication preferences by TYPE', () => {})

Answer 1

您的問題僅包括帶有CommunicationPreference組件的模板部分，因此很難說出模板的 rest 是什么樣子。 但我認為這可能對您有所幫助：

import { mount } from '@vue/test-utils'
import Component from './path/to/Component'

const mockedCommunicationPreferencies = [
    {
        //...,
        type: 'EMAIL',
    },
    //...
    {
        //...,
        type: 'NOT-EMAIL',
    }
]

it('should filter communication preferencies by TYPE', () => {
    let component = mount(Component)

    component.setData({ communicationPreferences: mockedCommunicationPreferences })

    const emailCommunicationPreferences = component.vm.communicationPreferenceTypeEmail
    const nonEmailCommunicationPreferences = component.vm.communicationPreferenceTypeNotEmail

    expect(emailCommunicationPreferencies.every(cp => cp.type === 'EMAIL')).toBeTruthy()
    expect(nonEmailCommunicationPreferencies.every(cp => cp.type !== 'EMAIL')).toBeTruthy()
})