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

Question

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

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

现在我正在 Jest 中使用 shallowMount 编写我的测试对象。过去，我将 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 或 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
      }
    }