मेरे पास एक घटक है जिसमें मैं परीक्षण करना चाहता हूं कि एक वी-आईएमजी के आकार को सेट किया जा रहा है, मेरे जीवन के लिए मैं यह नहीं समझ सकता कि क्या हुक करना है। मैंने कोड के चारों ओर स्पैन टैग को पकड़ने की कोशिश की है और फिर vuetify द्वारा जेनरेट किए गए div को प्राप्त करने के लिए एक> div कर रहा है ताकि मैं स्टाइल एट्रिब्यूट प्राप्त कर सकूं और आकार का परीक्षण ठीक से सेट कर सकूं, लेकिन ऐसा नहीं लगता है ऐसा करें, जब मैं इसमें लंबाई जोड़ता हूं तो यह हर बार 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')
});

});
0
Jamie 22 नवम्बर 2021, 17:06
क्या आपको कोई त्रुटि संदेश प्राप्त होता है? Findall शायद सभी ढूँढना चाहिए, और ऐसा लगता है कि आप एक ' के बाद > div . को याद कर रहे हैं
 – 
roggan87
22 नवम्बर 2021, 17:38
वह उद्धरण और खोज के लिए सिर्फ एक टाइपो था। कोई त्रुटि नहीं, यह लंबाई के लिए 0 लौटा रहा है। जब मैं एचटीएमएल को देखता हूं तो ऐसे divs होते हैं जो vuetify स्पैन टैग के अंदर बनाता है, इसलिए मुझे नहीं पता कि जेस्ट उन्हें क्यों नहीं देखता है।
 – 
Jamie
22 नवम्बर 2021, 17:43

1 उत्तर

सबसे बढ़िया उत्तर

आप शायद उथले माउंट के बजाय माउंट चाहते हैं, क्योंकि वी-आईएमजी का प्रतिपादन नहीं किया गया है, लेकिन उथले माउंट के साथ स्टब किया गया है।

दस्तावेज़ीकरण से: "माउंट की तरह, यह (sallowMount) एक बनाता है रैपर जिसमें माउंटेड और रेंडर किए गए Vue कंपोनेंट होते हैं, लेकिन स्टब्ड चाइल्ड कंपोनेंट्स के साथ।"

1
roggan87 22 नवम्बर 2021, 17:44
आपका स्वागत है :)
 – 
roggan87
22 नवम्बर 2021, 18:06