완벽한 REACT 테스트 라이브러리 쿼리를 위한 5가지 팁

나의 여행

테스트 라이브러리와 구성 요소 상호 작용을 테스트하기 시작한 후 가장 어려운 작업은 올바른 DOM 요소를 검색하는 것임을 곧 깨달았습니다. 이것이 테스트의 중요한 경로였습니다. 결국, 테스트하고 싶은 것을 쿼리할 수 없다면 테스트할 수 없습니다! 내가 처음 배운 것은 |_+_| 그리고 상당한 양의 테스트 케이스를 다루었습니다. 그러나 곧 더 복잡한 구성 요소를 테스트하면서 충분하지 않았습니다. 내 모든 시련과 고난을 통해 이것이 내 쿼리 전략이 되었습니다.

화면 디버그
텍스트로 쿼리
레이블 텍스트로 쿼리
역할별 쿼리
이내에

1. 화면 디버그

테스팅 라이브러리 |_+_| 은(는) 쿼리를 작성하는 데 사용하는 도구입니다. 코드를 보고 머리 속에서 DOM에 어떻게 표시되는지 상상하는 대신 Testing Library의 로깅 도구를 사용하여 모든 요소 속성과 함께 콘솔에 예쁜 DOM 트리를 즉시 로깅할 수 있습니다. 이 모든 것을 시각적으로 확인하면 쿼리 전략을 빠르게 공식화하는 데 도움이 됩니다. 기본적으로 |_+_|를 기록합니다.

getByText

|_+_| 또한 DOM 요소를 허용하여 해당 요소를 구체적으로 기록합니다. 이는 쿼리가 예상대로 작동하는지 여부를 빠르게 검증하는 데 유용합니다.

screen.debug

2. 텍스트로 쿼리

텍스트로 쿼리는 텍스트 콘텐츠를 기반으로 요소를 반환하며 지금까지 가장 일반적으로 사용되는 쿼리입니다. 이해하고 사용하기가 쉬울 뿐만 아니라 웹 애플리케이션에서 실제 사용자 행동과 상호 작용을 얼마나 가깝게 모방하기 때문에 기본 쿼리 방법입니다.

document.body

3. 레이블 텍스트로 쿼리

레이블 텍스트로 쿼리하면 연결된 레이블 요소 텍스트 콘텐츠 또는 |_+_|를 기반으로 요소를 반환합니다. 기인하다. 이 쿼리 방법은 내부 연결이 필요하기 때문에 실제로 구현에 따라 다릅니다. 텍스트 내용을 기반으로 레이블 요소를 찾고(텍스트로 쿼리하는 것과 유사) 해당 레이블과 연결된 입력 요소를 찾은 다음 해당 입력 요소를 반환합니다. 이 연결은 중첩을 통해 수행할 수 있습니다.

import { render, screen } from '@testing-library/react'; test('screen debug default', () => { render( Secondary Primary ); screen.debug(); // output: // // // // // Secondary // // // Primary // // // // });

통해 |_+_|

screen.debug

또는 |_+_|를 통해.

test('screen debug element', () => { render( Secondary Primary ); screen.debug(document.querySelector('.primary')); // output: // // Primary // });

이 특정 구현 요구 사항 때문에 사용하기가 조금 더 어렵습니다. 그러나 이것이 내가 두 번째로 이동하는 쿼리 방법인 진짜 이유는 |_+_| 원하는 모든 것이 될 수 있는 속성(물론 이유 내에서). 이렇게 하면 테스트를 위한 쿼리가 더 쉬워질 뿐만 아니라 접근성에도 도움이 됩니다.

import { render } from '@testing-library/react'; test('should return element based on its text', () => { const { getByText } = render(Button); expect(getByText('Button')).toMatchInlineSnapshot(` Button `); });

#react #jest #테스트 #자바스크립트 #개발자

미디엄닷컴