在 vue-test-utils 中找到第 n 个元素答案

【问题标题】：Find the nth element in vue-test-utils在 vue-test-utils 中找到第 n 个元素
【发布时间】：2019-10-27 20:08:09
【问题描述】：

我在开玩笑地使用 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>

【问题讨论】：

您也需要共享 HTML 标记才能被检查
我添加了 HTML 标记。
我会假设v-messages__wrapper 是你的wrapper。如果我错了，请纠正我
包装器是一个 vue-test-utils 概念：vue-test-utils.vuejs.org/api/wrapper。它包含整个 HTML
你说得对，我对 nth-of-type 的理解是错误的。将其发布为答案，我会接受。

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

【解决方案1】：

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

【讨论】：