如何测试React组件传入undefined Props时的报错逻辑？

一、正确测试Child.tsx的报错逻辑 #

你之前测试失败的核心原因是：直接渲染组件时，错误会在expect执行前就抛出，Jest无法捕获到。正确的做法是把渲染逻辑包裹在匿名函数中，让Jest在执行expect时才触发渲染，从而捕获抛出的错误。

假设你的Child.tsx代码如下：

import React from 'react';

type ChildProps = {
  title: string;
};

const Child = ({ title }: ChildProps) => {
  if (title === undefined) {
    throw new Error('Title cannot be undefined');
  }
  return <div>{title}</div>;
};

export default Child;

对应的测试用例（以React Testing Library + Jest为例）：

import { render } from '@testing-library/react';
import Child from './Child';

test('抛出错误当title为undefined时', () => {
  // 关键：将渲染逻辑放在匿名函数内
  expect(() => {
    render(<Child title={undefined} />);
  }).toThrow('Title cannot be undefined');
});

这样Jest就能正确捕获组件抛出的错误，验证报错逻辑是否符合预期。

二、处理App.tsx中传入undefined的场景 #

有两种常见的解决思路，根据你的需求选择：

1. 组件内做防御性处理（推荐） #

修改Child.tsx的props类型和内部逻辑，既保留开发环境的错误提示，又避免生产环境崩溃：

import React from 'react';

// 将title设为可选属性
type ChildProps = {
  title?: string;
};

const Child = ({ title }: ChildProps) => {
  // 开发环境下抛出错误提醒开发者
  if (title === undefined && process.env.NODE_ENV === 'development') {
    throw new Error('请传入title属性');
  }
  // 生产环境使用默认值兜底
  const safeTitle = title ?? '默认标题';
  return <div>{safeTitle}</div>;
};

export default Child;

2. 父组件确保传入有效值 #

在App.tsx中，给可能为undefined的title设置兜底值，避免传入undefined：

import React from 'react';
import Child from './Child';

const App = () => {
  // 假设这个值来自接口或状态，可能为undefined
  const dynamicTitle = undefined;
  
  // 使用空值合并运算符设置兜底
  return <Child title={dynamicTitle ?? '默认标题'} />;
};

export default App;

额外：用TypeScript提前拦截错误 #

如果你的项目使用TypeScript，直接将title设为必填的string类型（非可选），这样在编译阶段就会提示你不能传入undefined，从源头避免运行时错误：

// Child.tsx的props类型
type ChildProps = {
  title: string; // 必填，不能为undefined
};

此时在App.tsx中传入undefined，TypeScript会直接报编译错误，无需等到运行时。

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