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 浅层安装组件？？？我已经尝试了我能想到的所有参数排列，并且每次都没有正确传递 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
      }
    }

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

1 个答案: