Невозможно прочитать свойство undefined (Vue, Vuex, Typescript, vue -test-utils, jest) - PullRequest
Новая
       14

Невозможно прочитать свойство undefined (Vue, Vuex, Typescript, vue -test-utils, jest)

0 голосов
/ 24 апреля 2020

Я новичок в тестировании и пытаюсь настроить первые юнит-тесты с помощью vue -test-utils (jest). Я хотел написать первый простой тест, просто проверить, является ли компонент экземпляром Vue, но я получаю ошибку, которую на самом деле не понимаю. Кажется, что мой тест пытается go через компонент и не проходит, потому что он не может прочитать $store.state Я использую вычисленные свойства, которые приходят из состояния vuex. Компонент работает нормально и все импортирует правильно. Что мне здесь не хватает? Я также пытался издеваться над магазином, но это не помогло. У меня установлены ts-jest, vue -jest, jest, @ types / jest и @ vue / test-utils.

моя jest конфигурация в пакете. json: 

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

my test file: 

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 Ответ

0 голосов
/ 27 апреля 2020

Этот вопрос о переполнении стека Ошибка типа: Ошибка чтения свойства 'getters' из неопределенного

помогла мне решить мою проблему. Я изменил вычисленный текст следующим образом: 

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

и использовал mapState из vuex вместо этого, как показано ниже, и он работал как шарм. 

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