如何使用 store 和 propsData 挂载 Nuxt 组件以进行 Jest 测试

Question

几天来我一直在努力寻找这个问题的答案 - 希望有人能提供帮助！

我在 NuxtJS 中有一个工作项目，包括 Vuex 存储和模块。应用程序中的一切都运行良好，我可以在我的代码中使用 this.$store.dispatch('cart/updateShippingAddress', addressObject) 没有任何问题。

现在我正在使用 shallowMount 在 Jest 中编写我的测试对象。过去，我将 propsData 和数据传递给正在安装的组件，例如：

const testProps= { someData: 'goes here' }
const testData = function () {
   return {}
}
const options = { propsData: testProps, data: testData }

然后当我安装包装器时，我使用： await wrapper = shallowMount(Component, options) - 这很好用。

现在，当我涉及 Vuex 商店时，我使用 const wrapper = shallowMount(Actions, { store, localVue }) 创建商店也很有效。

但是我如何使用 propsData 和 Vuex Store shallowMount 组件？？？我已经尝试了我能想到的所有参数排列，并且每次都没有正确传递商店或 propsData。它一定是类似于 shallowMount(Component, { store, localVue, options }) 但我似乎无法破解此代码...

Answer 1

你试过了吗shallowMount(Component, { store, localVue, ...options })？

因为store、localVue和任何其他选项必须处于同一级别：

   shallowMount(MyComponent, {
      data,
      propsData,
      localVue,
      store,
    }

根据您提供的行 (shallowMount(Component, { store, localVue, options }))，它给出：

   shallowMount(MyComponent, {
      localVue,
      store,
      options: {
         data,
         propsData
      }
    }

如何使用 store 和 propsData 挂载 Nuxt 组件以进行 Jest 测试

How do I mount a Nuxt component with store and propsData for Jest Testing

store

jestjs

vuex

nuxtjs