unit-testing - utils - vuex read state

¿Cómo se prueban los componentes de Vuejs cuando se usa Vuex?

Question

Estoy escribiendo pruebas unitarias para mis componentes vuejs en una aplicación más grande. El estado de mi aplicación está en la tienda vuex, por lo que casi todos mis componentes extraen datos de vuex.

No puedo encontrar un ejemplo que funcione para escribir la prueba unitaria para esto. he encontrado

Donde dice Evan You:

Cuando la unidad prueba un componente de forma aislada, puede inyectar una tienda simulada directamente en el componente utilizando la opción de tienda.

Pero no puedo encontrar un buen ejemplo de cómo probar estos componentes. Lo he intentado de varias maneras. A continuación se muestra la única forma en que he visto a la gente hacerlo. pregunta y respuesta de stackoverflow

Básicamente parece que

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

Tenga en cuenta que el "ref" este ejemplo no funciona sin él.

¿Es esta la manera correcta de hacer esto? Parece que se volverá desordenado rápidamente, porque requiere agregar los puntales a la plantilla como una cadena.

La cita de Evan parece implicar que la tienda se puede agregar directamente al componente secundario (es decir, no a los padres como en el ejemplo).

¿Cómo haces eso?

Answer 1

La respuesta es realmente simple pero no documentada actualmente.

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

Tenga en cuenta que la tienda pasó al constructor. propsData está actualmente documentado , la opción "tienda" no.

Además, si está utilizando Laravel, existen problemas extraños con las versiones de paquetes web que puede estar ejecutando.

los

[vuex] debe llamar a Vue.use (Vuex),

El error fue causado por el uso de laravel-elixir-webpack-official.
Si hiciste la corrección:

npm install [email protected] --save-dev

para esto https://github.com/JeffreyWay/laravel-elixir-webpack-official/issues/17

Sus pruebas que incluyen Vuex parecen romper con el

[vuex] debe llamar a Vue.use (Vuex)

incluso cuando tienes Vue.use (Vuex)