Я использую react-testing-libarary для тестирования своего приложения реакции. По какой-то причине мне нужно найти элемент по id, а не по data-testid. В документации нет способа добиться этого.
Есть ли способ добиться этого?
Я получил визуализированный результат как:
const dom = render(<App />);
Я ищу что-то вроде:
const input = dom.getElemenById('firstinput');
//or
const input = dom.getById('firstinput');
Мне кажется, что ни один из ответов на самом деле не дал полного решения, поэтому вот оно:
const result = render(<SomeComponent />);
const someElement = result.container.querySelector('#some-id');
result.debug(), я ясно вижу элемент с этим идентификатором. :(
- person hashbytes; 07.04.2021
Я нашел способ сделать это.
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');
Надеюсь, это поможет.
document.getElementById. Но идентификатор элемента - это деталь реализации, и я не рекомендую его использовать.
- person kentcdodds; 14.08.2020
Похоже, у вас есть сам узел DOM как контейнер. Следовательно, вы сможете позвонить .querySelector('#firstinput') с этим.
react-testing-library помощников на этом возвращаемом узле.
- person aks; 26.10.2018
Вы можете установить testIdAttribute в конфигурации.
configure({ testIdAttribute: 'id' })
https://testing-library.com/docs/dom-testing-library/api-configuration
У настройки есть свои плюсы и минусы. Преимущество этого в том, что вы можете установить идентификатор для нескольких целей. (Идентификатор теста, маркетинговая аналитика, менеджер тегов и т. Д.) Вам не нужно добавлять одновременно id и test-id. Это хорошо для лаконичности кода.
Но будьте осторожны, вы можете случайно установить один и тот же идентификатор для двух разных компонентов на одной странице. Не забудьте добавить индекс или идентификацию к идентификатору компонента для элементов списка.
testIdAttribute: атрибут, используемый getByTestId и связанными запросами. По умолчанию data-testid.
- person Norman Lin; 08.10.2020
Есть два способа сделать это
container.getElementById('id'). В конце концов, все помощники делают запросы, подобные этому, под капотом.В заключение, если вы можете избежать поиска элементов по идентификатору, это лучше.
container, я думаю, это не то, что вы ищете
- person Giorgio Polvara - Gpx; 30.08.2020
TS2339: Property 'getElementById' does not exist on type 'HTMLElement'.
- person pbialy; 25.03.2021
getElementById даже не присутствует в документах RTL '-' Для меня правильный способ использования этого инструмента: chrome.google.com/webstore/detail/testing-playground/ Я никогда больше не тратил время на добавление / поиск идентификаторов.
- person Lucas Andrade; 25.05.2021
getElementById отсутствует в документации, потому что это не API RTL, это API DOM, поддерживаемый всеми браузерами. Ошибка @pbialy и @ mihai-zamfir является ошибкой TypeScript и не имеет ничего общего с RTL.
- person Giorgio Polvara - Gpx; 25.05.2021
Мой совет: прекратите добавлять и искать по идентификаторам, это всегда требует много времени и усилий, потому что вам нужно добавить идентификаторы (иногда тестовые идентификаторы), а затем найти лучший способ запросить элемент. Но даже если вам действительно нужен идентификатор, этот инструмент сэкономит вам много времени, показывая лучший способ запроса любого элемента DOM на вашем экране: Площадка для тестирования
document.getElementById('firstinput')- person James Gentes schedule 18.03.2021