React 테스팅의 개념과 종류

React 테스팅의 개념과 종류

테스팅이란

우리는 개발자로서 코드를 작성해서 특정 속성을 구현하거나 특정 문제를 해결하고 이 애플리케이션을 브라우저에서 먼저 보고 시험적으로 테스트한다.

이것들은 수동적인 테스팅이고 항상하고 있는 것인데 이런 수동적인 앱 테스팅은 오류 발생이 쉽다.

수동으로는 가능한 모든 조합과 시나리오를 테스트하기 어렵기 때문이다.

복잡한 리액트 앱에서 새로운 속성을 추가한다거나 기존의 속성을 변경한다면 이 변경에 대한 테스트 또는 새로운 속성에 대한 테스트는 하겠지만 애플리케이션의 다른 모든 부분을 항상 테스트 하지는 않을 것이다.

어떤 것을 변경한 것이 앱에서 다른 속성을 손상시킬 수 있고 우리가 모든 것을 항상 테스팅 하는 것이 아니기 때문에 손상을 유발한 변경사항과 버그를 그냥 지나칠 수 있다.

그렇기 때문에 자동 테스팅을 하는 것이다.

이것이 수동 테스트를 대체하는 것이 아니고 수동 테스트에 추가하는 것이다.

자동 테스팅은 추가적인 코드를 작성해서 코드가 실행되면서 다른 코드를 테스트한다.

자동 테스팅의 장점은 전제 애플리케이션을 자동으로 테스트하는 코드를 작성하기 때문에 항상 모든 것을 테스트할 수 있다는 것이다.

수동 테스팅과 함께하면 오류들을 훨씬 더 일찍 잡을 수 있고 더 나은 코드를 작성할 수 있다.

테스팅의 종류

Unit Tests

단위 테스트는 애플리케이션의 가장 작은 단위에 대한 테스트를 작성하는 것이다.

애플리케이션에서 사용하는 개별 함수들이나 리액트 앱의 경우엔 일부 컴포넌트를 테스팅 하는 것이다.

애플리케이션을 구성하는 모든 단위, 모든 함수 및 컴포넌트를 테스트 하기에 프로젝트에는 일반적으로 많은 단위 테스트가 포함되며 가장 일반적이고 중요한 종류의 테스트이다.

기본적인 아이디어는 모든 개별 단위를 자체적으로 테스트 하면 전체 애플리케이션도 작동한다는 것이다.

하지만 전체 애플리케이션도 실제로 작동 하는지 확인하기 위해서 이 모든 단위들을 모아서 통합테스트를 해볼 수 있다.

Integration Tests

통합테스트는 여러개의 구성 요소가 함께 작동 되는지를 테스트한다.

프로젝트에는 일반적으로 몇가지 통합테스트가 포함되지만 단위테스트 만큼 많지는 않다.

리액트 앱을 테스팅 할 때 단위테스트와 통합테스트를 구별하는 것이 항상 쉬운 것은 아닌데 컴포넌트를 테스트할 때 한 컴포넌트가 다른 컴포넌트들도 사용하기 때문이다.

따라서 일반적으로 통합테스트도 매우 중요하다.

End-to-End(e2e) Tests

종단간 테스트는 애플리케이션의 전체 워크플로우를 테스트하는 것이라 할 수 있다.

실제로 사람이 웹사이트에서 수행하는 작업을 재현하는 것을 목표로 한다.

수동 테스트로도 할 수 있는 것을 단지 자동화하는 것이다.

단위테스트와 통합테스트 만큼 많지는 않는데 단위 및 통합 테스트가 잘 작동한다면 전제적으로 앱이 잘 작동한다고 꽤 확신할 수 있고 단위 및 통합 테스트가 더 테스트 하기도 쉽기 때문이다.

그리고 가능한 모든 단위에 대해서 서로 다른 시나리오를 테스트해서 시나리오를 테스트하는 것이 앱을 전체로 보고 가능한 모든 시나리오를 테스트 하느 것보다 훨씬 쉽다.

테스팅 도구

왜 테스트가 필요한지에 대한 대략적인 개념이 잡혔고 그리고 테스트는 우리가 작성한 코드를 테스트하는 코드라는 것을 알았다.

그럼 이 코드를 어디에 작성하고 이 테스팅 코드를 어떻게 실행할지가 의문이다.

테스팅 코드를 실행하고 결과를 확인하기 위한 도구가 필요하다.

그리고 리액트 앱에서는 자동화된 테스트와 함께 사용할 리액트 앱과 컴포넌트들의 렌더링을 시뮬레이팅할 방법이 필요하다.

테스팅 코드를 실행하고 결과를 확인하는 부분에 대해서는 보통 jest를 사용한다.

리액트 앱에서 컴포넌트를 렌더링하고 시뮬레이팅 하는 부분에 대해서는 리액트 테스팅 라이브러리를 주로 사용한다.

create-react-app으로 생성한 프로젝트에서 작업할 경우 이 두가지 도구는 모두 이미 설치 및 설정이 되어 있다.

package.json을 보면 testing-library 패키지를 볼 수 있다.