確保頁面上存在Nuxt JS / Vue Jest檢查的類別名稱元素

Question

我是 Vue JS 的 Jest 測試套件的新手，並將其整合到我的 Nuxt JS 應用程式中。我已經設定了一些基本測試來檢查元件是否是 Vue 實例並且這些測試是否成功通過。

我現在嘗試在我的頁面上尋找一個元素並檢查它是否存在，以及其中可能存在的內容。

這是我的結構

pages/application/begin.vue

#

<template>
  <div>
    <LoanTerm />
  </div>
</template>

元件/表單/步驟/貸款/LoanTerm.vue

<template>
  <article>

    <article class="tw-px-7 tw-pb-7">
      <StepHeader
        title="About your loan"
        subtitle="How long do you need the money for?" />
    </article>
    <hr class="tw-mt-7" />
    <article class="tw-p-7 tw-space-y-7">

      <section>
        <validation-provider
          vvid="loan.term"
          name="Loan term"
          rules="required"
          v-slot="{ errors, classes }"
        >
          <div class="tw-grid tw-grid-cols-2 tw-gap-4">
            <label
              v-for="(term, index) in datasets.terms.slice(0, 12)"
              v-if="index % 2 == 0"
              :key="index"
              :for="`term-${index}`"
              class="tw-flex-1 tw-relative tw-bg-gray-50 tw-rounded-xl tw-p-7 tw-border-b-4 tw-border-gray-200 tw-text-center tw-cursor-pointer"
              :class="$getClasses(classes, true, fields.loan.term === term.value)">
              <input type="radio" name="term" :id="`term-${index}`" :value="term.value" v-model="fields.loan.term" class="tw-absolute tw-top-4 tw-right-4 tw-h-4 tw-w-4 focus:tw-ring-green-500 tw-text-green-600 tw-border-gray-300 jest__datasets-terms" />
              <span class="tw-block">
                {{ term.label }}
              </span>
            </label>
          </div>
          <ValidationMessage :message="errors[0]" />
        </validation-provider>
      </section>

      <section class="tw-space-y-4">
        <modal
          title="Choose address"
          :is-open="termSelectionModalIsOpen">
          <template #action-close>
            <button @click="termSelectionModalIsOpen = false" type="button" class="tw-p-3 tw-rounded-full tw-text-gray-800 tw-border tw-border-gray-300 tw-font-extrabold focus:tw-outline-none focus:tw-ring-2 focus:tw-ring-offset-2 focus:tw-ring-offset-gray-200 focus:tw-ring-white">
              <svg xmlns="http://www.w3.org/2000/svg" class="tw-h-5 tw-w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
              </svg>
            </button>
          </template>
          <template #iterable-data>
            <section v-for="(term, index) in datasets.terms" :key="index">
              <button @click="chooseTerm(term)" type="button" class="tw-w-full tw-block md:hover:tw-bg-gray-50 tw-p-6 tw-text-left">
                <div class="tw-grid tw-grid-cols-3 tw-gap-6">
                  <div class="tw-col-span-2 tw-flex tw-items-center tw-text-gray-600">
                    {{ term.label }}
                  </div>
                  <div class="tw-text-right">
                    <button type="button" class="tw-p-3 tw-rounded-full tw-text-gray-800 tw-border tw-border-transparent tw-font-extrabold focus:tw-outline-none focus:tw-ring-2 focus:tw-ring-offset-2 focus:tw-ring-offset-gray-200 focus:tw-ring-white">
                      <svg xmlns="http://www.w3.org/2000/svg" class="tw-h-5 tw-w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                      </svg>
                    </button>
                  </div>
                </div>
              </button>
              <hr />
            </section>
          </template>
        </modal>
        <button @click="termSelectionModalIsOpen = true" type="button" class="tw-py-5 tw-px-5 tw-rounded-xl tw-bg-gray-100 tw-flex tw-w-full tw-text-gray-600 tw-border tw-border-gray-200 tw-font-medium focus:tw-outline-none focus:tw-ring-2 focus:tw-ring-offset-2 focus:tw-ring-offset-gray-100 focus:tw-ring-white">
          <div class="tw-flex tw-mx-auto">
            <svg xmlns="http://www.w3.org/2000/svg" class="tw-h-5 tw-w-5 tw-mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
            </svg>
            Choose another term
          </div>
        </button>
        <div class="md:tw-shadow-lg">
          <button type="submit" class="tw-py-5 tw-px-5 tw-rounded-xl tw-bg-green-500 md:hover:tw-bg-green-600 tw-block tw-w-full tw-text-white tw-border tw-border-gray-300 tw-font-medium focus:tw-outline-none focus:tw-ring-2 focus:tw-ring-offset-2 focus:tw-ring-offset-gray-200 focus:tw-ring-white">
            Continue
          </button>
        </div>
      </section>

    </article>

  </article>
</template>

<script>
export default {
  props: {
    minTerm: {
      type: Number,
      default: 1
    },
    term: {
      type: Number,
      default: 7
    },
    maxTerm: {
      type: Number,
      default: 36
    },
    fields: {
      type: Object,
      default: () => ({ })
    }
  },
  data () {
    return {
      termSelectionModalIsOpen: false,
      datasets: {
        terms: []
      }
    }
  },
  created () {
    this.availableTerms()
  },
  methods: {

    /*
    ** Generate available terms
    */
    availableTerms () {
      for (let term = this.minTerm; term < this.maxTerm; term++) {
        this.datasets.terms.push({
          label: `${term} month${term == 1 ? '' : 's'}`,
          value: term
        })
      }
    },

    /*
    ** Choose term
    */
    chooseTerm (term = null) {
      this.fields.loan.term = term.value
      this.termSelectionModalIsOpen = false
      this.$store.commit('application/stepForwards')
    }

  }
}
</script>

我設定的測試提供了以下內容：

import { mount } from '@vue/test-utils'
import LoanTerm from '@/components/Form/Steps/Loan/LoanTerm'

describe('LoanTerm', () => {

  test('is a Vue instance', () => {
    const wrapper = mount(LoanTerm)
    expect(wrapper.vm).toBeTruthy()
  })

  test('terms are available for selection', async () => {
    const wrapper = mount(LoanTerm)
    const terms = await wrapper.find('.jest__datasets-terms')
    expect(terms.exists()).toBe(true)
  })

})

我執行此測試得到的結果是我的“條款可供選擇” 「測試失敗，因為它收到錯誤。

我也嘗試過使用 findAll，它什麼也不回傳

我錯過了什麼？

Answer 1

看起來modal 的內容（包括您的測試正在尋找的「datasets-terms」按鈕）最初並未呈現，因為termSelectionModalIsOpen 被初始化為false，並且沒有任何設定將其設為true。該模式可能看起來與此類似：

// Modal.vue


sssccc

解決方案

使用data() 屬性掛載LoanTerm，該屬性將termSelectionModalIsOpen 初始化為true，以便呈現模式的內容：

const wrapper = mount(LoanTerm, {
  data () {
    return {
      termSelectionModalIsOpen: true,
    }
  },
})

我注意到 LoanTerm.vue 中缺少 jest__datasets-terms 類，但我認為這只是一個複製貼上錯誤。

示範