Vuex

का उपयोग करते समय आप Vuejs घटक का परीक्षण कैसे करते हैं मैं बड़े संस्करण में अपने vuejs घटकों के लिए यूनिट परीक्षण लिख रहा हूं। मेरा आवेदन राज्य सभी vuex स्टोर में है, इसलिए लगभग सभी मेरे घटक vuex से डेटा खींचते हैं।Vuex

मुझे इसके लिए इकाई परीक्षण लिखने के लिए एक कामकाजी उदाहरण नहीं मिल रहा है। मैं

Where Evan You says:

When unit testing a component in isolation, you can inject a mocked store directly into the component using the store option.

पाया है लेकिन मैं कैसे इन घटकों का परीक्षण करने का एक अच्छा उदाहरण नहीं मिल सकता है। मैंने तरीकों का एक गुच्छा कोशिश की है। नीचे एकमात्र तरीका है जिसे मैंने लोगों को देखा है। stackoverflow question and answer

मूल रूप से यह

test.vue की तरह दिखता है:

<template> 
    <div>test<div> 
</template> 
<script> 
<script> 
    export default { 
     name: 'test', 
     computed: { 
      name(){ 
       return this.$store.state.test; 
      } 
     } 
    } 
    </script>

test.spec.js

import ... 

const store = new Vuex.Store({ 
    state: { 
    test: 3 
    } 
}); 
describe('test.vue',() => { 

    it('should get test from store',() => { 

    const parent = new Vue({ 
     template: '<div><test ref="test"></test></div>', 
     components: { test }, 
     store: store 
    }).$mount(); 

    expect(parent.$refs.test.name).toBe(3); 
    }); 
}

नोट "रेफरी" इस उदाहरण इसके बिना काम नहीं करता है ।

क्या यह वास्तव में ऐसा करने का सही तरीका है? ऐसा लगता है जैसे यह तेजी से गड़बड़ हो जाएगा, क्योंकि इसे एक स्ट्रिंग के रूप में टेम्पलेट में प्रोप जोड़ने की आवश्यकता है।

इवान का उद्धरण यह इंगित करता है कि स्टोर सीधे बच्चे के घटक में जोड़ा जा सकता है (यानी उदाहरण के लिए माता-पिता नहीं)।

आप यह कैसे करते हैं?

स्रोत

2017-04-19 Patrick_Finucane

यह विधि जेएस के लिए बाइबल लोडर के साथ काम नहीं कर रही है लेकिन जेएस के लिए बबल लोडर के साथ है। त्रुटि हमेशा त्रुटि होती है: [vuex] को Vue.use (Vuex) को भी Vue.use (Vuex) के साथ कॉल करना होगा, दोनों आयात vue और आवश्यक vue के साथ। –

उत्तर वास्तव में वास्तव में सरल है लेकिन वर्तमान में दस्तावेज नहीं है।

const propsData = { prop: { id: 1} }; 
    const store = new Vuex.Store({state, getters}); 

    const Constructor = Vue.extend(importedComponent); 
    const component = new Constructor({ propsData, store });

स्टोर को संरक्षक को पास नोट करें। propsData वर्तमान में documented है, "स्टोर" विकल्प नहीं है।

यदि आप लैरवेल का उपयोग कर रहे हैं, तो आपके द्वारा चल रहे वेबपैक संस्करणों के साथ अजीब समस्याएं भी हैं।

[vuex] must call Vue.use(Vuex),

त्रुटि laravel-अमृत-webpack सरकारी उपयोग कर संपन्न हुई थी।
आप ठीक किया था, तो:

npm install [email protected] --save-dev

इस https://github.com/JeffreyWay/laravel-elixir-webpack-official/issues/17

आपका परीक्षण है कि Vuex शामिल के लिए

भी जब आप Vue.use (Vuex) है

[vuex] must call Vue.use(Vuex)

साथ तोड़ने के लिए लग रहे हैं

स्रोत

2017-04-20 18:16:27

यह काम पर प्रतीत होता है लेकिन मुझे थोड़ा चिंतित है कि यह एपीआई के अनियंत्रित पहलू पर निर्भर करता है। क्या किसी के पास मौसम पर कोई जानकारी है या यह एक वैकल्पिक दृष्टिकोण है? – d512

उत्तर

संबंधित मुद्दे