Всем привет! Столкнулся с проблемой следующего плана: - необходимо написать юнит тест компонента который диспачит данные вызывая экшен хронилища, а тот в свою очередь делает вызов
API.
Проблема заключается в том, что при монтировании компонента - возвращает
undefinded
Component.vue
<template>
<div>
<ul v-for="item in array" :key="item.id">
<li>
{{ item.name }}
</li>
</ul>
</div>
</template>
<script>
export default {
name: 'Component',
data() {
return {
array: []
}
},
mounted() {
this.$store.dispatch('ACTION').then(data => {
this.array = data
})
}
}
</script>
store.js
ACTION() {
return this.$axios
.get('/api/url')
.then(response => {
if (Object.prototype.hasOwnProperty.call(response, 'error')) {
return false
}
return response.data
})
.catch(error => {
this.$sentry.captureException(error)
})
)
},
Component.spec.js
import { mount, createLocalVue } from '@vue/test-utils'
import Vuex from 'vuex'
import Regions from './Components'
const localVue = createLocalVue()
const array = [
{
name: 'Москва'
},
{
name: 'Cанкт-Петербург'
},
{
name: 'Нижний Новгород'
}
]
localVue.use(Vuex)
describe('component тест', () => {
let actions
let store
beforeEach(() => {
actions = {
ACTION: jest.fn()
}
actions.ACTION.mockReturnValue(array)
store = new Vuex.Store({
actions
})
})
it('верно отрисовывается по полученным данным', () => {
const wrapper = mount(Component, { store, localVue })
console.log(wrapper)
})
})
После запуска тест кейса получаю следующие:
console.log
VueWrapper {
isFunctionalComponent: undefined,
_emitted: [Object: null prototype] {},
_emittedByOrder: [] }
В чем заключается проблема? Когда мокаю данные непосредственно в
data компонента - тест отрабатывает, а замокать данные в тесте не получается...
Спасибо за внимание.
