Creating specific data-testids for buttons that render in one column of the table
Hello! I am trying to test the table I created in react with jest and react testing library, and one of the columns for the table renders a button that will navigate to a specific page depending on the row that the button is located. The buttons for this column are all named "Edit" and so I can't use getByText(), and for some reason the button doesn't show up when I do getByRole(). I noticed that each id of the buttons have unique names (i.e row#_edit) and so I would like to test it through that but couldn't find any way to do so with jest/react testing library - so I'd like to see if I could create a data-testid that will also be uniquely named similarly to the id.
Thank you very much !
1 Reply
harsh-harlequin•3y ago
put testid on your table wrapper, than
const table = screen. findByTestId('table')
const tableList = table.querySelectorAll('table today tr')
const firstList = tableList.querySelector('button[id="_edit"]')