React Testing Library：Property 'value' does not exist on type 'HTMLElement'错误修复

这个问题我写React+TypeScript测试时也碰到过，本质是TypeScript的类型推断限制：React Testing Library的getByPlaceholderText默认返回通用的HTMLElement类型，但你定位的是输入框（属于HTMLInputElement），只有表单类元素才自带value属性。下面是几个高效的修正方案：

方案1：类型断言（最直接快捷） #

直接把查询到的元素断言为HTMLInputElement，明确告诉TypeScript这是一个输入框：

const title = getByPlaceholderText("What's your question? Be specific") as HTMLInputElement;
fireEvent.change(title, {target: {value: "testtitle"}});
expect(title.value).toBe("testtitle");

如果是textarea元素，就断言为HTMLTextAreaElement，原理完全一致。

方案2：使用精准的角色查询（推荐最佳实践） #

遵循React Testing Library的设计理念，优先用基于角色（role）的查询方法。getByRole('textbox')会自动推断返回HTMLInputElement | HTMLTextAreaElement类型，无需额外断言：

// 通过role+name匹配placeholder文本，定位更精准
const title = getByRole('textbox', { name: "What's your question? Be specific" });
fireEvent.change(title, {target: {value: "testtitle"}});
expect(title.value).toBe("testtitle");

方案3：类型守卫（严谨场景适用） #

如果不确定元素类型，或者需要更严谨的类型检查，可以用类型守卫确认元素拥有value属性：

const title = getByPlaceholderText("What's your question? Be specific");
fireEvent.change(title, {target: {value: "testtitle"}});

if ('value' in title && typeof title.value === 'string') {
  expect(title.value).toBe("testtitle");
}

这个方法适合复杂场景，但日常测试里前两种方案足够高效。

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