Vue.js - Daten verloren in Karma/Phantomjs Tests

Question

Ich schreibe einige Unit Tests für eine Vue App. Alles funktioniert gut, wenn ich versuche, den DOM-Inhalt zu testen, aber ich kann nicht auf die Daten meiner Komponenten zugreifen. In der Tat gibt es keine Daten, wenn ich console.log meine Komponente $data Eigenschaft, druckt es ein leeres Objekt, keine anfänglich definierten Daten oder andere Daten. Gar nichts. Hier

ist ein Code

einige vue Komponente

<template> 
    <form @submit.prevent="saveAccount"> 
     <label for="accountType">Tipo de cuenta</label> 
     <select class="form-control" id="accountType" v-model="newAccount.type"> 
      <option v-for="type in accountTypes" v-bind:value="type.value"> 
      {{type.label}} 
      </option> 
     </select> 
    </form> 
</template> 
<script> 
export default { 
    data() { 
    return { 
     accountTypes: [ 
     {value: '1', label: 'Activo'}, 
     {value: '2', label: 'Pasivo'}, 
     {value: '3', label: 'Patrimonio'}, 
     {value: '4', label: 'INTO'} 
     ] 
    } 
    } 
} 
</script> 

Meine Tests

beforeAll(() => { 
    vm = new Vue({ 
     template: '<div><account></account></div>', 
     components: { account } 
    }).$mount() 
    }) 

    afterAll(() => { 
    vm.$destroy(true) 
    }) 

    it('account type',() => { 
    // this pass 
    expect(vm.$el.querySelectorAll('#accountType option').length).toBe(4) 
    const options = vm.$el.querySelectorAll('#accountType option') 
    // here accountTypes is undefined 
    const accountValues = vm.accountTypes.map(type => { 
     return type.value 
    }) 
    options.forEach(option => { 
     expect(accountValues.indexOf(option.value)).not.toBe(-1) 
    }) 
    }) 

Einige Code weggelassen. Also, warum sind meine Komponentendaten leer und gleichzeitig im DOM richtig dargestellt?

Answer 1

Nach einigem Versuch und Irrtum fand ich die Antwort und es ist jetzt ziemlich offensichtlich. Die Sache ist, dass ich am falschen Ort nach Daten gesucht habe. Das vm Objekt, das ich wie diese

definierte

vm = new Vue({ 
    template: '<div><account></account></div>', 
    components: { account } 
}).$mount() 

Ist eine Vue-Instanz, die nur eine Komponente und eine Vorlage Option hat, die Daten, die ich suchte war im Kind dieser Instanz. Also, ich habe auf diese Weise verwenden, um Zugang zu den Daten

const accountInstance = vm.$children[0] 

Dies funktioniert, weil ich zu testen, ein einzelne Kind definierte leicht zu identifizieren. Ich habe auch versucht, vor der Verwendung const accountInstance = new account(), aber das wirft einen Fehler, weil Vue-Komponenten Ar nicht Konstruktoren