React Testing Library와 함께 testing-playground 사용

React Testing Library은 프런트 엔드 테스트에 널리 사용되는 테스트 유틸리티 도구입니다.

요소를 대상으로 지정하는 방법을 알아내려고 할 때 React Testing Library를 사용하면 문제가 발생할 수 있습니다.
논리적 옵션은 대상 요소에 data-testid 속성을 추가하는 것일 수 있습니다. 그러나 이 방법에는 몇 가지 단점이 있습니다.

React Testing Libraryguiding principles에 따르면,

The more your tests resemble the way your software is used, the more confidence they can give you.
-- Kent C Dodds

우리는 종종 구현 세부 사항을 테스트하는 데 시간을 할애할 수 있습니다. 요소에 data-testid 속성을 사용하는 것은 요소가 존재하는지 테스트하는 것뿐입니다. 테스트할 때 우리의 초점은 사용자에게 있어야 합니다. 예를 들어 사용자가 보는 것 또는 사용자와 상호 작용하는 방법입니다.
data-testid를 사용하지 않고 요소를 대상으로 지정하는 방법을 찾는 것은 어려울 수 있습니다.

고맙게도 testing-playground이 있습니다!



테스트 플레이그라운드는 DOM의 시각적 표현을 제공하고 대상 요소에 대한 최상의 쿼리를 찾는 데 도움이 되는 도구입니다.

테스트 내에서 플레이그라운드에 액세스하는 방법

플레이그라운드에 액세스할 수 있는 두 가지 방법이 있습니다.

테스트 내에서 테스트 플레이그라운드를 기록하면 테스트를 실행할 때 브라우저에서 열 수 있는 링크가 콘솔 내에 생성됩니다.

import { screen } from "@testing-library/react"

     it('test it block', () => {
       ...
       screen.logTestingPlaygroundURL();
       expect(...)
     })

DOM 출력을 인쇄하는 디버그 메소드screen.debug()를 호출합니다. DOM 출력을 복사하여 테스트 플레이그라운드에 직접 붙여넣습니다.

플레이그라운드가 열리면 개발자 도구 'inspect'와 매우 유사한 inspect-tool을 사용하여 플레이그라운드를 탐색할 수 있습니다. 시각적 DOM의 요소를 검사할 때 해당 요소를 선택하면 테스트에 복사할 추천 쿼리가 표시됩니다. 디스플레이는 요소를 쿼리하는 액세스 가능하고 의미론적인 방법에 대한 정보를 제공합니다. 예를 들어 버튼의 액세스 가능한 역할을 사용하여 버튼을 타겟팅할 수 있습니다.



테스트 플레이그라운드는 코드를 편집할 때 직접적인 피드백을 제공합니다. 플레이그라운드는 예를 들어 이름을 추가하여 쿼리를 보다 구체적으로 만드는 방법과 같이 코드 및 쿼리에 대해 수행할 수 있는 개선 사항을 표시합니다. 비특정 test-id를 사용하는 것보다 제안된 쿼리를 사용하는 것이 좋습니다.

테스트 플레이그라운드의 또 다른 유용한 용도는 DOM에 어떤 요소가 표시되는지 확인하는 것입니다. 사용자가 버튼을 클릭한 후 성공 메시지가 표시될 것으로 예상할 수 있습니다. 테스트가 실패하면 플레이그라운드를 디버깅 도구로 사용하여 사용자에게 무엇이 표시되는지 확인할 수 있습니다. 또는 DOM 출력에 screen.debug()를 사용할 수 있습니다.

요약하면 테스팅 플레이그라운드는 React Testing Library 🐸와 함께 사용할 수 있는 훌륭한 도구입니다.
시도해 보고 테스트 기술을 어떻게 향상시킬 수 있는지 확인하십시오.