Vue 计算的 JEST 单元测试

Question

How to write a JEST unit test for this computed that checks and filters by type:

TEMPLATE:

Type email:

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

Not type email:

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

Computed that filers by type so that I can display in two separate lists one that has a type of email and then one that is everything else:

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

My test spec:

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

Answer 1

Your question only includes the part of your template with the CommunicationPreference component, so it's hard to tell how the rest of the template would look like. But I think this might help you:

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()
})