Question

在Vuex存储操作中，我正在使用this.app.router和一个注入属性$ alert的Nuxt插件。

当我尝试使用Jest测试Vuex存储时，由于两个属性均未定义，因此测试一直失败。

我正在对吸气剂，突变和动作分别进行单元测试，就像here所述的javascript函数一样。

所以不要使用Vue Test Utils或Vuex。

我已经尝试过但没有任何效果的东西：

从Vuex.Store设置新的localVu和vue-test-utils e。
在测试前通过属性app和$alert设置全局变量。

// actions.js
export default {
  async signup({ dispatch, state }, payload) {
      try {
        await dispatch('createUserData', payload)
        await dispatch('setUser', payload)
        this.app.router.push(state.redirectAfterLogin)
      } catch (error) {
        this.$alert.error(`errors.${error.code}`)
      }
  }
}

// actions.spec.js
import actions from '@/store/auth/actions'

describe('Auth store', () => {
  let dispatch
  let state

  test('signup', async () => {
    dispatch = jest.fn()
    state = {
      user: null
    }
    await actions.signup(
      { dispatch, state },
      {
        email: 'test@test.nl',
        password: 'password',
        displayName: 'Test'
      }
    )
    expect(dispatch).toHaveBeenCalledWith('createUserData')
    expect(dispatch).toHaveBeenCalledWith('setUser')
  })
})

有人知道在哪里以及如何在测试文件中将该方法定义为模拟函数吗？

Answer 1

将localVue与Vuex一起使用
模拟$alert Vuex.Store.prototype.$alert = jest.fn().mockReturnValue({})

Answer 2

很简单，分别测试它们时，动作是纯函数在await actions.signup之前添加： actions.$alert ={}; actions.$alert.error =jest.fn(); 甚至最好将其添加到beforeEach函数中

如何使用Nuxt和Jest在Vuex商店测试中访问this.app和/或注入的插件

2 个答案: