我是 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，它什么也不返回
我错过了什么？
看起来
modal的内容（包括您的测试正在寻找的“datasets-terms”按钮）最初并未呈现，因为termSelectionModalIsOpen被初始化为false，并且没有任何设置将其设置为true。该模式可能看起来与此类似：解决方案
使用
data()属性挂载LoanTerm，该属性将termSelectionModalIsOpen初始化为true，以便呈现模式的内容：const wrapper = mount(LoanTerm, { data () { return { termSelectionModalIsOpen: true, } }, })我注意到
LoanTerm.vue中缺少jest__datasets-terms类，但我认为这只是一个复制粘贴错误。演示