뒤로 가기
홈으로 이동
LearnFit
공유하기
YouTube, Jest 강좌 #2 유용한 Matchers - 자바스크립트 테스트 프레임워크
서원석님의 학습노트

[Jest - 요약] 유용한 Matchers

#전체
#개발자
#프론트엔드
#자바스크립트
#javascript
#js
#es6
#강좌
#tutorial
#중급
#intermediate
#jest
#toBe
#toEqual
#toStrictEqual
#toBeNull
#toBeUndefined
#toBeDefined
#toBeTruthy
#toBeFalsy
#toBeGreaterThan
#toBeGreaterThanOrEqual
#toBeLessThan
#toBeLessThanOrEqual
#toBeCloseTo
#toMatch
#toThrow
#matcher
#matchers
00:00toBe, toEqual 비교
00:28비교 시에 사용할 makeUser 함수 생성 *makeUser: name, age를 입력받아서 { name, age } 객체를 반환하는 함수
00:46'이름과 나이를 전달받아서 객체를 반환해줘' test를 toBe를 이용해서 진행 결과: 실패 원인: 객체, 배열은 toBe로 비교하면 안됩니다.(primitive value가 아니므로)
01:54'이름과 나이를 전달받아서 객체를 반환해줘' test를 toEqual을 이용해서 진행 결과: 통과
02:12하지만 toStrictEqual을 사용하여 배열이나 객체에 대해 비교할 것을 권고
03:23test("null은 null입니다.", () => { expect(null).toBeNull(); }); toBeNull toBeUndefined toBeDefined expect가 위의 경우일 때 테스트가 통과하는 Matcher입니다.
03:35boolean 값을 선별하는 Matcher toBeTruthy toBeFalsy 통과: test("0은 false입니다.", () => { expect(fn.add(1, -1)).toBeFalsy(); });
05:12부등호와 관련된 Matcher(>,<,>=,<=) toBeGreaterThan 크다 toBeGreaterThanOrEqual 크거나 같다 toBeLessThan 작다 toBeLessThanOrEqual 작거나 같다 통과: test("ID는 10자 이하여야 합니다." () => { const id = "THE_BLACK"; expect(id.length).toBeLessThanOrEqual(10); });
06:54소수를 다룰 때 주의해야할 점 실패: test("0.1 더하기 0.2는 0.3입니다.", () => { expect(fn.add(0.1, 0.2)).toBe(0.3); }); 통과: test("0.1 더하기 0.2는 0.3입니다.", () => { expect(fn.add(0.1, 0.2)).toBeCloseTo(0.3); });
08:08문자열과 관련된 Matcher(정규표현식과 toMatch를 활용) 실패: test("Hello World에 a라는 글자가 있나?", () => { expect("Hello World").toMatch(/a/); }) 통과: test("Hello World에 H라는 글자가 있나?", () => { expect("Hello World").toMatch(/H/); }) 실패: test("Hello World에 h라는 글자가 있나?", () => { expect("Hello World").toMatch(/h/); }) 통과: test("Hello World에 h라는 글자가 있나?", () => { expect("Hello World").toMatch(/h/i); })
09:28배열에서 특정 요소가 있는 확인하는 Matcher(toContain) 실패: test("유저 리스트에 Mike가 있나?", () => { const user = "Mike"; const userList = ["Tom", "Jane", "Kai"]; expect(userList).toContain(user); }); 통과: test("유저 리스트에 Mike가 있나?", () => { const user = "Mike"; const userList = ["Tom", "Mike", "Kai"]; expect(userList).toContain(user); });
10:23어떤 함수를 실행했는데 예외가 발생하는 경우(toThrow Matcher) error 발생 시 toThrow()를 사용하면 테스트 통과됨 toThrow()에 문자열을 넣으면 에러 메시지와 문자열이 일치하면 테스트 통과
✔ 학습 완료

이 학습노트가 포함된 러닝패스예요.

서원석님의 다른 노트는 어때요?

서원석의 프로필 이미지
서원석
의 학습노트

리액트로 이미지 미리보기 구현(feat. useState, useEffect, useRef, FileReader)

영상 재생 모양 아이콘
Video
⏱ 핵심 스탬프
25
00:01
이 학습노트에서 구현하는 결과물 입니다.(파일 선택기에서 이미지 파일을 고르면 이미지 미리보기)
00:25
코드 살펴보기 시작
👍
2
스크랩
서원석의 프로필 이미지
서원석
의 학습노트

네거티브 마진 negative margins | 코딩가나다 | 빔캠프

영상 재생 모양 아이콘
Video
⏱ 핵심 스탬프
6
04:38
B에 negative margin을 적용하기
05:00
마크업 상에서 아래 쪽에 위치하면 위로 올라갑니다. *negative margin과 상관없는 이야기
👍
6
스크랩
👋 다양한 인사이트를 읽어보고 계신가요?
나만의 학습 기록을 남기고, 관리하고 싶다면!
다양한 전문가의 멤버십 전용 콘텐츠를 보고 싶다면!
나의 학습 내용을 공유하고, 수익을 올리고 싶다면!
3초 회원가입/로그인으로, 런핏의 커뮤니티에 여러분도 함께하세요.
3초 만에 가입하기