javascript - react-testing-library or Cypress - Adding multiple data-testids - Stack Overflow

admin管理员组

文章数量:1310034

I have a box that is selectable, so I want to add this box two test ids, one to test the type of the box and the other if it is selected. Should I add two data-testid attributes or two keywords in one data-testid? what is the best practice for this when it es to Cypress or react-testing-library?

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

vs

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

I know there are other ways to check if the box is selected, but there are plenty of other use cases when adding two test ids would make things much easier.

I have a box that is selectable, so I want to add this box two test ids, one to test the type of the box and the other if it is selected. Should I add two data-testid attributes or two keywords in one data-testid? what is the best practice for this when it es to Cypress or react-testing-library?

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

vs

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

I know there are other ways to check if the box is selected, but there are plenty of other use cases when adding two test ids would make things much easier.

• javascript
• jestjs
• cypress
• react-testing-library

Share Improve this question Follow edited Feb 3, 2021 at 7:36 Shota asked Feb 3, 2021 at 7:30 ShotaShota 7,36099 gold badges3939 silver badges7373 bronze badges 4

• 1 I'm not quite sure if you can provide two same data attributes in one HTML tag. – Dominik Matis Commented Feb 3, 2021 at 7:37
• Yes, that does not seem to be valid. – Shota Commented Feb 3, 2021 at 7:41
• 1 The test ID should describe what the ponent is, for selection purposes; if you want to add arbitrary information you can use other attributes like data-value. – jonrsharpe Commented Feb 3, 2021 at 8:42
• I don't understand why you would need two test ids. You can reuse the same test id for as many tests as you want. – coppereyecat Commented Feb 28, 2024 at 19:03

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

I've seen posted that data-testid and getByTestId should be a last resort (preferring getByText and getByRole), and there would lots of opinions about that.

From a purely technical standpoint, given a space-delimited list of values

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

you can select by either value with a partial match expression. Ref jQuery attribute-selectors

The most useful for multiple space separated values is ~=.

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"

For react testing library also allows partial matching: https://testing-library./docs/queries/about/#precision

@user14783414 's anwer for react testing library would be...

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

/* Return only first item */
screen.getByTestId('box-user-active', {exact: false})
screen.getByTestId('box-user box-user-active', {exact: true})

/* Return both items*/
screen.getByTestId('box-user', {exact: false})

本文标签： javascriptreacttestinglibrary or CypressAdding multiple datatestidsStack Overflow