vue-test-utils：如何在 mounted() 生命周期挂钩（使用 vuex）中测试逻辑？

Question

我正在尝试为 Vue 的 mounted() 生命周期挂钩中的逻辑编写单元测试，但运气不佳。问题似乎是，当使用 vue-test-utils mount 挂载组件时，mounted() 永远不会被调用。这是我要测试的 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() 调用模拟存储操作，测试通过，我还有其他测试也调用存储操作，如按下按钮，这些也通过，所以问题肯定似乎与 mounted() 生命周期钩子有关。

有什么想法吗？

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

Answer 1

不确定它有什么不同，但我将商店模拟抽象到另一个文件，现在一切似乎都正常了。

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()
  })
})

Answer 2

没有将商店模拟抽象到另一个文件，并且没有 beforeEach 的方法略有不同（由于某种原因破坏了我的测试）。

import { createLocalVue, shallowMount } from "@vue/test-utils";
import Vuex from "vuex";
import MyComponent from "@/components/MyComponent.vue";

describe("MyComponent", () => {
  const localVue = createLocalVue();
  localVue.use(Vuex);

  const actions = {
    logout: jest.fn()
  };
  const store = new Vuex.Store({ actions });

  const wrapper = shallowMount(MyComponent, {
    localVue,
    store
  });

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

vue-test-utils：如何在 mounted() 生命周期挂钩（使用 vuex）中测试逻辑？

vue-test-utils: How to test logic within mounted() lifecycle hook (with vuex)?

unit-testing

vue.js

jestjs

vuex

vue-test-utils