Question

我将Jest与vue-test-utils一起使用，试图测试子组件是否对父组件中的$emit事件做出反应。

VueJS测试实用程序库提供了parentComponent选项，可在安装/浅装组件时通过。

一切正常，除了即使我用模拟的Vuex存储实例化组件，父组件也会抛出

TypeError：无法读取未定义的属性“状态”

在父组件中的this.$store.state.something.here代码段上。

如何模拟那里的Vuex商店？

组件安装看起来像这样：

const wrapper = shallowMount(ChildComponent, {
  store,
  localVue,
  parentComponent: ParentComponent,
  mocks: {
    $t: msg => msg,
  },
});

关于如何解决此问题的任何想法？

Answer 1

这可能不是对OP问题的完整答案，但是由于我在过去的2小时内一直在调试，最后发现我的问题，因此我希望在此处发布以帮助将来的某个人。

我试图模拟并安装以下组件：

<template>
<div test="object-list-div">
  <h1 test="component-title">{{ objectName }}</h1>
  <table class="table">
    <thead>
        <tr test="table-row-title">
            <th scope="col" test="table-column-title" v-for="(value, name, index) in objectData[0]" :key="index">{{ name }}</th>
        </tr>
    </thead>
    <tbody>
      <tr test="table-row-data" v-for="(ivalue, iname, i) in objectData" :key="i">
        <td test="table-cell-data" v-for="(jvalue, jname, j) in ivalue" :key="j">{{ jvalue }}</td>
      </tr>
    </tbody>
  </table>
</div>

export default  {

    props: [
        'objectName',
        'objectData'
    ],
    computed: {
      visibleColums() {
        return this.$store.state.Config_ShowColumn;
      }
    }
}

具有以下包装代码

 wrapper = shallowMount(ObjectList, {
    mocks: {
      $store: {
        state: {
          Config_ShowColumn: [
            "Field1",
            "Field2",
            "Field3",
            "Field4",
            "Field5",
          ]
        }
      }
    }
  });

我收到OP错误，但在我的情况下，组件在创建时需要两个道具。由于没有收到，因此卡住了。

这现在正在工作：

import { shallowMount } from "@vue/test-utils";
import { expect } from "chai";
import ObjectList from "@/components/Object-List.vue";  

wrapper = shallowMount(ObjectList, {
    propsData: {
      objectName: "Ticket",
      objectData: [
        {
          Field1: "Field1",
          Field2: "Field2",
          Field3: "Field3",
          Field4: "Field4",
          Field5: "Field5",
        },
      ]
    }, 
    mocks: {
      $store: {
        state: {
          Config_ShowColumn: [
            "Field1",
            "Field2",
            "Field3",
            "Field4",
            "Field5",
          ]
        }
      }
    }
  });

希望它对某人有帮助。

Answer 2

尝试了理查德提出的解决方案，但即使他的猜测是正确的，也没有取得太大的成功。

该解决方案远比我想象的要简单，我只是停止实例化Vuex.Store，只是在tFuture.onComplete { _ => info(s"Shutting down the connection") killSwitch.shutdown() } $store中模仿了vue-test-utils，就像这样：

config

我不需要使用Vuex的实际实例，因为我只需要模拟实际数据，因此可以完美地工作。

Answer 3

您如何创建模拟商店？应该是

const storeOptions = {
  state: {...},
  getters: {...},
  mutations: {...}
}
const mockStore = new Vuex.Store(storeOptions)

由于this.$store是未定义的，我怀疑您可能只是将options对象传递给了shallowMount。

如何在VueJS测试实用程序parentComponent中模拟Vuex存储

3 个答案: