vue-test-utils: Как проверить логику в ловушке жизненного цикла mount () (с помощью vuex)? - PullRequest
Новая
       33

vue-test-utils: Как проверить логику в ловушке жизненного цикла mount () (с помощью vuex)?

0 голосов
/ 10 мая 2018

Я пытаюсь написать модульный тест для логики в хуке жизненного цикла Vue mounted(), но мне не везет. Кажется, проблема в том, что mounted() никогда не вызывается, когда компонент монтируется с использованием vue-test-utils mount. Вот компонент Vue, который я пытаюсь протестировать: 

<template>
  <div></div>
</template>

<script>   
export default {
  name: 'MyComponent',
  mounted () {
    this.$store.dispatch('logout')
  }
}
</script>

И сам тест: 

import { mount, createLocalVue } from '@vue/test-utils'
import Vuex from 'vuex'
import MyComponent from '@/components/MyComponent'

const localVue = createLocalVue()

localVue.use(Vuex)

describe('MyComponent.vue', () => {
  let store
  let actions

  beforeEach(() => {
    actions = {
      logout: jest.fn().mockName('logout')
    }
    store = new Vuex.Store({
      state: {},
      actions
    })
  })

  it('calls store "logout" action', () => {
    mount(MyComponent, { localVue, store })
    expect(actions.logout).toHaveBeenCalled()
  })
})

Однако это не удается, если expect(logout).toHaveBeenCalled() утверждает false.

Если я вызываю поддельное действие хранилища напрямую с помощью actions.logout(), тест проходит успешно, и у меня есть другие тесты, которые также вызывают действия хранилища для таких вещей, как нажатие кнопки, и те, которые также проходят, поэтому проблема определенно возникает с Подключенный () крюк жизненного цикла.

Есть мысли?

(vue 2.5.4 и vue-test-utils 1.0.0-beta-.15)

1 Ответ

0 голосов
/ 10 июля 2018

Не знаю, чем это отличается, но я абстрагировал макет магазина для другого файла, и теперь все вроде работает.

mocks.js

export const storeMock = Object.freeze({
  state: {},
  actions: {
    logout: jest.fn().mockName('logout')
  },
})

test.spec.js

import { shallowMount, createLocalVue } from '@vue/test-utils'
import Vuex from 'vuex'
import { storeMock } from './mocks.js' 
import MyComponent from '@/components/MyComponent'

const localVue = createLocalVue()

localVue.use(Vuex)

describe('MyComponent.vue', () => {
  let options

  beforeEach(() => {
    jest.clearAllMocks()
    const store = new Vuex.Store(storeMock)
    options = { store, localVue }
  })

  it('calls store "logout" action', () => {
    shallowMount(MyComponent, options)
    expect(storeMock.actions.logout).toHaveBeenCalled()
  })
})
...