Find the nth element in vue-test-utils

user_2542165 0
Viewed 6632

I'm using vue-test-utils with jest. My wrapper contains 9 input elements an I'd like to get the third one. This solution works:

    wrapper.findAll('input').at(3) // OK

According to documentation (https://vue-test-utils.vuejs.org/api/selectors.html), I should be able to use CSS pseudo selectors, but this does not work:

    wrapper.find('input:nth-of-type(3)') // ErrorWrapper

With this method, I can only get the first input:

    wrapper.find('input:nth-of-type(1)') // OK

Am I misusing the CSS selector?

My wrapper HTML looks like this:

<div class="layout wrap">
   <div class="flex xs12 sm12 md12" style="padding: 0px;">
      <!----> <!----> <!----> 
      <div class="v-input v-text-field theme--light">
         <div class="v-input__prepend-outer">
            <div class="v-input__icon v-input__icon--prepend"><i aria-hidden="true" class="v-icon fa fa-user theme--light"></i></div>
         </div>
         <div class="v-input__control">
            <div class="v-input__slot">
               <div class="v-text-field__slot"><label aria-hidden="true" class="v-label theme--light" style="left: 0px; position: absolute;">Nom*</label><input aria-label="Nom*" type="text"></div>
            </div>
            <div class="v-text-field__details">
               <div class="v-messages theme--light">
                  <div class="v-messages__wrapper"></div>
               </div>
            </div>
         </div>
      </div>
   </div>
   <div class="flex xs12 sm12 md12" style="padding: 0px;">
      <!----> <!----> <!----> 
      <div class="v-input v-text-field theme--light">
         <div class="v-input__prepend-outer">
            <div class="v-input__icon v-input__icon--prepend"><i aria-hidden="true" class="v-icon fa fa-user theme--light"></i></div>
         </div>
         <div class="v-input__control">
            <div class="v-input__slot">
               <div class="v-text-field__slot"><label aria-hidden="true" class="v-label theme--light" style="left: 0px; position: absolute;">Prénom*</label><input aria-label="Prénom*" type="text"></div>
            </div>
            <div class="v-text-field__details">
               <div class="v-messages theme--light">
                  <div class="v-messages__wrapper"></div>
               </div>
            </div>
         </div>
      </div>
   </div>
   <div class="flex xs12 sm12 md12" style="padding: 0px;">
      <!----> <!----> <!----> 
      <div class="v-input v-text-field theme--light">
         <div class="v-input__prepend-outer">
            <div class="v-input__icon v-input__icon--prepend"><i aria-hidden="true" class="v-icon fa fa-at theme--light"></i></div>
         </div>
         <div class="v-input__control">
            <div class="v-input__slot">
               <div class="v-text-field__slot"><label aria-hidden="true" class="v-label theme--light" style="left: 0px; position: absolute;">Email*</label><input aria-label="Email*" type="text"></div>
            </div>
            <div class="v-text-field__details">
               <div class="v-messages theme--light">
                  <div class="v-messages__wrapper"></div>
               </div>
            </div>
         </div>
      </div>
   </div>
   <div class="flex xs12 sm12 md12" style="padding: 0px;">
      <!----> <!----> 
      <div>
         <div class="v-menu">
            <div class="v-menu__content theme--light " style="max-height: auto; min-width: 290px; max-width: auto; top: 12px; left: 0px; transform-origin: top left; z-index: 0; display: none;"></div>
         </div>
         <div class="v-input v-text-field theme--light">
            <div class="v-input__prepend-outer">
               <div class="v-input__icon v-input__icon--prepend"><i aria-hidden="true" class="v-icon v-icon--link material-icons theme--light">event</i></div>
            </div>
            <div class="v-input__control">
               <div class="v-input__slot">
                  <div class="v-text-field__slot"><label aria-hidden="true" class="v-label theme--light" style="left: 0px; position: absolute;">Date de naissance</label><input aria-label="Date de naissance" type="text"></div>
               </div>
               <div class="v-text-field__details">
                  <div class="v-messages theme--light">
                     <div class="v-messages__wrapper"></div>
                  </div>
               </div>
            </div>
         </div>
      </div>
      <!---->
   </div>
   <div class="flex xs12 sm12 md12" style="padding: 0px;">
      <!----> <!----> <!----> 
      <div class="v-input v-text-field theme--light">
         <div class="v-input__prepend-outer">
            <div class="v-input__icon v-input__icon--prepend"><i aria-hidden="true" class="v-icon material-icons theme--light">place</i></div>
         </div>
         <div class="v-input__control">
            <div class="v-input__slot">
               <div class="v-text-field__slot"><label aria-hidden="true" class="v-label theme--light" style="left: 0px; position: absolute;">Adresse</label><input aria-label="Adresse" type="text"></div>
            </div>
            <div class="v-text-field__details">
               <div class="v-messages theme--light">
                  <div class="v-messages__wrapper"></div>
               </div>
            </div>
         </div>
      </div>
   </div>
   <div class="flex xs12 sm12 md12" style="padding: 0px;">
      <!----> <!----> <!----> 
      <div class="v-input v-text-field theme--light">
         <div class="v-input__control">
            <div class="v-input__slot">
               <div class="v-text-field__slot"><label aria-hidden="true" class="v-label theme--light" style="left: 0px; position: absolute;">Code postal</label><input aria-label="Code postal" type="text"></div>
            </div>
            <div class="v-text-field__details">
               <div class="v-messages theme--light">
                  <div class="v-messages__wrapper"></div>
               </div>
            </div>
         </div>
      </div>
   </div>
   <div class="flex xs12 sm12 md12" style="padding: 0px;">
      <!----> <!----> <!----> 
      <div class="v-input v-text-field theme--light">
         <div class="v-input__control">
            <div class="v-input__slot">
               <div class="v-text-field__slot"><label aria-hidden="true" class="v-label theme--light" style="left: 0px; position: absolute;">Ville</label><input aria-label="Ville" type="text"></div>
            </div>
            <div class="v-text-field__details">
               <div class="v-messages theme--light">
                  <div class="v-messages__wrapper"></div>
               </div>
            </div>
         </div>
      </div>
   </div>
   <div class="flex xs12 sm12 md12" style="padding: 0px;">
      <!----> <!----> <!----> 
      <div class="v-input v-text-field theme--light">
         <div class="v-input__prepend-outer">
            <div class="v-input__icon v-input__icon--prepend"><i aria-hidden="true" class="v-icon material-icons theme--light">smartphone</i></div>
         </div>
         <div class="v-input__control">
            <div class="v-input__slot">
               <div class="v-text-field__slot"><label aria-hidden="true" class="v-label theme--light" style="left: 0px; position: absolute;">Numéro de téléphone</label><input aria-label="Numéro de téléphone" type="text"></div>
            </div>
            <div class="v-text-field__details">
               <div class="v-messages theme--light">
                  <div class="v-messages__wrapper"></div>
               </div>
            </div>
         </div>
      </div>
   </div>
   <div class="flex xs12 sm12 md12" style="padding: 0px;">
      <!----> <!----> <!----> 
      <div class="v-input v-text-field theme--light">
         <div class="v-input__prepend-outer">
            <div class="v-input__icon v-input__icon--prepend"><i aria-hidden="true" class="v-icon fa fa-globe-europe theme--light"></i></div>
         </div>
         <div class="v-input__control">
            <div class="v-input__slot">
               <div class="v-text-field__slot"><label aria-hidden="true" class="v-label theme--light" style="left: 0px; position: absolute;">Nationalité</label><input aria-label="Nationalité" type="text"></div>
            </div>
            <div class="v-text-field__details">
               <div class="v-messages theme--light">
                  <div class="v-messages__wrapper"></div>
               </div>
            </div>
         </div>
      </div>
   </div>
</div>
vue-test-utils vue.js jestjs css
1 Answers

I think the reason wrapper.find('input:nth-of-type(3)') doesn't work is because your inputs aren't siblings with the same parent. And the reason wrapper.findAll('input').at(3) works is because it traverses the entire DOM to look for the inputs and create an array from which it fetches the 3rd element

user_24272370
Related