如何从 DOM 组件获取 data-testid？
How to get a the data-testid from a DOM component?
在我的 React 项目中，有时需要将动态生成的 UUID 添加到 data-testid 值，以确保 DOM.
中重复组件的唯一性
我有一个测试场景，可以抓取我想要的元素。现在我想从中获取动态生成的 data-testid。我已经试过了，但它不起作用：
const questionDropdown = queryAllByText('Free Text')[0];
console.log(questionDropdown.getAttribute('data-testid'));
有什么获取方法的建议吗？
我认为这是一个数据集，所以你可以这样得到它：
console.log(questionDropdown.dataset.testid);
如果您有预期的结果，您可以使用 testing-library/jest-dom:
进行测试
expect(questionDropdown).toHaveAttribute("data-testid", "test-id");
文档：https://github.com/testing-library/jest-dom#tohaveattribute
我正在重新审视这个。我相信 adesuriey 的答案在处理常规文本时效果很好，比如在 Input 元素中。但在语义 UI 下拉列表中它似乎不起作用。
我认为问题在于找到正确的祖先元素。我尝试了很多东西，但都没有成功。
我终于知道怎么做了！
因此，我有一个带有动态生成的 data-testid 的语义 UI 下拉列表。获取元素的技巧就是简单地使用正则表达式，如下所示：
const questionTypeDropdown = getByTestId(/conditional-task-question-type/);
在我的 React 项目中，有时需要将动态生成的 UUID 添加到 data-testid 值，以确保 DOM.
我有一个测试场景，可以抓取我想要的元素。现在我想从中获取动态生成的 data-testid。我已经试过了，但它不起作用：
const questionDropdown = queryAllByText('Free Text')[0];
console.log(questionDropdown.getAttribute('data-testid'));
有什么获取方法的建议吗？
我认为这是一个数据集，所以你可以这样得到它：
console.log(questionDropdown.dataset.testid);
如果您有预期的结果，您可以使用 testing-library/jest-dom:
expect(questionDropdown).toHaveAttribute("data-testid", "test-id");
文档：https://github.com/testing-library/jest-dom#tohaveattribute
我正在重新审视这个。我相信 adesuriey 的答案在处理常规文本时效果很好，比如在 Input 元素中。但在语义 UI 下拉列表中它似乎不起作用。
我认为问题在于找到正确的祖先元素。我尝试了很多东西，但都没有成功。
我终于知道怎么做了！
因此，我有一个带有动态生成的 data-testid 的语义 UI 下拉列表。获取元素的技巧就是简单地使用正则表达式，如下所示：
const questionTypeDropdown = getByTestId(/conditional-task-question-type/);