Vue快照测试出现TypeError: Cannot read property of undefined问题求助

问题场景 #

组件在页面及Storybook中运行无报错，但快照单元测试时抛出TypeError: Cannot read property of undefined，报错位置指向组件computed属性gymSeries中访问sessions.length的代码行。

相关代码 #

测试代码片段

import { mount } from '../../vue';
import { createLocalVue } from '@vue/test-utils';
import Vuex from 'vuex';
import SessionGymChart from '@/components/SessionGymChart.vue';

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

const defaultprops = {
  endDateOveride: '',
  totalHours: 0,
  sessionsTotal: 1,
  isLoading: false,
  hasTooMuchData: false,
  swapChart: false,
  chartData: {}
};

describe('SessionGymChart', () => {
  let store;
  beforeEach(() => {
    store = new Vuex.Store({
      state: {
        user: { billing: true },
        chartData: {
          days: 10,
          sessions: [
            {
              id: '324365egdfgfd',
              sessionReference: '056343',
              dateStarted: '2022-08-26T16:23:14.909Z',
              dateEnded: '2022-08-26T16:23:22.000Z',
              userId: 'dfgdfgdfg545645',
              userDisplayName: 'Tester'
            }
          ]
        }
      },
      mutations: {},
      actions: {}
    });
  });

组件报错代码片段

gymSeries() {
  const { sessions } = this.chartData ? this.chartData : {};
> if (sessions.length === 0) return {};
                                       ^
  else {
     const sessionsUsage = sessions.map(x => {
     return {

排查与解决 #

核心问题 #

组件中sessions的解构逻辑存在漏洞：当this.chartData为空对象（比如测试中默认props的chartData: {}），解构得到的sessions为undefined，直接访问sessions.length就会触发报错。页面和Storybook运行正常是因为实际业务场景中chartData始终包含sessions字段，但测试场景未覆盖到空值边界。

修复步骤 #

1. 修复组件空值处理逻辑
   给解构的sessions添加默认空数组，避免出现undefined：

gymSeries() {
  const { sessions = [] } = this.chartData || {};
  if (sessions.length === 0) return {};
  // 后续业务逻辑
}

2. 确保测试用例正确传入props
   在mount组件时，明确传入定义好的defaultprops，避免props未初始化：

// 在测试用例中挂载组件时补充propsData
const wrapper = mount(SessionGymChart, {
  localVue,
  store,
  propsData: defaultprops
});

3. 补充边界测试用例
   添加chartData为空对象、sessions为空数组的测试场景，验证组件的容错性：

it('should handle empty chartData', () => {
  const wrapper = mount(SessionGymChart, {
    localVue,
    store,
    propsData: { ...defaultprops, chartData: {} }
  });
  expect(wrapper.vm.gymSeries).toEqual({});
});

内容的提问来源于stack exchange，提问作者aworkinghuman