开玩笑测试 Vuetify v-img答案

【问题标题】：Jest testing Vuetify v-img开玩笑测试 Vuetify v-img
【发布时间】：2022-01-01 03:07:50
【问题描述】：

我有一个组件，我想在其中测试正在设置的 v-img 的大小，对于我的生活，我无法弄清楚要挂钩什么。我尝试抓取围绕代码的 span 标签，然后执行 > div 以获取由 vuetify 生成的 div，以便我可以获取样式属性并测试大小是否设置正确，但它似乎不想这样做，当我向它添加 .length 时，它每次都返回 0。

我的 Vue 组件（footer.vue）

    <template>
      <span class="footerImagesLayout">
        <v-img 
         :height="easg_logo_height"
         :src="$store.state.app.easg_logo.src"
         :width="easg_logo_width"
        contain
         />
     <v-img 
         :height="oma_logo_height"
         :src="$store.state.app.oma_logo.src"
         :width="oma_logo_width"
        contain
         />
       </div>
    </template>
<script>
   export default {
      data(){
         easg_logo_width: this.$store.state.app.easg_logo.top.width, 
         easg_logo_height: this.$store.state.app.easg_logo.top.height,
         oma_logo_width: this.$store.state.app.oma_logo.top.width,
         oma_logo_width: this.$store.state.app.oma_logo.top.width,
      }
   }
</script>

我的测试（footer.test.js）

import {shallowMount, createLocalVue} from '@vue/test-utils'
import Vuex from 'vuex';
import Footer from '@components/layouts/default/footer'
import Vuetify from 'vuetify';

const vuetify = new Vuetify();
const localVue = createLocalVue();
localVue.use(Vuex);

describe("Footer tests", ()=> {
  let wrapper;
  let store;
  let state;


beforeEach(() => {
   state= {
     app: {
        easg_logo:{
           src: "~/assets/images/easg.jpg",
           text: "EASG", 
           top:{
             height: 72,
             width: 82
           }
         },
    oma_logo:{
           src: "~/assets/images/oma.jpg",
           text: "OMA", 
           top:{
             height: 72,
             width: 82
           }
         }
      }
}

store = new Vuex.Store({
            modules:{
               state
            }
     })

})

test('store test', ()=> {
   wrapper = shallowMount(Footer, {store, localVue, vuetify})
   console.log(wrapper.findAll('.footerImagesLayout > div').length) // this returns 0
   const a = 'a'
    expect(a).toBe('a')
});

});

【问题讨论】：

您是否收到任何错误消息？ findall 应该是 findAll，看起来你缺少一个 ' after > div
这只是引用和 findAll 的拼写错误。没有错误，它返回 0 作为长度。当我查看 html 时，vuetify 在 span 标签内创建了 div，所以我不知道为什么 Jest 看不到它们。

标签： vue.js vuejs2 jestjs nuxt.js vuetify.js

【解决方案1】：

您可能想要 mount 而不是 shallowMount，因为 v-img 不会被渲染，而是使用 shallowMount 存根。

From the documentation: “和 mount 一样，它 (shallowMount) 创建了一个 Wrapper，其中包含已安装和渲染的 Vue 组件，但带有存根的子组件。”

【讨论】：