如何在Vuex Store测试中使用NUXT和Jest访问此件

Question

在vuex商店操作中，我正在使用this.app.router和一个注入属性$ alter的nuxt插件。

当我试图用Jest测试Vuex商店时，测试一直失败，因为两个属性都是未定义的。

我正在单位测试getter，突变和动作，作为JavaScript函数，如此处所述。

因此不使用VUE测试UTIL或VUEX。

我已经尝试过没有任何效果的方法：

• 从vue-test-utils设置新的Vuex.Store和localVuE。
• 在测试之前，设置具有属性应用程序和$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: '[e-mail]',
        password: 'password',
        displayName: 'Test'
      }
    )
    expect(dispatch).toHaveBeenCalledWith('createUserData')
    expect(dispatch).toHaveBeenCalledWith('setUser')
  })
})

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

Answer 1

1. 使用vuex使用 localVue
2. 模拟$alert Vuex.Store.prototype.$alert = jest.fn().mockReturnValue({})

Answer 2

当您分别测试时，非常简单的动作是纯粹的功能在await actions.signup添加之前： actions.$alert ={}; actions.$alert.error =jest.fn();甚至最好将其添加到each函数