인프런 커뮤니티 질문&답변

Jeenie님의 프로필 이미지
Jeenie

작성한 질문수

2시간으로 끝내는 프론트엔드 테스트 기본기

cypress에서 HTTP request mocking

테스트시 api 통신에 관한 질문입니다.

해결된 질문

작성

·

408

1

안녕하세요. 강의 열심히 수강중인 수강생입니다.

jest와 cypress 강의를 보다가 보면 url 통신을 하는 부분은 실제 api 통신이 아닌, 미리 준비해둔 가상의 데이터를 사용하는데, 왜 테스트 시에는 mocking을 해주는 건가요? 구글링 해보면 테스트 코드의 의존성을 제거하기 위함이다 라고 많이 나오는데 개발자가 준비해둔 가상의 데이터를 response 해주면 결국 테스트 자체는 뭘 해도 다 ok가 될텐데 이러면 테스트라는거 자체가 의미가 없는게 아닌가요? 구글링해서 테스트시에 mock 처리를 해주는 이유를 찾아봤는데, 이게 결국은 내가 만들어둔 더미데이터를 넣어주면 무조건 그대로 움직이게 되는데 그러면 이 테스트 자체를 하는게 어떤 의미인지를 잘 모르겠습니다.

제가 뭔가 잘못 생각하고 있는건지... 질문 한번 올려봅니다.

 

 

답변 2

1

Jeenie님의 프로필 이미지
Jeenie
질문자

답변 감사합니다.

덕분에 다 이해가 됐습니다.

0

강병진님의 프로필 이미지
강병진
지식공유자

Jeenie님 안녕하세요! 좋은 질문 감사합니다.

프론트엔드에서 http request를 mocking하는 이유는, 백엔드가 변경되거나, 백엔드에 문제가 있더라도 일관성 있게 테스트 하기 위함입니다. 구글링해서 찾으신 구글링 해보면 테스트 코드의 의존성을 제거가 이 맥락에 해당한다고 보시면 됩니다.

그리고 추가로 mocking하지 않았을 때 발생하는 문제에 대해 생각해봤는데요,

만약 HTTP Request를 mocking하지 않고 테스트 할 때마다 서버로 요청을 보내게 되면,

  1. HTTP Request 성공을 테스트 한다고 할 때, 서버가 항상 정상적으로 운영중이어야만 테스트가 가능합니다

  2. 그리고 CI/CD pipeline을 통해 배포하는 과정에서 서버 문제로 인해 프론트엔드 테스트에서 에러가 발생해서 배포가 지연될 가능성이 있습니다.

    1. 서버가 정상적으로 운영중이라고 해도, HTTP Request응답이 오래걸린다면 테스트에 불필요하게 시간이 많이 소요될 수도 있습니다.

  3. 테스트 과정에서 운영중인 서버로 과도하게 요청이 들어가게 된다면, 불필요한 부하가 걸려서 사용자가 서비스를 사용하는데 불편함을 겪을 수 있습니다.

  4. 만약 로그인을 테스트 한다고 한다면, 실제 가입된 사용자의 정보를 사용해야하니 보안에도 문제가 생길 수 있습니다.

제 생각엔 이정도 이유로 프론트엔드에서 테스트할 때 HTTP Request를 mocking해야 한다고 생각합니다. 의문점이 해소되지 않으셨다면 댓글로 말씀해주세요~

Jeenie님의 프로필 이미지
Jeenie
질문자

안녕하세요.

먼저 자세한 답변 감사드립니다.

mocking기능을 사용하는 이유는 충분히 이해 했습니다. 그런데 하나 더 질문한다면, 이 실제 데이터가 아닌 준비해둔 테스트용 더미데이터를 사용하는게 결국은 테스트, 그러니까 내가 작성한 코드가 실제 실행했을때도 잘 돌아가는지를 확인하기 위함이니까 성공했을때/실패했을때와 같이 케이스를 상정해두고 테스트를 한다라는게 의미가 있는 걸까요? mock으로 설정해둔 더미데이터는 무조건 통과가 될텐데 어차피 통과할건데 무슨의미가 있지? 라는 의문이 있었는데 답변을 읽다보니 각 케이스에 설정해놓은데로 움직이는걸 확인한다는 것에 의미가 있기에 mock을 쓰는구나 라고 생각하게 됐는데, 제생각이 맞는지 궁금합니다.

강병진님의 프로필 이미지
강병진
지식공유자

생각하시는 바가 맞습니다!

말씀하신 것처럼 프론트엔드에서 테스트의 목적은 HTTP Request 자체가 아니라

  1. HTTP Request 의 status code가 200일 때 의도한대로 잘 작동하는지

  2. HTTP Request의 status code가 400이거나 401일 때 의도한대로 잘 작동하는지

에 대한 테스트케이스를 확인하는 것이기 때문입니다.

Jeenie님의 프로필 이미지
Jeenie

작성한 질문수

질문하기