无法读取未定义的属性(Vue、Vuex、Typescript、Vue-test-utils、jest)

Question

我是测试新手，我正在尝试用vue-test-utils(jest(设置第一个单元测试。我想写第一个简单的测试，只是检查一个组件是否是Vue实例，但我遇到了一个错误，我真的不明白。我的测试似乎试图通过组件，但失败了，因为它无法读取$store.state。我使用的是来自vuex状态的计算属性。该组件运行良好，并且可以正确导入所有内容。我在这里错过了什么？我也试着嘲笑这家商店，但无济于事。我安装了ts jest、vue jest、jest、@types/jest和@vue/test实用程序。

package.json:中的myjest配置

"testRegex": "(/__tests__/.*|(\.|/)(test|spec))\.(jsx?|tsx?)$",
"moduleFileExtensions": [
"js",
"ts",
"json",
"vue"
],
"transform": {
".*\.(vue)$": "vue-jest",
"^.+\.tsx?$": "ts-jest"
},
"testURL": "http://localhost/"
}
}

我的测试文件：

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

Answer 1

This stackerflow question TypeError:无法读取未定义的属性"getters">

帮我解决了问题。我改变了计算写这样：

get loginErrorMsg() { return this.$store.state.auth.errorMsg; }

并像下面这样使用了vuex的mapState，它就像一个符咒。

@Component({
computed: {
...mapState(["errorMsg", "token"])
}
})
export default class Login extends Vue {...}