TypeScript单元测试不兼容新增参数类型问题求助

问题根源 #

你遇到的错误是TypeScript类型检查的正常机制：当label的类型是string | ReactElement时，直接访问label.props会触发报错——因为string类型不存在props属性，TS无法确定你当前操作的label到底是哪种类型。

具体解决方法 #

1. 用类型守卫做类型窄化 #

在访问label.props之前，先通过React.isValidElement()判断当前label是否为React元素，这样TS会自动在判断分支里把label的类型窄化为ReactElement，允许你安全访问props：

import React from 'react';

// 原来直接访问props的代码（会报错）
// const content = label.props.children;

// 修改后带类型判断的代码
let content;
if (React.isValidElement(label)) {
  // 这里TS明确知道label是ReactElement，可安全访问props
  content = label.props.children;
} else {
  // 这里label是string类型，直接使用即可
  content = label;
}

2. 调整preparerOptions函数逻辑 #

如果preparerOptions函数里涉及到处理label的props，把上面的类型判断逻辑加到函数内部对应的位置，确保只有在label是React元素时才去操作props。

3. 单元测试代码适配 #

如果单元测试里有访问label.props的代码，同样要加上类型判断：

• 测试用例传入字符串类型label时，不要去访问它的props
• 传入React元素类型label时，通过类型判断后再访问props

关于RadioButtonGroupProps的说明 #

你不需要修改RadioButtonGroupProps的定义——既然已经把label的类型设为string | ReactElement，这个定义本身是没问题的。问题出在使用label时没有做类型区分，补上类型守卫的判断就能解决报错。

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