Wie testen Sie Vuejs Komponenten bei der Verwendung von Vuex

Question

Ich schreibe Komponententests für meine Vuejs-Komponenten in einer größeren Anwendung. Mein Anwendungsstatus befindet sich allesamt im vuex-Speicher, sodass fast alle meine Komponenten Daten von vuex abrufen.

Ich kann kein funktionierendes Beispiel für Schreibeinheit Test dafür finden. Ich habe

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.

gefunden Aber ich kann nicht ein gutes Beispiel dafür, wie zu testen, diese Komponenten finden. Ich habe eine Menge Wege ausprobiert. Unten ist die einzige Möglichkeit, wie ich Leute gesehen habe. stackoverflow question and answer

Im Grunde sieht es aus wie der

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); 
    }); 
} 

Beachten Sie die "ref" in diesem Beispiel arbeiten, ohne es nicht .

Ist das wirklich der richtige Weg? Es scheint, als ob es schnell unordentlich wird, weil es die Requisiten in die Vorlage als String hinzufügen muss.

Evans Zitat scheint zu implizieren, dass der Speicher direkt zu der untergeordneten Komponente hinzugefügt werden kann (dh nicht das übergeordnete wie das Beispiel).

Wie machst du das?

Answer 1

Die Antwort ist eigentlich sehr einfach, aber nicht dokumentiert.

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

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

Beachten Sie, dass der Speicher an den Konstruktor übergeben wurde. propsData ist derzeit documented, die Option "Geschäft" ist nicht.

Auch wenn Sie Laravel verwenden, gibt es seltsame Probleme mit den Webpack-Versionen, die Sie möglicherweise ausführen.

Das wurde offiziell Laravel-Elixier-webpack-by useing

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

Fehler verursacht.
Wenn Sie das Update haben:

npm install webpack@2.1.0-beta.22 --save-dev

zu diesem https://github.com/JeffreyWay/laravel-elixir-webpack-official/issues/17

Ihre Tests, die Vuex gehören scheinen mit dem

[vuex] must call Vue.use(Vuex)

sogar zu brechen, wenn Sie Vue.use (Vuex)