时间戳

首页 > 解决方案 > 如何在 react-testing-library 中获取具有“name”属性的元素

reactjs - 如何在 react-testing-library 中获取具有“name”属性的元素

问题描述

我正在使用反应测试库和玩笑测试我的反应应用程序。

而且我想知道如何在 react-testing-library 中获取具有 'name' 属性的元素。

例如，在以下页面中，是否可以使用“userName”获取此元素？

<input type="text" name="userName" />

或者我应该设置data-testId元素和使用getByTestId方法？

return (
  <div>
    <input type="text" name="userName" />
  </div>
)

标签： reactjsjestjsreact-testing-library

解决方案

您可以使用返回的container. container是一个 DOM 节点并支持querySelector方法，该方法接受 CSS 选择器来查找元素。与这个更详细的答案相同的方法。

例如：

const { container } = render(<MyComponent />);
const inputEl = container.querySelector(`input[name="userName"]`);

推荐阅读