错误：反应测试库属性值在类型 HTMLElement 上不存在

在使用反应测试库时，你可能会遇到类似以下的错误：

属性值 'XXX' 在类型 'HTMLElement' 上不存在。

这是因为反应测试库的类型定义是基于 React 库的类型定义，而 HTMLElement 是浏览器原生对象，两者并不兼容。

解决方案

解决该错误的方法有两种。

1. 类型断言

你可以使用类型断言手动将 HTMLElement 类型转换为 React 的某个组件类型，例如：

import { fireEvent } from "@testing-library/react";

const button = getByRole("button") as HTMLButtonElement;
fireEvent.click(button);

在代码中，getByRole("button") 方法返回的是一个 HTMLElement 对象，但我们想要用 fireEvent.click() 方法模拟点击这个组件，所以需要手动将其转换为 HTMLButtonElement 类型。

2. 针对 HTMLElement 的兼容处理

你也可以查看官方文档中的兼容处理方法，选择适合你的项目的方案进行实现。具体方案可以见该链接。

总结

遇到 “属性值 'XXX' 在类型 'HTMLElement' 上不存在。” 的错误，原因是 TypeScript 的类型定义与测试库的类型定义不兼容。你可以使用类型断言或兼容处理来解决该问题。