jest

웹 스토리지 유틸 함수에 대한 테스트 코드를 작성하다가 조금 헤매고 난 후에 해결해서 그 과정을 글로 남기고자 합니다. 스토리지 유틸 함수를 만든 이유 스토리지 API를 이용해서 바로 특정 값을 가져올 수도 있을 텐데요. 그럼에도 불구하고, 유틸 함수를 별도로 만드는 이유는 스토리지가 문자열 값만 저장하기 때문입니다. 특히 스토리지에 객체를 JSON 형태의 문자열로 저장하는 것이 유용할 텐데요. 객체를 바로 스토리지에 저장하게 되면 [object Object] 형태의 문자열로 변환되어 저장되기 때문에 유틸 함수에서 JSON 문자열로 변환시켜서 스토리지에 저장하려는 것입니다. (toString의 동작방식 때문) // 스토리지 유틸 함수 예시 export const getSessionStorageItem =..

문제 발생 웹 서비스를 개발하던 중에, 다음과 같이 특정 API를 호출하고 실패했을 때 window.alert로 사용자에게 오류 메시지를 보여주는 기능을 구현했습니다. 버튼을 클릭하면 로딩이 보이면서, API 호출이 마무리될 때까지 기다렸다가 성공하면 다음 페이지로 이동하고, 실패하면 오류 메시지를 보이는 형태입니다. 위의 기능과 관련된 컴포넌트에 대한 테스트 코드를 작성하고 있던 중이었습니다. API를 모킹해서 실패하도록 처리한 후, 오류 메시지를 보이는 것. 즉, window.alert가 실행되었는 지 검증하는 중이었는데요. 다음과 같은 오류가 발생했습니다. Jest의 테스트 환경 (testEnviroment)는 jest-environment-jsdom 으로 셋팅되어 있는데요. JSDOM 환경에는 w..

Next.js 환경에서 Jest + Cypress를 구축하는 도중에 문제가 발생했습니다. Jest로 만든 테스트 코드 (*.test.ts | tsx) 는 문제없이 타이핑 및 자동완성이 잘 되는데, Cypress로 테스트 코드 (*.spec.ts) 를 작성할 때 타이핑 및 자동완성이 되지가 않습니다. Cypress를 이용한 E2E 테스트 코드는 보통 cypress 디렉토리 내에 작성하게 되는데, cypress 디렉토리 내부의 테스트 코드들이 루트 디렉토리의 tsconfig.json의 설정에 영향을 받고 있기 때문입니다. // /tsconfig.json { "compilerOptions": { ... // 다른 설정 }, "exclude: [ ... // 다른 설정 "cypress" ] } 루트 디렉토리의 ..