测试组件 - 挂载钩子中的错误：“TypeError：无法读取未定义的属性 'dispatch'”

Posted 2023-02-22

【中文标题】测试组件 - 挂载钩子中的错误：“TypeError：无法读取未定义的属性 \'dispatch\'”

【英文标题】：Testing component - Error in mounted hook: "TypeError: Cannot read property 'dispatch' of undefined"测试组件 - 挂载钩子中的错误：“TypeError：无法读取未定义的属性 'dispatch'”

【发布时间】：2020-09-01 08:56:50

【问题描述】：

我正在尝试为我的 vue 组件编写一个简单的测试。由于 vue 组件在 mount 时进行异步调用并更新 vuex 存储，因此在 mount 期间会调用 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);
    

【参考方案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'
  
);