8 다음 개발 프로젝트를 위한 React 테스트 라이브러리 및 유틸리티

게시 됨: 2021-06-22

테스트를 통해 애플리케이션에 추가 기능이 추가되지는 않지만 애플리케이션을 프로덕션 환경에 배포할 수 있다는 확신을 갖게 됩니다.

나는 당신이 이미 테스트에 익숙하다고 생각하며 React 애플리케이션의 테스트 라이브러리에 대해 알기 위해 여기에 왔습니다. 그렇다면 올바른 위치에 있습니다. 다양한 유형의 라이브러리를 살펴보기 전에 테스트가 애플리케이션 품질과 개발 시간에 어떤 영향을 미치는지 빠르게 살펴보겠습니다.

테스트 효과

당신 중 일부는 응용 프로그램에 대한 테스트를 작성하는 데 시간이 걸리는 과정이라고 느낄 수 있습니다. 지금은 이것을 건너뛰자. 아니요, 응용 프로그램에 대한 테스트를 작성하는 것은 시간 낭비가 아닙니다.

테스트가 없는 애플리케이션을 개발했다고 가정해 보겠습니다. 100개 이상의 기능을 갖추고 있습니다. 상당한 시간이 지나면 3개월이라고 합니다. 고객은 이전에 개발한 100가지 기능에서 5가지 새로운 기능을 추가하고 2가지 기능을 조정하기를 원합니다.

당신은 그것에 아무런 문제가 없고 그것들을 모두 완료하고 코드를 프로덕션에 배송했습니다(평소와 같은 테스트 없이). 며칠 후 고객이 다시 귀하에게 와서 이전 기능이 손상된다고 말했습니다. 그리고 그 이유를 이해하지 못하셨나요? 다시 한 번 문제를 해결하는 데 상당한 시간을 할애했습니다. 문제를 해결한 후 자신감을 잃기 시작했습니다.

그 자신감을 얻는 방법?

그리고 문제 해결에 소비한 추가 시간을 절약하십시오. 한 가지는 모든 일을 올바르게 수행할 것입니다. 즉, 테스트입니다.

애플리케이션에 대한 테스트를 작성했다고 가정해 보겠습니다. 새로운 기능을 개발하거나 이전 기능을 조정하면 테스트를 다시 실행합니다. 이 경우 제품 자체로 이동하기 전에 문제에 대해 알게 됩니다. 시간을 많이 절약하고 응용 프로그램의 품질에 대해 확신할 수 있습니다.

이제 다음 React 프로젝트를 위한 다양한 테스트 라이브러리를 살펴볼 차례입니다.

테스트 라이브러리

테스트 라이브러리는 UI 구성 요소를 테스트하는 데 도움이 되는 패키지 그룹입니다. 우리의 초점은 React Testing Libray에 있습니다.

반응 테스트 라이브러리는 React DOM 테스트를 위한 완전한 유틸리티 세트가 포함된 경량 라이브러리입니다. 라이브러리의 구현 세부 정보를 제공하지 않고 반응 구성 요소 를 테스트할 수 있습니다. 테스트를 더 쉽게 만들어 더 많은 자신감을 얻는 데 도움이 됩니다.

대부분의 경우 Jest 테스트 라이브러리와 함께 작동합니다. 테스트를 위한 간단한 방법과 유틸리티를 제공하고 테스트의 모범 사례를 따르도록 안내합니다.

반응 테스트 라이브러리의 일부 기능은 다음과 같습니다.

구성 요소의 내부 상태 테스트는 신경 쓰지 않습니다.
구성 요소의 렌더링 결과를 테스트합니다.
클래스의 인스턴스 대신 DOM 노드를 테스트합니다.
라이브러리의 DOM 요소에 액세스하는 사용자 정의 방법을 제공합니다.
UI가 제대로 작동하는지 확인합니다.
그것은 큰 커뮤니티 지원을 가지고 있습니다.

농담

Jest는 JavaScript 및 TypeScript 코드를 테스트하기 위한 테스트 프레임워크입니다. 그리고 프런트 엔드 라이브러리와 잘 통합됩니다. Facebook에서 개발 및 유지 관리합니다. React 팀은 React 애플리케이션의 테스트를 위해 이것을 권장합니다.

주변의 다른 모든 테스트 라이브러리보다 다운로드가 가장 많습니다. Jest는 반응 테스트 라이브러리와 함께 React 테스트에 더 강력할 것입니다. 그리고 대부분의 개발자는 테스트에 이 조합을 사용합니다.

Jest의 일부 기능은 다음과 같습니다.

테스트는 서로 격리되어 있습니다.
코드 커버리지를 제공합니다.
빠릅니다.
함수를 조롱하는 방법을 제공합니다.
테스트를 위해 다양한 종류의 예외를 제공합니다.

효소

효소는 React 구성 요소의 테스트를 위한 테스트 유틸리티입니다. 이를 통해 React 구성 요소 렌더링된 출력을 탐색하고 쉽게 조작할 수 있습니다. 에어비앤비에서 만들었습니다.

React 구성 요소의 테스트를 위해 jest, mocha, jasmine 등과 같은 다른 테스트 러너와 함께 사용해야 합니다. React 구성 요소를 렌더링하고 테스트하는 추가적이고 쉬운 방법을 제공합니다. 그리고 React 라이브러리에서만 작동합니다.

모카

Mocha는 테스트를 간단하게 만드는 테스트 프레임워크입니다. NodeJS에서 실행됩니다. 테스트 러너는 React 테스트를 위한 다른 테스트 라이브러리와 함께 작동합니다.

Mocha의 일부 기능은 다음과 같습니다.

테스트 커버리지 보고서를 제공합니다.
구성 파일로 완전히 구성할 수 있습니다.
비동기 테스트 시간 초과 지원.
테스트를 기반으로 한 시간 초과입니다.
느린 테스트도 강조 표시합니다.

Mocha의 홈 페이지에는 다른 많은 기능이 있습니다.

업

Karma는 애플리케이션을 위한 테스트 환경입니다. 이를 통해 실제 브라우저 및 장치(모바일, 태블릿 및 데스크톱)에서 테스트를 실행할 수 있습니다. 테스트를 위해 개발자에게 다양한 환경을 제공하는 것을 목표로 합니다.

Karma의 일부 기능은 다음과 같습니다.

실제 장치에서 코드를 테스트하십시오.
PhantomJS와 같은 헤드리스 환경에서 코드를 테스트할 수 있습니다.
Jenkins , Travis 및 Semaphore 와 같은 CI/CD 도구와 Karma를 통합할 수 있습니다.
Mocha , Jasmine 등과 같은 다른 테스트 프레임워크와 쉽게 통합할 수 있습니다.
IDE로 디버깅이 쉬워졌습니다.

재스민 속

Jasmine은 JavaScript용 BDD(행동 주도 개발) 테스트 프레임워크입니다. 코드 테스트를 위해 DOM이 필요하지 않습니다. Jasmine은 NodeJS 코드 테스트용으로 설계되었습니다. Jasmine 및 기타 테스트 라이브러리로 React를 테스트할 수 있습니다.

Jasmine의 일부 기능은 다음과 같습니다.

테스트 작성을 위한 깨끗하고 쉬운 구문이 있습니다.
프론트엔드와 백엔드 모두에 대한 테스트를 작성할 수 있습니다.
jasmine의 핵심에는 종속성이 없으므로 빠르게 만듭니다.

차이

Chaiis 어설션 라이브러리. 다른 JavaScript 테스트 라이브러리와 쌍을 이룰 수 있습니다. Chai는 주장을 제외하고 should , assert 와 같은 기능을 제공합니다.

사이프러스

Cypress는 JavaScript 종단 간 테스트 프레임워크입니다. 이를 통해 브라우저에서 테스트를 설정, 작성, 실행 및 디버그할 수 있습니다. 작성하는 각 테스트의 상태에 대한 자세한 보고서를 제공하는 대시보드가 있습니다.

Cypress는 개발자 도구에도 액세스할 수 있는 실제 브라우저 환경에서 테스트를 실행합니다. 애플리케이션에서 기능의 종단 간 흐름을 테스트하는 데 사용됩니다.

Cypress의 일부 기능은 다음과 같습니다.

모든 단계의 스냅샷을 볼 수 있습니다. 테스트를 실행하는 동안 각 단계의 스냅샷을 만듭니다.
DevTools로 쉽게 디버깅할 수 있습니다.
Cypress는 React 실시간 기능과 유사한 테스트를 변경할 때 테스트를 자동으로 다시 실행합니다.
테스트는 wait 문을 사용하지 않고 자동으로 출력을 기다립니다.

결론

테스트를 작성하는 것은 귀하와 응용 프로그램에 좋습니다. 어려운 시기에 일이 쉬워집니다. 그것에 대해 변명하지 마십시오. 기사에서 테스트 라이브러리의 순서는 중요하지 않습니다. 그것은 단지 계산을위한 것입니다. 다른 도서관보다 낮은 도서관은 없습니다. 각 라이브러리에는 고유한 장점과 단점이 있습니다.

React Testing Library 와 Jest 를 사용하여 React 애플리케이션의 전체 기능을 대부분 테스트할 수 있습니다. 그리고 대부분의 React 커뮤니티 구성원이 권장합니다. 이 두 가지를 반드시 사용해야 하는 것은 아닙니다. 초보자라면 시도해 볼 수 있습니다. React 애플리케이션에 대해 더 구체적인 것을 찾고 있다면 각 라이브러리를 살펴보십시오.

행복한 테스트