[면접] 프론트엔드 테스트 코드(ex: 유닛 테스트 등)

프론트엔드 테스트 코드

테스트 코드를 작성해야하는 이유는 무엇인지 말해주세요

우선 테스트 코드를 통해 코드 품질을 향상 시킬 수 있습니다 테스트 코드를 작성하고 테스트를 하며 사전에 버그를 찾아내 수정할 수 있고, 이를 통해 품질을 향상 시킬 수 있습니다 그리고 업데이트를 하거나 코드를 변경할 때 기존 기능이 잘 작동하는지 확인할 수 있습니다 그리고 다른 개발자가 해당 기능의 테스트 코드를 보고 어떻게 동작하는지를 알 수 있기 때문에 개발자 간의 커뮤니케이션에 도움이 될 수 있습니다 그리고 리팩토링에도 도움을 줄 수 있습니다 왜냐하면 리팩토링 이후에도 기능이 정상적으로 동작하는지 확인할 수 있기 때문입니다

단위 테스트와 통합 테스트의 차이점은 무엇인가요?

단위 테스트(Unit Test)

개별적인 코드 단위(함수, 메소드)가 의도한대로 작동하는지를 테스트함
개별 코드 단위를 테스트 함
각각의 코드 단위가 정확한 입력값과 출력값을 리턴하는지 확인함

통합 테스트(Integration Test)

서로 다른 모듈들 간의 상호작용을 테스트함 ex: API 서버 내의 DB 호출 함수가 데이터베이스의 데이터를 잘 호출하고 있는지 테스트
단위 테스트에 비해 통합 테스트 작성하기 어려움 각 모듈들의 설정 방법을 알아야하고 테스트에 영향을 끼치는 요인들이 데이터나 로직뿐만 아니라 통신이나 해당 모듈의 환경 설정 정보 등이 있기 때문임
단위 테스트보다 테스트 시간이 오래 걸리지만 전체적인 소프트웨어 시스템의 신뢰성과 안정성을 높일 수 있음

End-to-End 테스트에 대해서 설명하고, 이를 언제 사용해야하는지 설명해주세요

TDD(test-driven development)와 BDD(behavior-driven development) 대해서 설명해주세요

TDD

테스트 주도 개발
unit test 같은 테스트 코드를 먼저 작성 -> 테스트 통과하는 코드를 짬
테스트 코드를 먼저 작성한 후 개발을 진행함
소프트웨어를 빠르게 개발할 때 사용하는 방법
처음 개발해보는 프로그램이거나 변경이 잦은 프로그램일 때 TDD 방식으로 개발을 진행하면 좋음

BDD

행동 주도 개발
TDD에서 파생
테스트 케이스 자체가 요구 사항이 되도록 개발하는 방식
사용자의 행위를 기반으로 테스트 시나리오를 구성해 테스트 케이스를 구성하는 방법
시나리오는 개발자가 아닌 사람이 봐도 이해할 수 있어야 함
시나리오는 Given, When, Then 구조를 가짐

예시
1. Given(=주어진 환경)
‘사용자 행위’를 수행하기 위해 주어진 ‘환경’에 대해 서술합니다.
해당 단계에서는 시스템이나 애플리케이션의 초기 상태, 환경, 입력 등에 대해 서술합니다.

ex) “사용자가 페이지에 접속해 있는 상황에서“

When(= 행위)

실제 사용자 행위에 대해서 서술합니다.
해당 단계에서는 시스템이나 애플리케이션 내에 발생하는 특정 조건이나 이벤트들에 대해 서술합니다.

ex) “사용자 아이디 필드에 ‘adjh54’을 입력하고 비밀번호 필드에 ‘12345’를 입력하고 ‘로그인’ 버튼을 누르면”

Then(= 기대결과)

행위에 따른 기대결과를 서술합니다.
해당 단계에서는 예상되는 동작이 실제로 발생하는지 확인하고 기대한 결과가 나오는지에 대한 검증을 수행하여 서술합니다.

ex) “로그인이 성공하고 메인 페이지로 이동한다”

💡 최종적으로 아래의 테스트 시나리오가 나오게 됩니다.

“사용자가 페이지에 접속해 있는 상황에서(Given)”, “사용자 아이디 필드에 ‘adjh54’을 입력하고 비밀번호 필드에 ‘12345’를 입력하고 ‘로그인’ 버튼을 누르면(When)”, “로그인이 성공하고 메인 페이지로 이동한다(Then)”

프론트엔드에서 사용하는 테스트 도구들은 어떤 것들이 있는지 설명해주세요

Jest, Mocha, Jasmine 등의 JavaScript 테스팅 프레임워크가 있습니다. 이 외에도 테스트 러너로 Karma, 브라우저 기반의 E2E(End-to-End) 테스트 도구로는 Cypress, Puppeteer 등이 있습

테스트 커버리지(Test Coverage)가 무엇인지, 그리고 왜 중요한지 설명해주세요

테스트 리커버리지는 어떤 부분이 테스트되었는지를 측정하는 지표를 말함. 즉, 작성된 테스트 코드가 얼마나 많은 코드를 검증하고 있는지를 나타내는 수치임

테스트 커버리지는 주로 퍼센트로 표현되며, 이 값이 높을수록 테스트되는 코드의 비율이 높다는 것을 의미함 (ex: 테스트 커버리지: 80% -> 전체 코드 중 80%가 테스트로 검증되었다는 뜻)

종류 라인 커버리지(Line Coverage): 테스트가 수행되면서 실행된 라인의 비율을 나타냄 브랜치 커버리지(Branch Coverage): 테스트가 수행되면서 실행된 분기(조건문 등)의 비율을 나타냄 함수 커버리지(Function Coverage): 테스트가 수행되면서 호출된 함수나 메소드의 비율을 나타냄

테스트 커버리지는 높을수록 좋지만 100%의 테스트 커버리지가 모든 버그를 잡아낼 수 있는 것은 아니고, 테스트 커버리지는 테스트의 완전성을 판단하는 하나의 지표일 뿐이라 테스트의 질이나 테스트 케이스의 적절성을 보장하지 않음. 따라서 테스트 케이스가 실제로 요구사항을 잘 검증하고 있는지를 확인하는 것이 더욱 중요함

Jest나 Mocha 등의 테스팅 프레임워크에 대해 사용 경험이 있다면, 그 경험에 대해 설명해주세요

-> 없지만... 소록소록 리팩토링 해보면서 한번 해보겠음...

Mocking이 무엇인가요?

실제로 존재하지 않는 값 즉, Mock 데이터(=가짜 데이터, 모의 데이터)를 만들어서 테스트 하는 것을 말함

백엔드 API를 사용해 개발해야하는 부분이 있는데 백엔드에서 개발이 완료되기 전까지는 프론트에서는 개발을 진행할 수 없음 하지만 다 개발되기 전까지 기다리는 것은 비효율적임 때문에 mock data를 만들어서 개발을 진행함 하지만 나중에 API가 나오면 하드코딩한 값이나 객체들을 일일히 지워야하는 공수가 발생해서 비효율적임

mock api server를 만들어 테스트할 수도 있으나 별도의 웹서버를 만들어야한다는 점에서 시간이 듦 검색해보니 MSW를 사용해 mocking할 수 있게 도와주는 라이브러리를 많이 사용한다고 함

Hah-nna / Tech_Interview