使用 Jest 测试 NUXT.js 和 Vue.js 应用程序。获取“在 mapState() 中找不到 [vuex] 模块命名空间”和“[vuex] 未知操作类型”

Posted

技术标签:

【中文标题】使用 Jest 测试 NUXT.js 和 Vue.js 应用程序。获取“在 mapState() 中找不到 [vuex] 模块命名空间”和“[vuex] 未知操作类型”【英文标题】:Testing a NUXT.js and Vue.js app with Jest. Getting '[vuex] module namespace not found in mapState()' and '[vuex] unknown action type' 【发布时间】:2020-05-21 23:05:09 【问题描述】:

尽管我理解 NUXT 会自动进行命名空间。因此,我无法在我的任何测试模块中测试或引用商店。谁能给我小费?也许我可以在 Nuxt 应用程序中编辑命名空间属性?

下面是组件、存储和测试的代码。

ButtonComponent.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>

buttonComponent.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)
  )
)

buttonComponent.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)
  ,

【问题讨论】:

【参考方案1】:

为了不必在这里再写一遍,我会将您链接到我刚刚发布的一篇文章,该文章介绍了设置过程,以便您可以使用 Jest 测试您的 Nuxt 商店:https://medium.com/@brandonaaskov/how-to-test-nuxt-stores-with-jest-9a5d55d54b28

【讨论】:

使用 nuxt builder 在我的机器上运行 1 次测试大约需要 5 秒。更好的选择是模拟 nuxt 商店。 @ioan 在你自己的代码库中模拟行为是一个糟糕的主意。应该有更好的方法来做到这一点。

以上是关于使用 Jest 测试 NUXT.js 和 Vue.js 应用程序。获取“在 mapState() 中找不到 [vuex] 模块命名空间”和“[vuex] 未知操作类型”的主要内容,如果未能解决你的问题,请参考以下文章

如何使用 jest 在 nuxt.js 中测试 head()

使用 jest 测试 nuxt.js 应用程序时访问 `process.env` 属性

javascript nuxt.js项目中的Jest&vue-test-utils配置

Nuxt.js 中的 Jest 全局插件

如何测试 nuxt.js asyncData 并获取钩子

如何在 Vue.js/Nuxt.js 中为 RepositoryFactory 编写测试