使用React Testing Library时如何解决HTML element|null不可分配给TargetElement的错误

错误原因 #

这是TypeScript的类型校验报错，document.getElementById的原生返回值类型为HTMLElement | null，而userEvent.click要求入参必须为非空的TargetElement类型，即使你业务上确认元素必然存在，TypeScript无法识别这个隐含逻辑，因此抛出类型不匹配错误。
另外注意你代码里的变量名switch是JavaScript的保留关键字，直接用作变量名会触发语法错误，建议更换为switchEl这类合法名称。

解决方案 #

方案1：使用非空断言 #

如果你100%确定元素一定存在，可以在变量后加!非空断言操作符，告诉TypeScript该值不可能为null：

const switchEl = document.getElementById('source')!
userEvent.click(switchEl);

方案2：使用类型断言 #

你可以直接将返回值断言为你需要的具体元素类型，匹配度更精准：

const switchEl = document.getElementById('source') as HTMLInputElement
userEvent.click(switchEl);

方案3：使用React Testing Library原生查询（更推荐） #

按照RTL的最佳实践，优先用库自带的get*系列查询方法，这类方法如果查不到元素会直接抛出运行时错误，返回值天然为非空类型，不需要额外处理类型问题：

import { screen } from '@testing-library/react'

// 按角色查询，更符合用户侧交互逻辑
const switchEl = screen.getByRole('checkbox', { name: 'source' })
userEvent.click(switchEl)

如果一定要按ID查询，可以给对应元素加data-testid="source"属性，再用以下方式查询：

const switchEl = screen.getByTestId('source')
userEvent.click(switchEl)

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