TypeScript下React Testing Library报HTMLElement无value属性错误

报错原因 #

React Testing Library 所有屏幕查询方法（getByRole/getByLabelText等）默认返回的类型是通用HTMLElement类型。value是表单输入元素（HTMLInputElement、HTMLTextAreaElement等）的特有属性，不存在于HTMLElement基类上，TS静态类型检查阶段就会抛出属性不存在的错误。
这也是TS和JS写测试的直观差异：JS没有静态类型校验，类型不匹配问题只会在运行时暴露；TS会在编译阶段提前拦截非法的属性访问，要求你明确元素的具体类型。

推荐修复方式 #

1. 传入查询方法的泛型参数（类型最安全） #

React Testing Library 的查询方法支持传入泛型，指定你预期获取到的元素类型，不需要额外做强制类型转换：

test("inputs should be initially empty", () => {
    render(<App />);
    // 显式指定返回元素为HTMLInputElement类型
    const emailInputElement = screen.getByRole<HTMLInputElement>("textbox");
    const passwordInputElement = screen.getByLabelText<HTMLInputElement>(/password/);
    expect(emailInputElement.value).toBe("");
    expect(passwordInputElement.value).toBe("");
});

2. 类型断言（适合确定元素类型的场景） #

如果你100%确认查询返回的是对应类型的元素，也可以用as关键字做类型断言：

const emailInputElement = screen.getByRole("textbox") as HTMLInputElement;
const passwordInputElement = screen.getByLabelText(/password/) as HTMLInputElement;

注意：类型断言本质是告诉TS跳过这个节点的类型检查，如果实际查询到的元素不是input类型，TS不会提前报错，问题会留到运行时才暴露，优先选择泛型写法更稳妥。

额外提示 #

你当前查询密码框的写法是正确的：type="password"的输入框默认ARIA role不是textbox，不能用getByRole("textbox")获取，用getByLabelText匹配密码标签是符合RTL最佳实践的写法。

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