pruebas unitarias - No se puede leer la propiedad de undefined (Vue, Vuex, Typescript, vue-test-utils, jest)
Soy nuevo en pruebas y estoy intentando configurar mis primeras pruebas unitarias con vue-test-utils (jest). Quería escribir la primera prueba simple, solo para comprobar si un componente es una instancia de Vue, pero estoy obteniendo un error que realmente no entiendo. Parece que mi prueba intenta recorrer el componente y falla porque no puede leer $store.state. Estoy usando propiedades computadas que provienen del estado de vuex. El componente funciona bien e importa todo correctamente. ¿Qué me estoy perdiendo aquí? También intenté simular el store, pero no ayudó. Tengo instalados ts-jest, vue-jest, jest, @types/jest y @vue/test-utils.
mi configuración de jest en package.json:
"testRegex": "(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$",
"moduleFileExtensions": [
"js",
"ts",
"json",
"vue"
],
"transform": {
".*\\.(vue)$": "vue-jest",
"^.+\\.tsx?$": "ts-jest"
},
"testURL": "http://localhost/"
}
}
mi archivo de prueba:
import Login from '../Login.vue'
import { createLocalVue } from '@vue/test-utils'
import Vuex from 'vuex'
const localVue = createLocalVue()
localVue.use(Vuex)
describe('Login.vue', () => {
let state: any;
let store: any;
beforeEach(() => {
state = {
errorMsg: jest.fn(),
error: jest.fn()
}
store = new Vuex.Store({
state
})
})
it('is a Vue instance', () => {
const wrapper = mount(Login, { store, localVue })
expect(wrapper.isVueInstance()).toBeTruthy()
})
})
Respuesta #1
Esta pregunta de Stack Overflow TypeError: No se puede leer la propiedad 'getters' de undefined
me ayudó a resolver mi problema. Cambié lo escrito en computed de esta manera:
get loginErrorMsg() { return this.$store.state.auth.errorMsg; }
y usé mapState de vuex en su lugar como se muestra a continuación, y funcionó de maravilla.
@Component({
computed: {
...mapState(["errorMsg", "token"])
}
})
export default class Login extends Vue {...}
