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
서원석
의 학습노트
리액트 라우터 버전 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초 만에 가입하기