“getByText”和“getByTestId”有什么区别？在测试库/反应中

Question

getByText和 和有什么区别getByTestId？

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

在代码中测试失败getByText，但在getByTestId.

我有代码，当单击某个元素时，标题的颜色变为红色。

为什么会有这样的差别呢？

Container我省略了和的样式组件Content。这具有“切换”道具以将颜色更改为红色。

这是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

反应测试库备忘单

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

我发现通过文本选择可能有点挑剔，并且通常最终会添加一个testid属性来查询/定位我想要的确切元素。

我的猜测是getByText可能不会返回正确的元素/包装器。

从你的测试代码来看

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

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

另请参阅我应该使用哪个查询？

每个人都可以查询

getByText：对于表单没有用，但这是用户找到大多数非交互式元素（如 div 和 span）的第一个方法。

测试ID

getByTestId：用户看不到（或听到）这些，因此仅建议在无法按角色或文本进行匹配或没有意义的情况下（例如文本是动态的）。

作为后备，还有手动查询。