Найти элемент по идентификатору в реагирующей-тестирующей библиотеке

Question

Я использую реагирующее-тестирование-библиотекарь, чтобы проверить мое реагирующее приложение. По какой-то причине мне нужно найти элемент по id и не data-testid, Нет способа достичь этого в документации.

Есть ли способ добиться этого?

Я сделал вывод как:

const dom = render(<App />);

Я ищу что-то в строке:

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

Answer 1

Мне кажется, что ни один из ответов не дал полного решения, поэтому вот оно:

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

Answer 2

Я нашел способ сделать это.

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 3

Похоже, у вас есть сам DOM-узел в качестве контейнера. Поэтому вы должны быть в состоянии позвонить .querySelector('#firstinput') с этим.

Answer 4

Есть два способа сделать это

1. Просто использовать container.getByElementId('id'), В конце концов, все помощники делают такие запросы под капотом.
2. Если вы хотите иметь свой собственный запрос, вы можете написать собственный рендер. Проверьте документацию для получения дополнительной информации https://github.com/kentcdodds/react-testing-library

В заключение, если вы можете избежать поиска элементов по id, лучше.

Answer 5

В библиотеке тестирования
вы можете настроить testIdAttribute в комплектации.

configure({ testIdAttribute: 'id' })

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

Answer 6

Мой совет: прекратите добавлять и искать по идентификаторам, это всегда требует много времени и усилий, потому что вам нужно добавить идентификаторы (иногда тестовые идентификаторы), а затем найти лучший способ запросить элемент. Но даже если вам действительно нужен идентификатор, этот инструмент сэкономит вам много времени, показывая лучший способ запроса любого элемента DOM на вашем экране: Тестовая площадка

Answer 7

Если вы используете TypeScript и хотите получить не- nullрезультат, вот удобная функция:

      function getById<T extends Element>(container: HTMLElement, id: string): T {
  const element = container.querySelector<T>(`#${id}`);
  assert(element !== null, `Unable to find an element with ID #${id}.`)
  return element;
}

Затем вы можете использовать его следующим образом:

      import { render } from '@testing-library/react';

const { container } = render(<App />);
const myInputElement = getById<HTMLInputElement>(container, 'myInputElement');