자동화된 테스트에서 Node.js 디버깅

어이, 친구!

이 항목은 최근 Node.js에서 테스트 자동화를 시작한 사용자에게 유용할 수 있습니다. 이 기사는 테스트 자동화 엔지니어의 POV로 작성되었지만 Node.js를 처음 접하는 모든 초보자에게 유용할 것이라고 확신합니다.

디버깅이란 무엇이고 왜 필요한가요?

Debugging is the process of finding and resolving bugs. 즉, 일부 코드를 실행했는데 예상대로 작동하지 않는 경우 이러한 오작동을 일으키는 코드 줄을 찾습니다.

코드에서 정보를 얻는 방법에는 두 가지가 있습니다.

로깅.

디버거 연결.

벌채 반출

나는 당신이 이미 이것에 익숙하다고 생각합니다. 일부 명령을 실행할 때 console.log()를 사용하여 결과를 콘솔에 기록하기만 하면 됩니다.

const result = 2 + 3
console.log(result) // 5

또는

const response = await axios.get(url)
const body = response.data
console.log(body)

익숙한 것 같나요?

디버거 연결

앱의 모든 부분을 기록하는 대신 프로젝트에서 잠시 멈추고 싶은 코드 몇 줄을 가리키고 이 특정 줄에서 무슨 일이 일어나고 있는지 검사하는 것이 좋을 것입니다.

Axios으로 HTTP 요청을 실행했는데 어떤 이유로 테스트가 실패하고 응답 본문이 예상한 것과 일치하지 않는다는 것을 알게 되었다고 가정해 보겠습니다.

디버거를 연결하여 이 sh를 기록할 시간입니다!

비주얼 스튜디오 코드

먼저 테스트가 실행될 때 중지할 코드 줄을 표시(줄 번호 왼쪽 클릭)합니다. 빨간색 점이 중단점입니다.


그런 다음 일반 터미널을 사용하는 대신 `JavaScript 디버그 터미널:


이 터미널에서는 평소와 같이 (npm test 와 같은) 테스트를 실행하는 데 사용했던 명령을 간단히 사용할 수 있습니다.



테스트 실행은 중단점(1)에서 중지됩니다. 현재 코드 줄(2)에서 도달할 수 있는 캐시된 데이터를 볼 수 있습니다.

거기에서 다음 중단점으로 이동하거나(3) 현재 실행을 다시 시작하거나(4) 디버거를 분리할 수 있습니다(5).

VSC에서 디버거를 연결하는 다른 방법을 찾을 수 있지만 저는 이 방법을 선호합니다.

웹스톰

첫 번째 단계의 Visual Studio Code와 매우 유사합니다. 필요한 코드 줄을 중단점으로 표시합니다.



그런 다음 거의 평소와 같이 코드를 실행하지만 대신 디버그(버그) 아이콘을 사용합니다.



테스트 실행은 중단점(1)에서 중지됩니다. 현재 코드 줄(2)에서 도달할 수 있는 캐시된 데이터를 볼 수 있습니다.

거기에서 다음 중단점으로 이동하거나(3) 현재 실행을 다시 시작하거나(4) 실행을 중지할 수 있습니다(5).

결론

디버거는 애플리케이션 캐시에 저장한 데이터를 검사하는 데 도움이 됩니다. 진행 상황을 확인하기 위해 더 이상 console.log()를 추가할 필요가 없습니다(특히 기록하려는 항목이 둘 이상인 경우).



여러분 대부분은 이 방법이 로깅보다 더 유용하고 대화식이라는 데 동의할 것입니다. 또한 전체 섹션(개체/배열)을 접거나 펼칠 수 있으므로 처리할 데이터가 많을 때(예: 매우 긴 배열 또는 개체) 더 읽기 쉽습니다.

읽어 주셔서 감사합니다. 새로운 것을 배웠기를 바랍니다.