Saya baru menggunakan suite ujian Jest untuk Vue JS dan menyepadukannya ke dalam aplikasi Nuxt JS saya. Saya telah menyediakan beberapa ujian asas untuk menyemak sama ada komponen itu adalah contoh Vue dan ujian ini berjaya lulus.
Saya kini cuba mencari elemen pada halaman saya dan menyemak sama ada ia wujud, dan kandungan yang mungkin ada di dalamnya.
Ini adalah struktur saya
pages/application/begin.vue
<template>
<div>
<LoanTerm />
</div>
</template>
Komponen/Borang/Langkah/Loan/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>
Ujian yang saya sediakan menyediakan perkara berikut:
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)
})
})
Keputusan yang saya dapat semasa saya menjalankan ujian ini ialah "Syarat untuk dipilih" saya “Ujian itu gagal kerana menerima ralat.
Saya juga cuba menggunakan findAll dan tiada pulangan
Apa yang saya terlepas?
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Nampak
modal的内容（包括您的测试正在寻找的“datasets-terms”按钮）最初并未呈现，因为termSelectionModalIsOpen被初始化为false，并且没有任何设置将其设置为true. Coraknya mungkin kelihatan serupa dengan ini:Penyelesaian
Gunakan
data()属性挂载LoanTerm，该属性将termSelectionModalIsOpen初始化为trueuntuk memaparkan kandungan corak:const wrapper = mount(LoanTerm, { data () { return { termSelectionModalIsOpen: true, } }, })Saya perasan kelas
LoanTerm.vue中缺少jest__datasets-terms, tetapi saya rasa ia hanya ralat copy-paste.Demo