Cant find a button in react testing library with getByDisplayValueText

Question

I have a simple component that has 3 buttons. i want to find the buttons and simulate click by using react testing library. problem is that I cant find the first button in my test by below code. considering I have a button with value="All" and the other button has "completed" as a text. I can find the second button (i can't change my code for the first button)

document.body.innerHTML = `
<button value="All" />
<button>Completed<button/>
<button>in progress<button/>
<span>multi-test</span>
<div>multi-test</div>`;

screen.debug();
screen.debug(screen.getByDisplayValueText('All'));  ---> doesn't work
screen.debug(screen.getByText('Completed'));  ----> works 

Answer 1

screen.debug(screen.getByDisplayValueText('All')); ---> doesnt work

You have .getByDisplayValueText and should have .getByDisplayValue (without "Text").

https://testing-library.com/docs/dom-testing-library/api-queries

getByDisplayValue(
  container: HTMLElement,
  value: TextMatch,
  options?: {
    exact?: boolean = true,
    normalizer?: NormalizerFn,
  }): HTMLElement