Jest.js 如何在React测试库中使用closest()时避免TypeScript错误？

nukf8bse 于 2023-10-14 发布在 Jest

关注(0)|答案(3)|浏览(151)

在我的单元测试中，我试图选择下面的div，以便可以单击它。

<div>
  <h1>Avocado Toast</h1>
  <p>Avocado toast served on country bread, served with a side of veggies</p>
</div>

基于this stackoverflow answer，我尝试将getByText()与closest()结合使用：

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

然而，Typescript在第二行抱怨avocadoToast可能为null（因为closest()可能返回null）：

error TS2345: Argument of type 'HTMLDivElement | null' is not assignable to parameter of type 'Element'.
      Type 'null' is not assignable to type 'Element'.

我通过在这一行添加一个非空Assert操作符来解决这个问题：

userEvent.click(avocadoToast!);

但是我觉得我没有正确地构建测试。有更好的办法吗？

jestjs

来源：https://stackoverflow.com/questions/77213476/how-to-avoid-typescript-error-when-using-closest-in-react-testing-library

3条答案

按热度按时间

ryoqjall1#

你可以在Assertclick事件之前添加一个简单的nullcheck：

const avocadoToast = screen.getByText('Avocado Toast').closest('div');
if (avocadoToast != null) {
    userEvent.click(avocadoToast);
}

赞(0）回复(0）举报 2023-10-14

ngynwnxp2#

所需组件是div这一事实是一个实现细节，不建议对其进行测试。
如Guiding Principles中所述，
以用户使用的方式测试应用程序组件
用户会点击一个组件，因为它有一些文本，标签，图像与alt文本等。如果这些都不适用，则可以使用ByTestId

赞(0）回复(0）举报 2023-10-14

nwsw7zdq3#

在Kent C. Dodds的大量研究和指导之后，我决定采用以下解决方案，因为它很简单：

const avocadoToast = screen.getByText('Avocado Toast').closest('div');

// use an invariant to verify that avocadoToast is not null
// this now satisfies TypeScript in the last line
if (avocadoToast === null) {
  // fail the test right here so that rest of the test is not complicated
  throw new Error("Couldn't find Avocado Toast");
}

userEvent.click(avocadoToast);

注意，在Jest中测试失败的正确方法是抛出一个错误（参见stackoverflow answer）。
一个更详细的解决方案是通过使用here准则使原始HTML（旨在成为一张卡片）更容易访问。

赞(0）回复(0）举报 2023-10-14

我来回答

Jest.js 如何在React测试库中使用closest()时避免TypeScript错误？

3条答案

相关问题

热门标签

最新问答