왜 나는react 테스트 라이브러리를 사용하여focus trap react 테스트 세트를 재편성했는가

나의 2021년 목표 중 하나는 개원에 더 많은 공헌을 하는 것이다.2020년 12월에 저는 focus-trap-reactnpm 패키지를 재편성React Testing Library한 테스트 세트를 사용하여 선두를 차지했습니다.제 핸드폰 번호pull request입니다.
이 패키지를 아직 들어보지 못하셨다면, focus-trap-react 가장 좋은 해결 방안 중 하나입니다. 프로그램의 특정 구역에서 키보드 초점을 임시로 포착할 수 있습니다. 예를 들어 모드나 패널을 열 때.우리는 사용자가 모드 밖에서 백엔드의 내용으로 전환하는 것을 원하지 않는다. 그렇지?
본고에서 우리는 내가 테스트 세트를 다시 작성하는 동기와 React 테스트 라이브러리를 사용하여 테스트를 작성하는 데 가져오는 이점에 대해 토론할 것이다.

원시 테스트 세트의 결함

주의해야 할 것은 내가 시작하기 전에 이 소프트웨어 패키지는 확실히 약간의 테스트가 존재했다.이러한 테스트는 React의 내장 테스트 UTILreact-dom/test-utils을 사용하여 작성되었습니다.
그러나 사실은 이렇다. 실제로 내장된 React 테스트 utils를 직접 사용하는 사람은 없다.심지어 React 문서 자체도 React 테스트 라이브러리나 효소를 사용하는 것을 권장합니다!
따라서 테스트를 더욱 유지보수적이고 React 프로그래밍 세계의 다른 사람들이 더욱 익숙하게 하기 위해 저는 테스트 세트를 React 테스트 라이브러리로 전환합니다.react-dom/test-utils 정말 유행하는 방법들이 있었지만, 우리는 지금 놓쳤다.만약 당신이 나를 믿지 않는다면, 예시를 참고하십시오: scryRenderedDOMComponentsWithClass
그 다음으로 기존의 테스트는 실제 초점 함정을 만드는 시뮬레이션 방법을 포함한다.구성 요소 중 하나_createFocusTrap 아이템을 실현하여 테스트 목적에 전문적으로 사용합니다.개발자가 응용 프로그램에서 새로운focus trap 구성 요소를 사용하는 것처럼 이 구성 요소를 실례화하지 않았습니다. 이것은 상당히 큰 위험 신호입니다.
셋째, 테스트는 초점 함정이 활성화되거나 정지될 때 일부 함수가 호출되거나 호출되지 않는다고 단언하는 것이다.다음과 같이 단언합니다.

expect(mockCreateFocusTrap).toHaveBeenCalledTimes(1);

문제는 이 함수를 호출했다고 단언했지만 실제 사용자 체험이나 UI에서 일어난 일은 전혀 말하지 않았다는 것이다.이 함수를 호출하는 것은 단지 세부 사항을 실현하는 것일 뿐이다. 우리 사용자들은 솔직히 말하면, 우리의 테스트는 알 필요가 없다.
그렇다면, 우리는 어떻게 이런 문제들을 해결합니까?더 좋은 방법이 있나요?

React 테스트 라이브러리는 더 나은 테스트 방법입니다.

React 테스트 라이브러리의 핵심 이념은 사용자와 UI가 상호작용하는 방식으로 구성 요소를 테스트해야 한다는 것입니다.
구성 요소 상태나 단언 호출 함수를 강제로 업데이트하지 않습니다.반대로 우리는 사용자가 할 수 있는 일을 할 것이다. 단추를 누르고 텍스트를 입력하고 폼을 제출하는 것이다.
그래서 focus-trap-react가방에 관해서는 이것이 바로 내가 한 일이다.UI와 상호 작용하여 테스트를 작성하고 사용자가 할 수 있는 일만 합니다.
예를 들어, 포커스 트랩 기본 동작의 테스트에서 다음 작업을 수행합니다.

포커스 트랩 내용을 전환하는 버튼이 포함된 구성 요소 표시

버튼을 클릭하여 포커스 트랩 내용을 표시하고 트랩을 활성화

초점이 초점 함정

내의 첫 번째 요소로 이동하는지 확인

포커스 함정

의 마지막 항목에서 폼을 만들고 포커스가 포착되었는지 확인하고 시작으로 돌아갑니다.

버튼을 클릭하여 포커스 함정을 닫기

초점이 초점 함정 내용을 처음 연 원시 터치 단추로 되돌아오는지 확인

이렇게 하면 훨씬 좋아진다!Dell은 사용자와 UI가 상호 작용하는 방식으로 테스트를 수행할 뿐만 아니라 이러한 동작에 대해 단언합니다.이것은 우리로 하여금 일이 정상적으로 일할 수 있다고 믿게 한다. 이것은 결국 테스트 세트의 모든 목적을 가진 것이다.

결론

사용자와 응용 프로그램이 상호작용하는 방식으로 응용 프로그램을 테스트하는 것은 더욱 좋은 테스트 방식이다.당신의 테스트는 더욱 현실적이고 당신을 더욱 안심시킬 수 있으며, 당신의 응용 프로그램은 당신의 사용자를 위해 정상적으로 일할 수 있다.
그 밖에 또 다른 장점은 예쁜 코드 커버율을 보는 것이다!

focus trap react의 테스트 키트와 코드 덮어쓰기