如何修复jest+enzyme测试传对象props的React组件时uploadResp未定义错误

错误根因 #

你将jest的beforeEach钩子函数错误放置在it测试用例内部，jest的生命周期钩子仅在describe作用域下、it用例外层定义时才会生效。当前写法中beforeEach不会提前执行，FileUploadRespData始终为初始的undefined值，传递给组件的uploadResp属性也为undefined，因此读取uploadResp.linesProcessed时触发报错。

修复方法 #

方案1：调整钩子函数位置 #

将beforeEach移到it块外层，修改后的FileUploadStatus.test.js代码如下：

import React from 'react';
import { shallow } from 'enzyme';
import FileUploadStatus from './FileUploadStatus';
import { expect, jest } from '@jest/globals';
import toJson from 'enzyme-to-json';
import { FileResponse } from '../../constants/mockdata';

describe('Page File upload status component', () => {
  const fn = jest.fn();
  let FileUploadRespData;

  beforeEach(() => {
    FileUploadRespData = {
      uploadResp: { ...FileResponse },
      fileHead: 'IRI File Upload Status:',
    };
  });

  it('Should test File upload status component', () => {
    const wrapper = shallow(<FileUploadStatus {...FileUploadRespData} />);
    expect(wrapper).toMatchSnapshot();
  });
});

方案2：删除不必要的钩子 #

如果当前describe下只有这一个测试用例，无需使用beforeEach，直接在it内部声明props即可，代码更简洁：

import React from 'react';
import { shallow } from 'enzyme';
import FileUploadStatus from './FileUploadStatus';
import { expect } from '@jest/globals';
import toJson from 'enzyme-to-json';
import { FileResponse } from '../../constants/mockdata';

describe('Page File upload status component', () => {
  it('Should test File upload status component', () => {
    const FileUploadRespData = {
      uploadResp: { ...FileResponse },
      fileHead: 'IRI File Upload Status:',
    };
    const wrapper = shallow(<FileUploadStatus {...FileUploadRespData} />);
    expect(wrapper).toMatchSnapshot();
  });
});

优化建议 #

可以给组件props添加默认值，避免线上环境因参数缺失导致页面报错：

// 修改FileUploadStatus.jsx的参数解构部分
function FileUploadStatus({ 
  fileHead = 'IRI File Upload Status:', 
  uploadResp = { linesProcessed: 0, invalidLineList: [] } 
}) {
  // 原有逻辑不变
}

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