React Header组件Jest测试报错：props.value.match未定义

问题原因 #

Header组件代码中直接从props.value解构match和history，但测试时渲染<Header />未传入任何props，导致props.value为undefined，触发解构错误：

Error: Uncaught [TypeError: Cannot destructure property 'match' of 'props.value' as it is undefined.]

解决方案 #

方案1：测试时传入模拟的props #

在测试代码中，给Header组件传递包含match和history的模拟value props，确保组件能获取到必要的数据：

修改Header.test.js：

import React from 'react';
import Header from "./Header";
import { render, screen } from '@testing-library/react';
import '@testing-library/jest-dom'

describe("Test the Header Component", () => {
    test("To Check whether Header Div is present or not", () => {
      // 模拟props.value对象
      const mockValue = {
        match: { params: { page: 'Profile' } },
        history: { push: jest.fn() } // 用jest.fn()模拟history.push方法
      };
      render(<Header value={mockValue} />);
      const headerDiv = screen.getByTestId("header");
      expect(headerDiv).toBeInTheDocument(); // 推荐用toBeInTheDocument替代toBeTruthy
    });
});

方案2：给组件添加容错处理 #

在Header组件中添加默认值或可选链操作，避免因props.value不存在而报错，增强组件鲁棒性：

修改Header.js中的解构部分：

const Header = (props) => {
    // 给props.value设置默认空对象，避免解构undefined
    const { match, history } = props.value || {};
    // 给match和params设置默认值，防止后续解构出错
    const { params = {} } = match || {};
    const { page = 'Profile' } = params; // 设置默认page值

    // ... 其余代码不变
}

这样即使测试时未传入props，组件也能使用默认值正常渲染，不会抛出错误。

内容的提问来源于stack exchange，提问作者krishna chaitanya yelleti