用Vue运行玩笑后，产生“ TypeError：无法读取未定义的属性'xxxx'”

Question

我正在尝试通过Vue开玩笑地进行测试。

以下详细信息。

问题：

• 无法使用shallowMount选项安装。

情况：

1. 使用Vue-test-utils中提供的shallowMount选项安装组件后，运行测试。
2. 引发错误“无法读取未定义的属性'XXXX'

这是我的测试代码。

import myComponent from '@/~';
import Vuex from 'vuex';
import Vuelidate from 'vuelidate';
import { shallowMount, createLocalVue } from '@vue/test-utils';

const localVue = createLocalVue();
localVue.use(Vuex);
localVue.use(Vuelidate);

describe('myComponent~', () => {
  let store;

  beforeEach(() => {
    store = new Vuex.Store({
      modules: {
        user: {
          namespaced: true,
          getters: {
            profile: () => {
              const profile = { name: 'blahblah' };
              return profile;
            },
          },
        },
      },
    });
  });

  describe('profile.name is "blahblah"', () => {
    it('return something~', () => {
      const wrapper = shallowMount(myComponent, {
        localVue,
        store,
        mocks: {
          $api: {
            options: {
              testMethod() {
                return new Promise((resolve, reject) => {
                  resolve('test');
                });
              },
            },
          },
          $i18n: {
            t() {
              return {
                EN: 'EN',
                KO: 'KO',
                JP: 'JA',
                SC: 'zh-CN',
                TC: 'tw-CN',
              };
            },
          },
        },
      });
      expect(wrapper.find('.profile').text()).toBe('blahblah');
    });

我认为问题在于属性没有设置为指定值或像数组或对象这样的空值。

但是我不知道如何在逻辑中正确设置属性。

例如

当错误产生“无法读取未定义的属性'images'”时，

我用这样的相关方法添加到包装器中。

exampleMethod() {
 this.something = this.something.map(item => {
  if (item.detailContent.images) { // <-- the added wrapper is here
   ~~~logic~~~~
  }
 })
}

但是未定义的属性太多了，我也认为这种方式不合适。

我该如何解决这个问题？

已添加

这些是上述示例方法的详细信息：

    exampleMethod() {
      this.something = this.something.map(item => {
        let passValidation = false;
        let failValidation = false;
        if (item.detailContent.images) {
          if (this.detail.showLanguages.includes(item.code)) {
            if (this.configId !== 'OPTION1') {
              item.detailContent.images = item.detailContent.images.map(element => {
                return {
                  ...element,
                  required: true,
                }
              });
            }
            checkValidationPass = true;
          } else {
            if (this.configId !== 'OPTION1') {
              item.detailContent.images = item.detailContent.images.map(element => {
                return {
                  ...element,
                  required: false,
                }
              });
            }
            checkValidationPass = false;
          }
          return {
            ...item,
            required: passValidation,
            warning: failValidation,
          }
        }
      });
      if (this.configId === 'OPTION2') {
        this.checkOption2Validation();
      } else if (this.configId === 'OPTION3') {
        this.checkOption3Validation();
      } else {
        this.checkOption1Validation();
      }
    },

这是'this.something'：

data() {
  return {
    something: []
  }
}

在此处设置detailContent。

    setMethod() {
      this.something = [
        ...this.otherthings,
      ];
      this.something = this.something.map(item => {
        let details1 = {};
        if (this.configId === 'OPTION2') {
          details1 = {
            images: [
              { deviceType: 'PC', titleList: [null, null], imageType: 'IMAGE' },
              { deviceType: 'MOBILE', titleList: [null, null, null] }
            ]
          };
        } else if (this.configId === 'OPTION3') {
          details1 = {
            images: [
              { deviceType: 'PC' },
              { deviceType: 'MOBILE' }
            ],
            links: { linkType: 'EMPTY' },
          };
        }
        let details2 = {
          mainTitle: {
            content: null,
          }
        }
        let checkValidation = false;
        this.detail.detailLanguages.forEach(element => {
          if (element.language === item.code) {
            details1 = { ...element };
            if (!!element.mainTitle) {
              details2 = { ...element };
            } else {
              details2 = {
                ...details2,
                ...element
              };
            }
            if (this.configId !== 'OPTION1') {
              details1.images = details1.images.map(image => {
                return {
                  ...image,
                  required: true,
                }
              });
            }
            checkValidation = true;
          }
        });
        return {
          ...item,
          detailContent: this.configId !== 'OPTION1' ? details1 : details2,
          required: false,
          warning: false,
        }
      });
    },