如何使用 Nuxt 和 Jest 在 Vuex 商店測試中訪問 this.app 和/或注入的插件

Question

在 Vuex 存儲操作中，我使用 this.app.router 和注入屬性 $alert 的 Nuxt 插件。

當我嘗試使用 Jest 測試 Vuex 商店時，測試一直失敗，因為這兩個屬性都未定義。

我正在將 getter、mutations 和 action 作為一個 javascript 函數分別進行單元測試，就像 這里描述的那樣。

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

我已經嘗試過但沒有任何效果：

• 從vue-test-utils設置一個新的Vuex.Store和localVu 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

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

Answer 2

當您在await actions.signup add 之前單獨測試它們時，很容易操作是純函數： actions.$alert ={}; actions.$alert.error =jest.fn(); actions.$alert ={}; actions.$alert.error =jest.fn(); 甚至更好地將它添加到 beforeEach 函數中