e2e
-
실무에서 유용한 MSW(Mock Service Worker) 활용 가이드Tip 2024. 11. 30. 16:54
프런트엔드 개발을 하다 보면 백엔드 API가 완성되지 않은 상태에서 작업해야 하는 API 의존성 문제는 항상 개발 속도와 품질에 큰 영향을 미칩니다.이런 상황에서 모킹(Mocking)은 필수적이지만, 기존 방식에는 한계가 있습니다.오늘은 개발 생산성을 높여주는 MSW(Mock Service Worker)에 대해 깊이 있게 알아보겠습니다.1. 기존 모킹 방식의 한계1. 모듈 단위의 모킹Jest와 같은 테스트 프레임워크에서 jest.mock()을 사용하여 모듈을 모킹 하는 것이 일반적입니다.하지만 이 방법은 함수나 모듈 단위로만 모킹이 가능하며, 실제 네트워크 요청을 대체하지는 않습니다.2. 통합 테스트의 어려움엔드투엔드(E2E) 테스트나 통합 테스트에서는 실제 API 서버와의 연동이 필요합니다.하지만 백엔..
-
NextJS Cypress 설정하기Next.js 2022. 2. 17. 11:56
요즘은 거의 필수가 된 요소가 Testing이다. 지금도 Front단에서의 단위 테스트는 크게 필요하지 않다고 생각하지만, E2E테스트의 경우 Front개발에 있어서도 너무도 편한 요소이기에 간단한 설정에 대해 소개하고자 한다. npm i cypress npm i -D @testing-library/cypress 먼저 당연하게 cypress를 설치해야 하고 Next 등을 사용할 경우 className을 이용해 요소를 선택하는 건 어렵기 때문에 @testing-library/cypress를 설치하면 testId나 내부 글자 등으로 요소를 선택할 수 있기 때문에 설치해 준다. 두 요소의 설치가 끝났다면 base폴더에는 cypress.json, cypress폴더가 생성된 것을 확인할 수 있다. 이제 간단한 기..