单元测试 - 无法读取未定义的属性 (Vue, Vuex, Typescript, vue-test-utils, jest)

我刚开始接触测试，正在尝试用 vue-test-utils(jest) 设置第一个单元测试。我想写第一个简单的测试，只检查组件是否是 Vue 实例，但我遇到了一个错误，我不太理解。看起来我的测试试图访问组件，但失败了，因为它无法读取 $store.state。我使用了来自 vuex 状态的计算属性。组件本身运行正常，并且导入一切都是正确的。我哪里做错了吗？我也尝试过模拟 store，但没有用。我已经安装了 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()
  }) 
})

答案＃1

这个 StackOverflow 问题 TypeError: 无法读取未定义的属性 'getters'

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

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

并使用了 vuex 中的 mapState，如下所示，并且效果非常好。

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