react-testing-library 或 Cypress - 添加多个数据测试ID

【问题标题】：react-testing-library or Cypress - Adding multiple data-testidsreact-testing-library 或 Cypress - 添加多个数据测试ID
【发布时间】：2021-02-03 07:30:26
【问题描述】：

我有一个可选择的框，所以我想为这个框添加两个测试 ID，一个用于测试框的类型，另一个用于测试是否被选中。我应该在一个 data-testid 中添加两个 data-testid 属性还是两个关键字？对于 Cypress 或 react-testing-library，最佳实践是什么？

<div data-testid="box-user" data-testid="box-user-active">

对

<div data-testid="box-user box-user-active">

我知道还有其他方法可以检查该框是否被选中，但还有很多其他用例，添加两个测试 ID 会让事情变得更容易。

【问题讨论】：

我不太确定您是否可以在一个 HTML 标记中提供两个相同的数据属性。
是的，这似乎无效。
测试ID应该描述组件是什么，以供选择；如果您想添加任意信息，您可以使用其他属性，例如data-value。

标签： javascript jestjs cypress react-testing-library

【解决方案1】：

我看过帖子说data-testid 和getByTestId 应该是最后的手段（更喜欢getByText 和getByRole），对此会有很多意见。

从纯粹的技术角度来看，给定一个以空格分隔的值列表

<div data-testid="box-user box-user-active">

您可以通过部分匹配表达式选择任一值。参考jQuery attribute-selectors

对多个空格分隔的值最有用的是~=。

cy.get('[data-testid*="box-user"]')        // either attribute
                                           // plus other variations like "unbox-user"

cy.get('[data-testid~="box-user"]')        // space-delimited (full values only)
                                           // so "box-user" but not "box-user-active"

cy.get('[data-testid~="box-user"][data-testid~="box-user-active"]') // must have both

cy.get('[data-testid^="box-user"]')          // starts with "box-user"
cy.get('[data-testid$="box-user-active"]')   // ends with "box-user-active"

【讨论】：