使用 vue 的快照测试失败并显示“TypeError：无法读取未定义的属性”

Question

该组件本身可以在页面上正常工作，没有错误。

故事书也是如此，唯一的问题是单元测试。

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

有什么明显的我做错了吗？ 有一个计算属性，它在组件上中断。 似乎它无法访问会话数据（说未定义），我不确定为什么，因为它在 defaultprops 中。

这是它显示在组件中的计算属性中断的地方，这显示在快照错误上。

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

任何帮助将非常感激！

Answer 1

如果this.chartData是undefined undefined

const { sessions } = this.chartData ? this.chartData : {};

问题在于您正在解构chartData ，并且您希望三元语句的返回值是包含sessions属性的 object 。
如果chartData undefined ，则会导致：

const { sessions } = {};

您可以通过添加一个空的sessions属性来解决这个问题：

const { sessions } = this.chartData ? this.chartData : { sessions: {} };

或者，更短的，使用可选链接：

const sessions = this.chartData?.sessions || {};