Vue 计算的 JEST 单元测试

Question

如何为此计算编写 JEST 单元测试以按类型检查和过滤：

模板：

输入电子邮件：

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

不输入电子邮件：

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

按类型计算文件管理器，以便我可以在两个单独的列表中显示，一个包含一种电子邮件类型，另一个包含所有其他类型：

  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 组件的部分，因此很难判断模板的其余部分会是什么样子。但我认为这可能对您有所帮助：

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

Vue 计算的 JEST 单元测试

JEST unit test for Vue computed

javascript

unit-testing

vue.js