Question

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

package.json中的

我的笑话配置：

    "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

这个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 {...}

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

1 个答案: