Enzyme挂载React类组件时出现TypeError: Cannot read property 'child' of undefined

组件代码 #

class Marketing extends PureComponent {

    constructor(props) {
        super(props);

        this.state = this.defaultState(props);
    }

    // Default state of current step
    defaultState = props => {
        const stepData = getStepDataFromPayload("marketing", props.payloadData);
        return {
            displayname: "",
            logourl: "",
            summary: "",
            description: "",
            highlights: [],
            imageurls: [],
            videourls: [],
            redirectUrl: "",
            showCheckBox: false,
            logoCheckbox:false,
            ...stepData
        };
    };

    render(){
        /*Custom Components*/
    }
}
export default Marketing;

测试代码 #

const stepData={
    description: "summary",
    displayname: "mkpl_plugin_gypirtterqusmsyqycjquskpqetnguflwstkbjtc_537831429771052714050",
    highlights: [
        "Cloud management software",
        "Application management",
        "Storage and availability",
        "Networking and security products"
    ],
    imageurls: [
        "https://dev-cdn.market.csp.vmware.com/691fd5ea-44ff-4086-84dd-2ab199d8df9e/media-files/logo_2.png",
        "https://dev-cdn.market.csp.vmware.com/691fd5ea-44ff-4086-84dd-2ab199d8df9e/media-files/logo_2.png",
        "https://dev-cdn.market.csp.vmware.com/691fd5ea-44ff-4086-84dd-2ab199d8df9e/media-files/logo_2.png"
    ],
    islistingproduct: false,
    logourl: "https://dev-cdn.market.csp.vmware.com/691fd5ea-44ff-4086-84dd-2ab199d8df9e/media-files/logo_1.png",
    redirectUrl: "",
    summary: "VMware, Inc. is an American cloud computing and virtualization technology company with headquarters in California.commercially successful com",
    videourls: [
        "https://www.youtube.com/watch?v=SDobPYHk_sQ",
        "https://www.youtube.com/watch?v=rNG5dIVe8vc"
    ]
};

const defaultProps={
    displayname: "",
    logourl: "",
    summary: "",
    description: "",
    highlights: [],
    imageurls: [],
    videourls: [],
    redirectUrl: "",
    showCheckBox: true,
    logoCheckbox: true,
    isListing: true,
    updateActionButtons: jest.fn(),
    ...stepData
};

describe("should render all the inner components", () => {
   it("checking the conditional rendering calls", ()=>{
      const newWrapper= mount(<Marketing {...defaultProps}/> );
   });
});

错误信息 #

执行测试时抛出错误：TypeError: Cannot read property 'child' of undefined

修复方案 #

1. 解决getStepDataFromPayload的依赖问题 #

组件的defaultState方法调用了getStepDataFromPayload("marketing", props.payloadData)，但测试props中未传入payloadData，导致该函数接收undefined参数，可能引发内部错误。有两种解决方式：

方式一：Mock该工具函数

在测试文件顶部，用Jest mockgetStepDataFromPayload，直接返回预设的stepData：

// 替换为该函数实际所在的文件路径
jest.mock('./path-to-getStepDataFromPayload', () => ({
  getStepDataFromPayload: jest.fn(() => stepData)
}));

方式二：传入合法的payloadData

构造符合getStepDataFromPayload预期的payloadData并传入props：

const defaultProps={
    // 其他props
    payloadData: {/* 构造能提取出stepData的结构 */},
    ...stepData
};

2. 清理冗余的props定义 #

你在defaultProps中同时定义了基础默认值（如displayname: ""）和展开stepData，stepData中的同名属性会覆盖基础值，这本身没问题，但可以删除冗余的基础属性定义，让代码更简洁。

3. 排查内部组件的渲染问题 #

如果上述步骤后错误依然存在，检查render方法中的自定义组件：

• 确保所有自定义组件已正确导入或被mock
• 确认自定义组件没有依赖未传入的props或上下文

修正后的测试代码示例 #

// Mock工具函数
jest.mock('./utils', () => ({
  getStepDataFromPayload: jest.fn(() => stepData)
}));

const stepData={
    // 你的stepData内容
};

const defaultProps={
    isListing: true,
    updateActionButtons: jest.fn()
};

describe("should render all the inner components", () => {
   it("checking the conditional rendering calls", ()=>{
      const newWrapper= mount(<Marketing {...defaultProps}/> );
      // 添加断言验证内部组件渲染
      expect(newWrapper.find('SummaryComponent').exists()).toBe(true);
   });
});

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