LearnFit
YouTube, Jest 강좌 #1 소개, 설치 및 간단한 테스트 작성 - 자바스크립트 테스트 프레임워크
[Jest - 요약] 소개, 설치 및 간단한 테스트 작성
#전체
#개발자
#프론트엔드
#자바스크립트
#javascript
#js
#es6
#강좌
#tutorial
#중급
#intermediate
#jest
#test
#framework
00:00jest란?
zero config를 추구하며 facebook에서 제작
설정이 거의 필요없는 테스팅 환경 구축 가능
00:31jest 설치 안내
package.json의 scripts에서 test 부분을 "jest"로 입력
01:05테스트 할 함수를 모아놓는 파일 생성(fn.js)
01:27add 함수 입력
01:52test 코드 작성을 위한 파일 생성(fn.test.js)
02:06npm test 명령어를 콘솔에 실행하면 'npm run jest'(package.json에 입력했으므로)가 실행되며 프로젝트 내의 test.js로 끝나는 파일들 테스트합니다.
참고1: __tests__ 폴더에 있는 파일들도 자동으로 test 파일로 인식합니다.
참고2: 'npm test 파일명' or 'npm test 경로'로 입력하면 특정 파일이나 경로에 대해서만 테스트 할 수 있습니다.
02:31'1은 1이야' test 코드 작성
expect: 검증할 값 입력
toBe: 기대되는 값 입력
03:22'2 더하기 3은 5야' test 코드 작성
*add함수 활용
설명: fn.add(2,3)이 5가 되는 것을 기대하는 테스트 코드
04:02'3 더하기 3은 5야' test 코드 작성(not 등장)
*실패하는 케이스에 대한 테스트 코드
*Terminal을 확인하면 어떤 테스트가 실패했는지 어떤 값이 기대됐는데 어떤 값이 받아졌는지 확인가능
*expect().not.toBe(): expect가 toBe가 아니면 통과하는 테스트 코드
05:17Matcher 중 하나인 toBe
toBe는 숫자, 문자 값(primitive value)을 비교할 때 사용됩니다.
*더욱 다양한 Matcher가 존재
✔ 학습 완료
이 학습노트가 포함된 러닝패스예요.
서원석님의 다른 노트는 어때요?
서원석
의 학습노트
리액트로 이미지 미리보기 구현(feat. useState, useEffect, useRef, FileReader)
Video
⏱ 핵심 스탬프25개
00:01
이 학습노트에서 구현하는 결과물 입니다.(파일 선택기에서 이미지 파일을 고르면 이미지 미리보기)
00:25
코드 살펴보기 시작
👍
2
서원석
의 학습노트
리액트 라우터 버전 6의 리다이렉트는 Navigate로 구현
Video
⏱ 핵심 스탬프8개
00:00
해당 학습노트에서는 react router 버전6에서 redirect를 어떻게 구현하는지 소개합니다.
공식 문서: https://reactrouter.com/
00:50
react router 버전5에서 redirect를 구현하는 방법입니다.
*예상 시나리오: pathname이 '/redirect'인 page 접근 시 pathname '/about'인 page로 전환됨
*특정 pathname에 redirect 로직을 등록하는 이유는 가지각색이겠지만 그 중 대표적인 용도는 로그인 여부 검사입니다. 서비스를 이용하는 유저가 로그인을 했을 경우 특정 pathname에 접근하지 못하도록 사용하는 것이죠.
👍
4
👋 다양한 인사이트를
읽어보고 계신가요?
나만의 학습 기록을 남기고,
관리하고 싶다면!
다양한 전문가의 멤버십 전용
콘텐츠를 보고 싶다면!
나의 학습 내용을 공유하고,
수익을 올리고 싶다면!
3초 회원가입/로그인으로,
런핏의 커뮤니티에 여러분도 함께하세요.
3초 만에 가입하기