我有一個組件，我想在其中測驗正在設定的 v-img 的大小，在我的一生中，我無法弄清楚要連接到什么。我試過抓取代碼周圍的 span 標簽，然后做一個 > div 來獲取 vuetify 生成的 div，這樣我就可以獲取樣式屬性并測驗大小設定是否正確，但它似乎不想這樣做，當我向它添加 .length 時，它每次都回傳 0。
我的 Vue 組件（footer.vue）
<template>
<span >
<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')
});
});
uj5u.com熱心網友回復：
您可能需要 mount 而不是shallowMount，因為v-img 不會被渲染，而是被shallowMount 存根。
來自檔案：“與 mount 一樣，它 (shallowMount) 創建一個 Wrapper，其中包含已安裝和呈現的 Vue 組件，但帶有存根子組件。”
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/364157.html
標籤：Vue.js Vuejs2 玩笑 nuxt.js Vuetify.js
上一篇：使用vuejs使用v-for將陣列中的所有專案附加到div中？
下一篇：在v-for中計算而不是v-if