如何使用反应测试库获取带有testid的span元素的值？

Question

我想使用 react 测试库获取 span 元素的值。

我想做什么？

我有一个如下所示的 span 元素显示一些值

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

现在在我的测试中，我访问了如下元素，

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

但我不确定如何检索它的值。

我尝试使用 span_element.value 但说“属性值在 HTMLElement 上不存在”

我该如何解决这个问题。有人可以帮我解决这个问题吗？谢谢。

Answer 1

你需要的是DOM元素的文本内容：

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

参见：https://developer.mozilla.org/en/docs/Web/API/Node/textContent

value 通常指的是 input 等交互元素的 value 属性，你可以这样检索它：

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

Answer 2

你可以试试这个方法：

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');
...

如何使用反应测试库获取带有testid的span元素的值？

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

javascript

reactjs

react-testing-library