programing

Jest를 사용하여 NUXT.js 및 Vue.js 앱을 테스트합니다.'mapState()에서 [vuex] 모듈 네임스페이스를 찾을 수 없음' 및 '[vuex] 알 수 없는 작업 유형'을 가져오는 중

yoursource 2022. 12. 31. 20:37
반응형

Jest를 사용하여 NUXT.js 및 Vue.js 앱을 테스트합니다.'mapState()에서 [vuex] 모듈 네임스페이스를 찾을 수 없음' 및 '[vuex] 알 수 없는 작업 유형'을 가져오는 중

NUXT가 자동으로 네임스페이스 처리를 하는 것은 이해하지만,이 때문에 테스트 모듈 중 어느 것도 스토어를 테스트하거나 참조할 수 없습니다.누가 팁 좀 주실래요?Nuxt 앱에서 네임스페이스 속성을 편집할 수 있는 곳이 있을까요?

아래는 컴포넌트, 매장, 테스트 코드입니다.

버튼 컴포넌트vue:

<template>
  <v-container>
    <v-btn @buttonClick v-model="value"></v-btn>
  </v-container>
</template>

<script>
import { mapState, mapActions } from 'vuex'

export default {
  data: {
      return {
          value: 25
      }
  }
  methods: {
    buttonClick(event) {
      this.$store.dispatch('buttonComponent/setNewValue', valuePassedIn)
    },
  },
}
</script>

<style scoped></style>

버튼 Component.spec.js:

import Component from '../../Component'
import { mount, createLocalVue } from '@vue/test-utils'
import expect from 'expect'
import Vue from 'vue'
import Vuex from 'vuex'
import Vuetify from 'vuetify'

const localVue = createLocalVue()
localVue.use(Vuex)
Vue.use(Vuetify)

describe('Component', () => {
  let store
  let vuetify
  let actions
  beforeEach(() => {
    actions = {
        actionClick: jest.fn()
    }
    store = new Vuex.Store({
      actions,
    })
    vuetify = new Vuetify()
  })



  it('method sends value to store when button is clicked', async () => {
    const wrapper = mount(Component, {
      store,
      localVue,
      vuetify,
    })
    wrapper.find('.v-btn').trigger('click')
    expect(actions.actionClick).toHaveBeenCalledWith('buttonComponent/setNewValue', 25)
  })
})

버튼 Component.js:

export const state = () => ({
  value: 0,
})

export const mutations = {
  SET_TO_NEW_VALUE(state, value) {
    state.value = value
  },
}

export const actions = {
  setNewValue({ commit }, value) {
    commit('SET_TO_NEW_VALUE', value)
  },
}

여기에 다시 쓸 필요가 없도록 방금 올린 기사에 링크하여 셋업 프로세스를 안내하고 Jest를 사용하여 Nuxt 스토어를 테스트합니다.https://medium.com/ @brandonaaskov / how-to-nuxt - stores - with - 9a5d55b28

언급URL : https://stackoverflow.com/questions/60085863/testing-a-nuxt-js-and-vue-js-app-with-jest-getting-vuex-module-namespace-not

반응형