How to get the value of the span element with testid using react testing library?

I want to get the value of the span element using react testing library.

What i am trying to do?

I have a span element like below displaying some value

render = () => {
    const count = 2;
    return (
        <span data-test-id="test-span">
            {count}
        </span>
     )
 }

Now within my test i access the element like below,

const span_element = getByTestId('test-span');

But i am not sure how to retrieve its value.

I tried using span_element.value but says ‘property value doesnt exist on HTMLElement”

How can i fix this. could someone help me with this. thanks.

Answer

What you need is the text content of the DOM element :

const spanTextContent: string = getByTestId('test-span').textContent;

See : https://developer.mozilla.org/en/docs/Web/API/Node/textContent

value usually refers to the value attribute of interactive elements like inputs, and you could retrieve it like so :

const inputValue: string = getByTestId('refers-to-input').getAttribute('value');

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input/number#value

https://developer.mozilla.org/en-US/docs/Web/API/Element/getAttribute