개요

JavaScript 개발용 IDE, WebStorm에서 Jest하는 방법에 대해 씁니다.

테스트를 IDE에서 개별적으로 실행하는 방법

모든 테스트를 IDE에서 일괄 실행하는 방법

하는 방법

WebStorm을 시작하여 Jest 테스트 케이스가 포함된 프로젝트 열기

Jest의 샘플 프로젝트로 다음을 사용했습니다.
htps : // 기주 b. 코 m / 리 ょ r 슨 / 에 s6_ babe l7_ j st

프로젝트 열기

프로젝트 디렉토리를 열면 이런 느낌.
/test 디렉토리 이하에, Jest를 사용한 테스트 케이스(hello.test.js)가 들어가 있으므로 그것을 열다.



실은, 이 상태로 이제 WebStorm로 Jest를 실행 가능하지만, 보다 편리하게 하기 위해서
Jest용 코드 완성 라이브러리 추가

Jest용 코드 완성 라이브러리를 WebStorm에 추가

코드 완성 라이브러리를 추가해 간다.

File->Settings를 열고



Languages ​​& Frameworks->JavaScript>Libraries를 열고 오른쪽에 있는 버튼을 클릭하세요.



그러면 라이브러리 목록 화면이 나오므로 jest를 선택하고 을 클릭하여 다운로드합니다.



이제 이 추가되었으므로 준비 OK.



이런 식으로 Jest의 구문 부분이 하이라이트 된다.

WebStorm에서 테스트 시작

파일이나 편집기에서 오른쪽 클릭 컨텍스트 메뉴에서 그러면 테스트가 실행됩니다. 매우 간단.

실행 결과 확인

화면 아래에 테스트 실행 결과가보고됩니다.

일괄 실행 방법

지금은, 테스트 케이스가 써 있는 파일을 1개만 만들어 왔지만, 이하와 같이 복수 있을 때에 모든 테스트 케이스를 일괄 실행하고 싶다.

먼저 의 Run/Debug configurations(실행/디버그 구성)를 클릭합니다.



따라서 Edit configuration(구성 편집)을 선택하고,



Run/Debug configuration(실행/디버그 구성) 대화 상자 열기



왼쪽에 있는 마크를 누르면 이라는 것이 자동으로 추가된다. 이 설정 화면의 하단 라디오 버튼이 로 설정되어 있는지 확인하고 확인을 클릭합니다.



아래의 편집 화면으로 돌아가면 Run/Debug configuration에서 을 선택할 수 있게 되어 있다.

을 선택한 상태에서 을 클릭하면 Jest로 만든 모든 테스트를 WebStorm에서 실행할 수 있습니다.

요약

Jest를 WebStorm에서 실행하는 방법을 설명했습니다.

npm test

에서 커맨드 라인에서하는 방법도 개미이지만, IDE에 통합되어 있으면, GUI상에서 확인하거나, 그 후의 디버그에의 연결 등 역시 편리하게 느꼈습니다.

관련 기사
htps : // 이 m / ri ょ r thin / ms / 6c30 A0d0897194677 A37