Question

我正在使用react-testing-libarary测试我的react应用程序。由于某种原因，我需要能够通过id而不是data-testid来查找元素。在文档中没有实现此目的的方法。

有没有办法做到这一点？

我将输出呈现为：

const dom = render(<App />);

我正在寻找符合以下条件的东西：

const input = dom.getElemenById('firstinput');
//or 
const input = dom.getById('firstinput');

Answer 1

看起来您拥有DOM节点本身为container。因此，您应该可以以此来呼叫std::filesystem。

Answer 2

在测试库中，
您可以在配置中使用testIdAttribute进行设置。

configure({ testIdAttribute: 'id' })

https://testing-library.com/docs/dom-testing-library/api-configuration

Answer 3

我觉得所有答案都没有给出完整的解决方案，所以这里是：

const result = render(<SomeComponent />);
const someElement = result.container.querySelector('#some-id');

Answer 4

我找到了一种方法。

import App from './App';
import { render, queryByAttribute } from 'react-testing-library';

const getById = queryByAttribute.bind(null, 'id');

const dom = render(<App />);
const table = getById(dom.container, 'directory-table');

我希望这会有所帮助。

Answer 5

有两种方法

只需使用container.getElementById('id')。最后，所有帮助者所做的就是在幕后进行这样的查询
如果要进行自定义查询，可以编写自定义渲染。查看文档以获取更多信息https://github.com/kentcdodds/react-testing-library#getbytestidtext-textmatch-htmlelement

最后一点，如果可以避免通过id查找元素，那就更好了。

Answer 6

我的建议：停止通过 id 添加和搜索，这总是需要花费大量时间和精力，因为您必须添加 id（有时是 test-id），然后找出查询元素的最佳方式。但即使您真的需要一个 id，这个工具也会通过显示查询屏幕上任何 DOM 元素的最佳方式为您节省大量时间：Testing Playground

在react-testing-library中按ID查找元素

6 个答案: