在vue-test-utils

时间：2019-06-13 09:00:52

标签： css vue.js jestjs vue-test-utils

我正在开玩笑地使用vue-test-utils。 我的包装器包含9个输入元素，我想获取第三个。 此解决方案有效：

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

根据文档（https://vue-test-utils.vuejs.org/api/selectors.html），我应该能够使用CSS伪选择器，但这不起作用：

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

使用这种方法，我只能得到第一个输入：

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

我滥用CSS选择器吗？

我的包装HTML如下：

<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>

1 个答案:

答案 0 :(得分：1)

我认为wrapper.find('input:nth-of-type(3)')不起作用的原因是，您的输入不是同一个父母的兄弟姐妹。 wrapper.findAll('input').at(3)起作用的原因是，它遍历整个DOM来查找输入并创建一个数组，并从中获取第三个元素

相关问题
最新问题