在React Testing Library中使用closest()时如何避免TypeScript错误？

方案1：使用类型断言明确元素类型 #

既然你确定getByText('Avocado Toast')必然能找到h1元素，且该h1一定包含在目标div中，可通过类型断言直接指定closest返回的类型，替代非空断言运算符，让代码逻辑更清晰：

const avocadoToast = screen.getByText('Avocado Toast').closest('div') as HTMLDivElement;
userEvent.click(avocadoToast);

方案2：利用语义化查询（避免层级依赖） #

如果目标div可以添加语义化role（比如role="region"），可直接用getByRole定位，完全规避closest带来的类型问题：

<div role="region" aria-label="Avocado Toast card">
  <h1>Avocado Toast</h1>
  <p>Avocado toast served on country bread, served with a side of veggies</p>
</div>

测试代码：

const avocadoToast = screen.getByRole('region', { name: /avocado toast/i });
userEvent.click(avocadoToast);

方案3：添加data-testid属性（最稳定的测试方案） #

若允许修改DOM，给目标div添加data-testid是测试中定位元素最可靠的方式，彻底避免层级依赖和类型歧义：

<div data-testid="avocado-toast-card">
  <h1>Avocado Toast</h1>
  <p>Avocado toast served on country bread, served with a side of veggies</p>
</div>

测试代码：

const avocadoToast = screen.getByTestId('avocado-toast-card');
userEvent.click(avocadoToast);

方案4：用类型守卫做严谨校验 #

如果想要兼顾类型安全和运行时可靠性，可添加类型守卫函数明确判断元素非空：

function isElement(el: Element | null): el is Element {
  return el !== null;
}

const avocadoToast = screen.getByText('Avocado Toast').closest('div');
if (isElement(avocadoToast)) {
  userEvent.click(avocadoToast);
} else {
  throw new Error('目标div未找到');
}

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