मैं VueJS में गणना गुणों का परीक्षण कैसे कर सकता हूं?

Question

मैं वू सीएलआई से VueJS का उपयोग कर रहा हूँ। तो मेरे सभी घटक .vue प्रारूप में हैं।

मेरे घटकों में से एक में, मेरे पास डेटा अनुभाग में fields नामक एक सरणी है।

//Component.vue 
data() { 
    return { 
    fields : [{"name" : "foo", "title" : "Foosteria"}, {"name" : "bar", "title" : "Barrista"}] 
    } 
} 

मैं एक परिकलित प्रॉपर्टीfields

//Component.vue 
computed : { 
    subsetOfFields() { 
     // Something else in component data determines this list 
    } 
} 

के एक सबसेट मैं jasmine इस तरह मेरी इकाई परीक्षण के सभी सेट किया हुआ हो कि है और वे ठीक काम करते हैं।

//Component.spec.js 
import Vue from 'vue' 
import MyComponent from 'Component.vue' 
describe("Component test", function() { 
     var myComponentVar = new Vue(MyComponent); 
     var vm = myComponentVar.$mount(); 

     beforeEach(function() { 
     vm = myComponentVar.$mount(); 
    ); 

     afterEach(function() { 
     vm = myComponentVar.$destroy(); 
     }); 

     it("First spec tests something", function() { 
      ... 
     }); 

}); 

सब कुछ, spec अंदर कुछ कर रही है, तो data वस्तुओं पर दावे चल बस ठीक काम करता है। हालांकि, subsetOfFields पर एक दावा चलाना हमेशा खाली सरणी देता है। ऐसा क्यों? इसका परीक्षण करने में सक्षम होने के लिए मुझे क्या करना चाहिए?

FYI करें, मैं भी कल्पना एक और describe ब्लॉक के अंदर घोंसला बनाने से और फिर एक beforeEach जो fields सरणी initializes जोड़ने की कोशिश की। काम नहीं किया।

हालांकि, सामान्य beforeEach फ़ंक्शन के अंदर fields प्रारंभ करना कार्य किया। लेकिन मैं अन्य चश्मा के लिए उस नकली डेटा के साथ fields सरणी शुरू करना नहीं चाहता हूं।

Answer 1

मैं इस लिंक है कि परीक्षण और अनुभाग आप है को देखने के लिए Vue.nextTick (...) अनुभाग

https://alligator.io/vuejs/unit-testing-karma-mocha/

ब्लॉक के बारे में मैं बात कर रहा हूँ की आवश्यकता होगी के बारे में बात में आए नीचे है:

import Vue from 'vue'; 
// The path is relative to the project root. 
import TestMe2 from 'src/components/TestMe2'; 

describe('TestMe2.vue',() => { 
    ... 
    it(`should update when dataText is changed.`, done => { 
    const Constructor = Vue.extend(TestMe2); 

    const comp = new Constructor().$mount(); 

    comp.dataProp = 'New Text'; 

    Vue.nextTick(() => { 
     expect(comp.$el.textContent) 
     .to.equal('New Text'); 
     // Since we're doing this asynchronously, we need to call done() to tell Mocha that we've finished the test. 
     done(); 
    }); 
    }); 
});