Maison > Questions et réponses > le corps du texte
Je suis nouveau dans la suite de tests Jest pour Vue JS et je l'intègre dans mon application Nuxt JS. J'ai mis en place quelques tests de base pour vérifier si le composant est une instance Vue et ces tests réussissent.
J'essaie maintenant de trouver un élément sur ma page et de vérifier s'il existe et quel contenu pourrait y contenir.
C'est ma structure
pages/application/begin.vue
<template> <div> <LoanTerm /> </div> </template>
Composant/Formulaire/Étape/Prêt/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>
Le test que j'ai mis en place fournit les éléments suivants :
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) }) })
Les résultats que j'ai obtenus lors de ce test étaient mes "Conditions à choisir" "Le test a échoué car il a reçu une erreur.
J'ai aussi essayé d'utiliser findAll
et cela ne renvoie rien
Qu'est-ce que j'ai raté ?
P粉4959559862024-04-01 13:13:57
On dirait modal
的内容(包括您的测试正在寻找的“datasets-terms”按钮)最初并未呈现,因为 termSelectionModalIsOpen
被初始化为 false
,并且没有任何设置将其设置为 true
. Le modèle pourrait ressembler à ceci :
// Modal.vuesssccc
Utilisez data()
属性挂载 LoanTerm
,该属性将 termSelectionModalIsOpen
初始化为 true
afin de restituer le contenu du motif :
const wrapper = mount(LoanTerm, { data () { return { termSelectionModalIsOpen: true, } }, })
J'ai remarqué la classe LoanTerm.vue
中缺少 jest__datasets-terms
, mais je pense que c'est juste une erreur de copier-coller.