React Native 앱 테스트 (Part-1)

(2020 년 12 월 21 일)

소개

대부분의 개발자는 테스트를 지루하고 작성하는 데 어려움을 겪지 만 그 사실을 알고 있습니까? 의미 있고 유지 관리 가능한 테스트를 작성하는 방법을 아는 데는 훌륭한 기술과 경험이 필요합니다. 코드를 테스트하는 방법을 배우면서 얻은 지식은 개발 과정에서 코드를 작성하는 방식도 바꿀 것입니다. 이 문서는 테스트 여정을 시작하는 데 도움이 될 것입니다.

더 나은 테스트를위한 가이드 라인

다음은 다른 개발자가 코드를 테스트하는 방법을 조사한 후 배운 가이드 라인 중 일부입니다. 이 지침을 따르면 코드베이스 전체에서 테스트를 작성하고 유지하는 것이 더 쉬워졌습니다.

1. 코드 구현을 테스트하지 마세요.

이것이 중요한 이유를 이해하기 위해 시나리오를 살펴 보겠습니다. n 를 입력으로 받아 첫 번째 n 숫자.

add2 times 인수 (0, 2)(2, 1) 각각 는 3입니다.

나중에 첫 번째 n 숫자를 입력하고 위 코드를 다시 작성합니다.

더 이상 add

를 호출하지 않기 때문에 테스트가 중단되기 시작합니다.

이것은 간단한 예입니다. y 직관에 반하는 것처럼 보일 수 있지만, 많은 개발자들이 실수를보기가 쉽지 않은 곳에서 정확히 이런 종류의 테스트를 수행하는 것을 보았습니다.

2. 테스트가 또 다른 기술적 문제가되지 않도록합니다.

테스트는 중요하지만 관련 이해 관계자에게 제 시간에 코드를 제공해야합니다. 새 기능을 작성하거나 기존 기능을 수정할 때마다 이전 테스트 케이스가 깨지거나 필요한 기능을 빌드하는 대신 이전 테스트 케이스를 수정하는 데 할당 된 시간을 상당량 소비하게되면 결국 삭제하게됩니다. 모든 오래된 테스트와 프로젝트가 프로덕션에서 실패 할 위험이 있습니다.

이 지침을 따르면 테스트를 쉽게 고칠 수 있거나 코드베이스가 변경 될 때 전혀 중단되지 않도록하는 데 도움이됩니다.

3. UI를 테스트 할 때 실제 사용자 행동을 시뮬레이션하는 방식으로 테스트를 작성합니다.

테스트 중이라고 가정합니다. 이 버튼이 렌더링되고 예상대로 작동하는지 여부는 먼저 사용자가이 버튼을 찾고 상호 작용하는 방법에 대해 생각합니다. 나는 그들이“제출”텍스트를 본 다음 그것을 누르기를 바라고 있습니다. 이것이 바로 우리가 시뮬레이션 할 것입니다. 테스트 케이스에서는 먼저 “Submit”텍스트를 검색 한 다음 “onPress”이벤트를 시뮬레이션 한 다음 수행해야 할 작업을 주장합니다.

어떤 경우에는 그렇지 않을 수도 있습니다. 타겟팅하려는 구성 요소를 쉽게 고유하게 식별 할 수 있습니다.이 경우 testID prop을 사용할 수 있지만 testID 사용자가 testID를 기반으로 구성 요소를 타겟팅하지 않기 때문입니다.

이게 왜 중요한가요? UI를 테스트 할 때 가능한 한 사용자 행동을 시뮬레이션해야하는 이유는 무엇입니까? 이는 결국 컴퓨터가 아닌 UI와 상호 작용하는 사람이 될 것이며 버튼에 “제출”이 아닌 “Hello”가 렌더링되는 것을 볼 경우 테스트 케이스가 실패해야하기 때문입니다. 이는 최종 사용자를 방해 할 수있는 것입니다.

4. 순수 함수는 순수 함수보다 테스트하기 더 쉽습니다.

순수 함수는 해당 입력에 대해 항상 동일한 출력을 제공하는 함수입니다. 즉, 순수 함수가 2 1의 경우 항상 그렇게하는 반면, 불순한 함수는 첫 번째 호출에서 2를 펌프 아웃 한 다음 펌프 아웃 5

코드를 작성할 때 염두에두면 편리합니다. 불순한 함수는 그러한 함수에 “불순물”을 도입하는 모듈이 모의 가능한 경우 테스트하기 더 쉬워 질 수 있습니다.

5.테스트에서 조명기를 입력 및 어설 션으로 사용

employee 유형의 개체가 있고 name, 직원이 성인인지 아닌지 확인하는 기능 등입니다.

이제 모든 테스트 사례에서이 개체를 입력으로 사용한다고 가정합니다.

이것은 더미 데이터 또는 “비품”입니다. 이름을 대문자로 표시하는 함수가 예상대로 작동하는지 여부를 테스트하는 첫 번째 테스트 사례에서는 출력이 { ...employee, name: employee.name.toUpperCase() }와 같다고 주장하고 두 번째 테스트 사례에서는 다음을 주장합니다. 함수가 employee.age >= 18를 출력하는지 여부 등.

이러한 방식으로 조명기를 사용하면 어떤 이점을 얻을 수 있는지 궁금 할 것입니다. 대답은 이러한 방식으로 테스트를 작성하여 향후 테스트를보다 쉽게 ​​수정할 수 있도록한다는 것입니다.

예 : 이제 모든 직원이 결혼 상태를 공개해야하므로 직원 개체에 다른 속성 maritalStatus을 추가하려면 어떻게해야합니까? 첫 번째 테스트 사례에서 출력이 { ...employee, name: employee.name.toUpperCase() } 대신 { name: "KARTIK", age: 25, sex: "Male", children: 0 }라고 주장하면 테스트 사례가 중단됩니다. name의 값을 다른 것으로 변경하면 또한 중단됩니다. 즉, 테스트 케이스는 전혀 유연하지 않으므로 코드베이스의 관련없는 변경으로 인해 중단 될 가능성이 더 높습니다.

6. 구성 요소 및 유틸리티 함수에 대한 단위 테스트 작성

여러 모듈에서 사용할 코드의 일부입니다. 따라서 다른 모듈이 이러한 기능 / 구성 요소를 어떻게 사용할지 모르기 때문에 가능한 모든 입력 / 엣지 케이스에 대해 테스트해야합니다. 따라서 예상치 못한 동작이 없어야합니다.

7. 화면에 대한 통합 테스트 작성

일반적으로 화면에 대한 단위 테스트는 많은 구성 요소와 redux 저장소와 같은 타사 라이브러리에 의존하기 때문에 작성하기가 어렵습니다. 따라서 화면에 대한 단위 테스트를 작성하려면 먼저 이러한 모든 종속성을 모의 처리해야합니다. 이는 많은 작업입니다. 그렇기 때문에이 경우 통합 테스트를 작성하는 것이 좋습니다.

7. 네이티브 코드 테스트를위한 E2E 테스트 작성

네이티브 코드는 jest 환경에서 실행되지 않습니다. 따라서 테스트하려면 Detox와 같은 라이브러리를 사용해야합니다.

8. 항상 화면 및 구성 요소에 대한 스냅 샷 테스트를 수행합니다.

여러 다른 화면 / 구성 요소에서 사용중인 구성 요소에서 스타일을 변경하면 스냅 샷을 업데이트 할 때까지 해당 구성 요소에 대한 스냅 샷 테스트가 실패합니다. 변경 사항의 영향을받은 다른 모듈을 이해하는 데 도움이됩니다. 팀에서 작업하는 경우 해당 모듈의 스냅 샷 변경 사항이 PR에 반영되기 때문에 PR 검토 중에 검토자가 구성 요소에서 수행 한 특정 변경 사항의 영향을받은 모듈을 이해하는 데 정말 도움이됩니다.

결론

이 기사가 도움이 되었기를 바라며 방금 읽은 내용이 혼동 되더라도 걱정하지 마십시오. 이 시리즈의 두 번째 부분은 첫 번째 부분에서 설정 한 지침에 따라 화면, 구성 요소 및 기능을 테스트하는 코드 예제와 함께 React Native에서 테스트 환경을 설정하는 방법에 대한 자습서입니다.

답글 남기기

이메일 주소를 발행하지 않을 것입니다. 필수 항목은 *(으)로 표시합니다