IT이야기

Nuxt 및 Jest를 사용한 Vuex 스토어 테스트에서 이.app 및/또는 주입된 플러그인에 액세스하는 방법

cyworld 2022. 5. 5. 10:16
반응형

Nuxt 및 Jest를 사용한 Vuex 스토어 테스트에서 이.app 및/또는 주입된 플러그인에 액세스하는 방법

Vuex 스토어 액션에서는 $alert 속성을 주입하는 이 .app.router와 Nuxt 플러그인을 사용하고 있다.

내가 Jest와 함께 Vuex 스토어를 테스트하려고 할 때 두 속성이 모두 정의되지 않았기 때문에 테스트가 계속 실패한다.

나는 여기서 설명한 것과 같은 자바스크립트 함수로 게터, 돌연변이, 행동을 따로따로 시험하고 있다.

따라서 Vue 테스트 Utils 또는 Vuex를 사용하지 마십시오.

아무 효과 없이 이미 시도한 것:

  • 새로운 것을 설치하다Vuex.Store그리고localVu에서 e.vue-test-utils.
  • 속성 앱으로 전역 변수 설정 및$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')
  })
})

이 방법을 내 시험 파일에 있는 모의 기능으로 어디서 어떻게 정의할 수 있는지 아는 사람 있어?

  1. 사용하다,localVue브룩스와 함께
  2. 모의의$alert Vuex.Store.prototype.$alert = jest.fn().mockReturnValue({})

아주 쉬운 행동은 당신이 그것을 바로 전에 따로 테스트할 때 순수한 기능이다.await actions.signup추가 :actions.$alert ={}; actions.$alert.error =jest.fn();또는 각 함수에 미리 추가

참조URL: https://stackoverflow.com/questions/55949774/how-to-access-this-app-and-or-a-injected-plugin-in-a-vuex-store-test-with-nuxt-a

반응형