Javascript 测试组件-安装的挂钩中出现错误：“0”；TypeError:无法读取属性'；调度'；“未定义”的定义；

我正在尝试为我的vue组件编写一个简单的测试。由于vue组件在装载时进行异步调用并更新vuex存储，因此在装载期间调用了

dispatch

，这破坏了我现有的单元测试。你知道如何克服这个问题吗？因为我在模拟表数据，所以在运行测试时不需要调用mounted（）函数

MyTable.spec.js

     const wrapper = shallowMount(MyTable, {
        propsData: {
            tableData: [
                {
                    "product_id":10826345236,
                    "name":"T-Shirt"
                }
            ],
            columns: ['product_id', 'name'],
            headings: ['Product ID', 'Name'],
            actionType: 'loadProducts'
        }
    });
    ...

MyTable.vue

    ...
    data() {
        return {
            options: {
                ...
            }
        };
    },
    methods: {
        getHeadings() {
            let headings = {};
            this.columns.map((key, i) => headings[key] = this.headings[i]);
            return headings;
        },
        setColumnClasses() {
            let classes = {};
            this.columns.map((key) => classes[key] = key);
            return classes;
        },
        loadRecords(actionType) {
            this.$store.dispatch(actionType);
        }
    },
    props: {
        tableData: {
            type: Array,
            required: true
        },
        columns: {
            type: Array,
            required: true
        },
        actionType: {
            type: String,
            required: true
        },
        headings: {
            type: Array,
            required: true
        },
        ...
    },
    mounted() {
        this.loadRecords(this.actionType);
    }

---

您收到此错误消息是因为Vue（安装时）希望定义

this.$store

，并且它可能在您的应用程序中，但您没有导入它，也没有模拟它

以下是您提供的测试功能代码：

const wrapper = shallowMount(MyTable, {
  propsData: {
    tableData: [
      {
        "product_id":10826345236,
        "name":"T-Shirt"
      }
    ],
    columns: ['product_id', 'name'],
    headings: ['Product ID', 'Name'],
    actionType: 'loadProducts'
  }
});

以下是您需要添加的内容：

import store from '../path/to/store.js';
import { createLocalVue, shallowMount } from '@vue/test-utils';

// You will want to create a local Vue instance for testing purposes: https://vue-test-utils.vuejs.org/api/#createlocalvue
const localVue = createLocalVue();

// This tells the local Vue instance to use Vuex for the store mechanism.
localVue.use(Vuex);

const wrapper = shallowMount(MyTable, {
  localVue, // Bind the local Vue instance when we shallow-mount the component.
  store, // Bind the store so all of the methods are available when invoked.
  propsData: {
    tableData: [
      {
        "product_id":10826345236,
        "name":"T-Shirt"
      }
    ],
    columns: ['product_id', 'name'],
    headings: ['Product ID', 'Name'],
    actionType: 'loadProducts'
  }
});