@MarkSexton

Как протестировать экшен вызова АПИ в mounted?

Всем привет! Столкнулся с проблемой следующего плана: - необходимо написать юнит тест компонента который диспачит данные вызывая экшен хронилища, а тот в свою очередь делает вызов 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 компонента - тест отрабатывает, а замокать данные в тесте не получается...

Спасибо за внимание.
  • Вопрос задан
  • 45 просмотров
Пригласить эксперта
Ответы на вопрос 1
Nolis
@Nolis
it-гопник
настрой цепочку ACTIONS -> MUTATIONS -> GETTERS, после выполнения твоего запроса в mounted, тащи данные из геттера в computed, должно спасти ситуацию
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы