无法读取未定义的属性（Vue、Vuex、Typescript、vue-test-utils、jest）答案

【问题标题】：Cannot read property of undefined (Vue, Vuex, Typescript, vue-test-utils, jest)无法读取未定义的属性（Vue、Vuex、Typescript、vue-test-utils、jest）
【发布时间】：2020-08-08 07:03:54
【问题描述】：

我是测试新手，我正在尝试使用 vue-test-utils(jest) 设置第一个单元测试。我想写第一个简单的测试，只是检查一个组件是否是一个Vue实例，但是我得到一个错误，我不太明白。似乎我的测试试图通过组件并失败，因为它无法读取$store.state 我正在使用来自 vuex 状态的计算属性。该组件工作正常并正确导入所有内容。我在这里想念什么？我也试图嘲笑商店，但没有帮助。我安装了 ts-jest、vue-jest、jest、@types/jest 和 @vue/test-utils。

我在 package.json 中的 jest 配置：

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

【问题讨论】：

标签： typescript unit-testing vue.js jestjs vuex

【解决方案1】：

这个stackoverflow问题TypeError: Cannot read property 'getters' of undefined

帮助我解决了我的问题。我把计算改成这样写：

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

并使用来自 vuex 的 mapState 代替如下所示，它就像一个魅力。

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

【讨论】：