[FE 면접/React] 프론트엔드 테스트

 

 

 

 

 

1. 프론트엔드.. 테스트가 필요할까요?

예전에는 프론트엔드 환경이 엄청나게 복잡하지 않아 프론트엔드 테스트를 잘 진행하지 않았습니다.

하지만, 최근 몇 년간 프론트엔드 개발 환경이 급격하게 발전함에 따라 프론트엔드가 점점 더 중요해지고, 프론트엔드를 관리할 필요성이 생김에 따라 프론트엔드 테스팅도 같이 주목을 받기 시작했습니다.

 

 

테스트가 뭔가요?

테스트란, 우리가 작성한 코드가 잘 작동한다는 것을 검증하는 작업을 의미합니다. 

즉, 테스트 코드는 개발자가 코드를 작성한 의도대로 프로그램이 동작한다는 것을 보장해 줍니다. 

하지만 우리가 만든 프로젝트의 모든 기능을 사람이 수동으로 하나하나 확인하는 것은 정말 번거롭습니다. 그래서 '테스트자동화' 작업을 시행합니다.

 

사람이 직접 확인하는 것이 아니라 테스트를 하는 코드를 작성해서, 테스트 시스템이 자동으로 확인을 해줄 수 있게 하는 것을 "테스트 자동화" 라고 합니다.

 

 

2. 테스트 자동화의 장점

1. 코드 변경에 대한 자동 검증
   테스트 코드를 작성해두었다면, 협업 시 코드를 수정하였더라도, 최초의 코드 작성자가 의도했던대로 결과가 나오는지 확인할 수 있습니다.
2. 코드 리팩토링 사이트 이팩트 최소화
   코드 리팩토링 시 예상치 못한 결과가 나왔다면 쉽게 파악할 수 있으며, 이로 인해 개발자들은 빠르게 버그를 수정할 수 있습니다.
3. 안정성 향상
   자동화된 테스트는 일관된 결과를 보장하므로 코드의 안정성과 신뢰성을 높일 수 있습니다.
4. 테스트 커버리지 향상
   수동 테스트 시 놓칠 수 있는 테스트 케이스를 자동화된 테스트를 사용한다면 모든 테스트 케이스를 실행하므로 테스트 커버리지를 높일 수 있습니다
5. 유지보수성 향상
   자동화된 테스트는 코드의 유지보수성을 높입니다. 테스트 코드를 작성함으로써 코드의 동작 방식을 이해하고 변경할 수 있으며, 이는 코드의 유지보수성을 높이는 데 큰 도움이 됩니다.
   

 

3. 테스트 유형 3가지

Unit Tests (단위 테스트)	최소 단위의 util 함수, 커스텀 리액트 hook, 하나의 컴포넌트 테스트
Integration Tests (통합 테스트)	어떤 어플리케이션에서 여러개의 요소들이 같이 돌렸을 때 어떻게 동작하는지 확인하는 테스트
End-to-end Tests (E2E)	어떤 사용자가 웹앱을 사용하는 것처럼 시뮬레이션 돌린다 (이때 서버, 인프라, 웹앱 모두 테스트하게 된다)

 

1. 유닛 테스트

코드의 유닛단위를 테스트 합니다. 프론트엔드 코드에서 유닛은 단일 컴포넌트 혹은 단일 서비스가 될 수 있습니다.

하지만, 소프트웨어의 구조가 명확하지 않고, 단일 유닛의 기능이 자주 변경되는 환경에서는 테스트가 자주 변경되어야 하고, 이는 테스트 작성의 효율을 떨어뜨리기 때문에 도전적인 프로젝트에서는 추천하지 않습니다.

 

예시

• 컴포넌트가 잘 렌더링된다.
• 컴포넌트의 특정 함수를 실행하면 상태가 우리가 원하는 형태로 바뀐다
• 리덕스의 액션 생성 함수가 액션 객체를 잘 만들어낸다
• 리덕스의 리듀서에 상태와 액션객체를 넣어서 호출하면 새로운 상태를 잘 만들어준다.

 

2. 통합 테스트

통합 테스트의 경우 유닛들 간의 데이터를 주고 받는 환경을 테스트합니다.

통합 테스트의 전략에 따라 프론트엔드 전체 유닛들만 통합하여 테스트하거나, 백엔드와 데이터베이스까지 전체를 통합해서 테스트를 하는 경우도 있다.

 

예시

• 여러 컴포넌트들을 렌더링하고 서로 상호 작용을 잘 하고 있다.
• DOM 이벤트를 발생 시켰을 때 우리의 UI 에 원하는 변화가 잘 발생한다.
• 리덕스와 연동된 컨테이너 컴포넌트의 DOM 에 특정 이벤트를 발생시켰을 때 우리가 원하는 액션이 잘 디스패치 된다.

 

3. e2e 테스트

e2e는 end to end의 약자로, 소프트웨어의 가장 끝단인 사용자로 부터 가장 끝단인 백엔드 인프라까지 테스트하는 것을 의미합니다.

다른 테스트와 달리 전체 시나리오를 테스트하기 때문에 SW 무셜성을 보장하기 가장 좋습니다.

하지만, 사용자 관점에서 전체 시나리오를 테스트하기 때문에 전체를 테스트하기 위해선 굉장히 많은 테스트가 필요합니다. 또한, 프론트엔드만 따로 테스트하는 것이 불가능하며, 백엔드와의 통합이 필요합니다.

 

 

 

[참고자료]

https://techblog.woowahan.com/8942/

https://learn-react-test.vlpt.us/#/?id=%ed%85%8c%ec%8a%a4%ed%8a%b8-%ec%9e%90%eb%8f%99%ed%99%94%eb%a5%bc-%ed%86%b5%ed%95%b4-%ec%96%bb%ec%9d%84-%ec%88%98-%ec%9e%88%eb%8a%94-%ec%9d%b4%ec%a0%90
https://team.modusign.co.kr/%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C%EC%97%90%EC%84%9C-%EC%9D%98%EB%AF%B8%EC%9E%88%EB%8A%94-%ED%85%8C%EC%8A%A4%ED%8A%B8-%EC%BD%94%EB%93%9C-%EC%9E%91%EC%84%B1%ED%95%98%EA%B8%B0-4992409c7f2d

https://medium.com/wantedjobs/%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-%ED%85%8C%EC%8A%A4%ED%8A%B8%EC%9D%98-%EB%AA%A8%EB%93%A0-%EA%B2%83-48912486f72d

https://blog.mathpresso.com/%EB%AA%A8%EB%8D%98-%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-%ED%85%8C%EC%8A%A4%ED%8A%B8-%EC%A0%84%EB%9E%B5-1%ED%8E%B8-841e87a613b2

https://velog.io/@couchcoding/%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-%ED%85%8C%EC%8A%A4%ED%8A%B8-%EC%96%B4%EB%96%BB%EA%B2%8C-%ED%95%B4%EC%95%BC%ED%95%A0%EA%B9%8Cwith-react-testing-library