Question

我正在尝试为vue组件编写一个简单的测试。由于vue组件在装入时进行了异步调用并更新了vuex存储，因此在装入期间会调用dispatch，这会破坏现有的单元测试。任何想法如何克服这个？由于我在模拟表数据，因此在运行测试时不需要调用mount（）函数。

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);
    }

Answer 1

您收到此错误消息是因为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'
  }
});

测试组件-安装的挂钩中出现错误：“ TypeError：无法读取未定义的属性'dispatch'

1 个答案: