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

user_12018720 0
Viewed 11391

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.

react-testing-library reactjs javascript
2 Answers

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

user_22955490

You could try this approach:

Component.js

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

Component.test.js

import { screen } from "@testing-library/react";
...
// get HTML DOM element
const spanElement = await screen.queryByTestId('test-span');
// OR
// const spanElement = await screen.querySelector('test-span');

// get value from HTML DOM element
const spanElementValue = spanElement.getAttribute('value');
...
user_51926420
Related