Вызов «созданного» метода внутри Jest тестов на Vue.js - PullRequest
Новая
       18

Вызов «созданного» метода внутри Jest тестов на Vue.js

0 голосов
/ 21 мая 2019

Я тестирую свой Activity.vue компонент на Vue.js с помощью Jest.

Мой Activity.vue компонент вызывает метод initializeTable() внутри created(), чтобы инициализировать мое tableRows свойство.

Проблема в том, что когда я запускаю свои тесты, Jest не вызывает метод create () и по этой причине он не инициализирует мое свойство tableRows, тогда тест говорит, что мой tableRows свойство равно [] (исходное состояние).

Как я могу вызвать created() метод, когда я тестирую с помощью Jest?

Я уже пытался вызвать его явновнутри теста (то есть wrapper.vm.$created()), но безрезультатно.

Кто-нибудь знает, как его решить?

Я даю свой код ниже.

Спасибо вам зааванс.

Activity.spec.js 

import { shallowMount } from '@vue/test-utils'
import Activity from '@/views/Activity.vue'
import api from '@/assets/js/api'

const expectedTableRows = [...]

const $t = () => {}

api.getActivity = jest.fn(
  () => Promise.resolve({
    data: [...]
  })
)

describe('Activity.vue', () => {
  it('renders vm.tableRows in created()', () => {
    const wrapper = shallowMount(Activity, {
      mocks: { $t }
    })
    // wrapper.vm.$created()
    expect(wrapper.vm.tableRows).toEqual(expectedTableRows)
  })
})

Activity.vue 

import api from '@/assets/js/api'

export default {
  data () {
    return {
      tableRows: []
    }
  },
  created () {
    this.initializeTable()
  },
  methods: {
    initializeTable () {
      this.loading = true

      api.getActivity().then(response => {
        this.tableRows = response.data
      }).catch(error => {
        this.errorBackend = error
      }).finally(() => {
        this.loading = false
      })
    }
  }
}

РЕДАКТИРОВАТЬ1: Решение

Как описал Хусам Ибрагим, функция является асинхронной, из-за этого мне нужно было провести рефакторинг теста, используя следующие tips , и теперь я смогx это.

Я даю правильный код ниже: 

import flushPromises from 'flush-promises'    // <--

...

describe('Activity.vue', () => {
  it('renders wm.tableRows after created()', async () => {    // <--
    const wrapper = shallowMount(Activity, {
      mocks: { $t }
    })

    await flushPromises()    // <-- 

    expect(wrapper.vm.tableRows).toEqual(expectedTableRows)
  })
})
...