Как получить переменную this, определенную в модульном тесте компонента vuejs

Я пытаюсь использовать mocha-webpack в сценарии npm для тестирования компонента vuejs. В тесте я издеваюсь над магазином vuex следующим образом:

const vm = new Vue({
        template: '<div><test></test></div>',
        store: new Vuex.Store(mockedStore),
        components: {
            'test': TestItems
        }
    }).$mount()

Я вызываю метод компонента для тестирования, например:

vm.$options.components.test.methods.foo()

В компоненте у меня есть код, который обращается к магазину, например:

this.$store.commit('bar', data)

Проблема в том, что когда доходит до этого момента, я получаю эту ошибку:

'Cannot read property \'commit\' of undefined' undefined undefined

Я проверил, что «this» в данном контексте не определено. Когда я запускаю приложение, определяется this и имеет значение $ store. Как заставить его работать в контексте модульного теста?


node.js unit-testing vue.js mocha.js mocha-webpack
person Scott Anderson    schedule 01.04.2017    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вы вызываете метод foo компонента test без экземпляра test. Попробуйте сделать что-нибудь вроде этого:

const vm = new Vue({
  template: '<div><test ref="test"></test></div>',
  store: new Vuex.Store(mockedStore),
  components: {
    'test': TestItems
  }
}).$mount()

vm.$refs.test.foo()

foo будет вызываться с vm.$refs.test как this.

person Decade Moon    schedule 01.04.2017
comment
Спасибо, что исправили. Мне также нужно было импортировать vue из vue / dist / vue.js, чтобы скомпилировать шаблон, поскольку модульный тест не находится в файле .vue. - person Scott Anderson; 01.04.2017