"getByText" 和 "getByTestId" 有什么区别？在 testing-library/react

Question

getByText和getByTestId有什么区别？

当我测试一个 React 组件时，这两个功能之间存在一些差距。

测试在 getByText 代码中失败，但在 getByTestId 中成功。

我有代码，当一个元素被点击时，标题的颜色变成红色。

为什么会这样？

我省略了 Container 和 Content 的 styled-components。这有道具 'toggled' 可以将颜色更改为红色。

这里是 getByText 代码：

const { getByText } = render(<ListPresenter content={ListText} />);
const colorChangedText = getByText(/the party/);
fireEvent.click(colorChangedText);
screen.debug(); // The result of render I want !
expect(colorChangedText).toHaveStyle("color: red");    * failed

这里是 getByTestId 代码：

const { getByText } = render(<ListPresenter content={ListText} />);
fireEvent.click(getAllByTestId("list-element-toggle")[0]);
screen.debug(); // The result of render I want !
const colorChangedText = getAllByTestId("list-element-content")[0];
expect(colorChangedText).toHaveStyle("color: red");   * success

这是渲染的组件：

const Component = (props) => {
  return (
    <Container
        className="container"
        data-testid={"list-element-toggle"}
        toggled={state[data.id - 1]}
     >
        <Content className="content" data-testid={"list-element-content"} toggled={state[data.id - 1]}>
          {data.titleChild}.  // This text had been changed to red color when i was clicked.
        
        </div>
      </div>
  )
}

Answer 1

react-testing-library cheetsheet

ByText 按元素文本内容查找
ByTestId 通过data-testid属性查找

我发现按文本选择可能有点挑剔，通常最终会将 testid 属性添加到 query/target exact 元素 I想要。

我猜 getByText 可能没有返回正确的 element/wrapper。

来自你的测试代码

render(<ListPresenter content={ListText} />);

我不清楚测试中的文本可能是什么。我什至不清楚 ListPresenter 是否是最后一个片段中的 Component。例如，什么是 data.titleChild?

另见 Which query should I use?

每个人都可以查询

getByText: Not useful for forms, but this is the number 1 method a user finds most non-interactive elements (like divs and spans).

测试 ID

getByTestId: The user cannot see (or hear) these, so this is only recommended for cases where you can't match by role or text or it doesn't make sense (e.g. the text is dynamic).

作为备用 Manual Queries。

"getByText" 和 "getByTestId" 有什么区别？在 testing-library/react

What is the difference "getByText" and "getByTestId" ? In testing-library/react

testing

reactjs

styled-components

react-testing-library