如何用React Testing Library测试函数？遇charAt读取未定义属性报错

错误TypeError: Cannot read properties of undefined (reading 'charAt')的核心原因是：调用capitalizeFirstLetter时传入了undefined（或未传参数），导致函数尝试对undefined执行charAt方法，触发报错。

方案1：给函数添加边界处理，增强健壮性 #

修改原函数，兼容undefined、空字符串等异常输入：

export default function capitalizeFirstLetter(string?: string) {
  // 处理undefined、空字符串的情况
  if (!string) return string || '';
  return string.charAt(0).toUpperCase() + string.slice(1);
}

这里将参数类型改为可选的string?，先判断输入是否有效，无效时直接返回安全值，避免后续方法调用报错。

方案2：检查并修正测试用例 #

如果不想修改原函数，需确保所有测试用例都传入合法的string类型参数，同时补充异常场景的测试：

import capitalizeFirstLetter from './capitalizeFirstLetter';

test('正常字符串首字母大写', () => {
  expect(capitalizeFirstLetter('hello')).toBe('Hello');
});

test('传入空字符串返回空', () => {
  expect(capitalizeFirstLetter('')).toBe('');
});

test('处理undefined输入', () => {
  // 若原函数未做边界处理，这里需避免传入undefined，或添加判断
  expect(capitalizeFirstLetter(undefined as unknown as string)).toBe('');
});

建议优先选择方案1，让函数本身具备容错能力，同时用测试用例覆盖所有可能的输入场景，彻底避免同类错误。

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