리액트 테스트 라이브러리에서 id별로 요소 찾기

리액트 테스트 라이브러리에서 id별로 요소 찾기

리액트 테스트 라이브러리(Libarary)를 사용하여 리액트 애플리케이션을 테스트하고 있습니다.어떤 이유에선지, 다음 방법으로 원소를 찾을 수 있어야 해id가 아니라data-testid문서에서는 이를 달성할 방법이 없습니다.

이것을 달성할 수 있는 방법이 있나요?

출력은 다음과 같습니다.

const dom = render(<App />);

다음과 같은 것을 찾고 있습니다.

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

어떤 답변도 완전한 해결책을 제시하지 못한 것 같습니다.다음은 예를 제시하겠습니다.

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

방법을 찾았어요

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');

이게 도움이 됐으면 좋겠어요.

DOM 노드 자체를 컨테이너로 사용하고 있는 것 같습니다.따라서 다음 주소로 전화하실 수 있습니다..querySelector('#firstinput')그걸 가지고.

두 가지 방법이 있습니다.

1. 간단하게 사용container.getElementById('id')결국 도우미들이 하는 일은 이런 질문을 비밀리에 하는 것뿐이다.
2. 사용자 정의 조회를 원하는 경우 사용자 정의 렌더를 작성할 수 있습니다.상세한 것에 대하여는, https://github.com/kentcdodds/react-testing-library#getbytestidtext-textmatch-htmlelement 를 참조해 주세요.

마지막으로 id로 요소를 찾지 않도록 하는 것이 좋습니다.

다음과 같이 셋업할 수 있습니다.testIdAttribute를 참조해 주세요.

configure({ testIdAttribute: 'id' })

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

---

그 설정에는 장단점이 있다.이 방법의 장점은 여러 용도로 ID를 설정할 수 있다는 것입니다.(테스트 ID, 마케팅 분석, 태그 관리자 등) id와 test-id를 모두 추가할 필요는 없습니다.그것은 코드의 간결성을 위해 좋다.

그러나 실수로 같은 페이지에 있는 두 개의 다른 컴포넌트에 동일한 ID를 설정할 수 있으므로 주의하십시오.목록 항목의 구성요소 ID에 색인 또는 식별 정보를 추가해야 합니다.

조언: ID에 의한 추가 및 검색을 중지합니다.ID(때로는 테스트 ID)를 추가한 후 요소를 쿼리하는 최선의 방법을 찾아야 하기 때문에 이 작업은 항상 많은 시간과 노력이 소요됩니다.그러나 ID가 꼭 필요한 경우에도 이 도구를 사용하면 화면의 DOM 요소를 조회할 수 있는 최적의 방법을 보여줌으로써 많은 시간을 절약할 수 있습니다.놀이터 테스트

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');

언급URL : https://stackoverflow.com/questions/53003594/find-element-by-id-in-react-testing-library