JEST unit test for Vue computed-CodePudding

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', () => {})

CodePudding user response：

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