LearnFit
YouTube, Jest 강좌 #5 목 함수(Mock Functions) - 자바스크립트 테스트 프레임워크
[Jest - 요약] 목 함수(Mock Functions)
#전체
#개발자
#프론트엔드
#자바스크립트
#javascript
#js
#es6
#강좌
#tutorial
#중급
#intermediate
#mock
#목 함수
#jest
#test
#제스트
#테스트
#사용법
#비동기
#asynchronous
#async
#callback
#promise
#await
#toBe
#toEqual
#toStrictEqual
#toBeNull
#toBeUndefined
#toBeDefined
#toBeTruthy
#toBeFalsy
#toBeGreaterThan
#toBeGreaterThanOrEqual
#toBeLessThan
#toBeLessThanOrEqual
#toBeCloseTo
#toMatch
#toThrow
#matcher
#matchers
#beforeAll
#beforeEach
#afterAll
#afterEach
#only
#skip
00:00mock 용어 설명
00:16mock function은 실제가 아닌 흉내만 낸, 일종의 테스트용 함수라고 이해하기
00:27mock 함수를 사용하는 사례
userDB에서 userList를 select해오는 기능을 테스트해온다고 가정해보겠습니다.
1. 기능 구현을 위한 코드 작성이 번거롭습니다.
2. 네트워크, DB 환경 등 결과에 영향을 주는 외부 환경요인이 존재합니다.테스트는 같은 입력에 대해 같은결과를 내는 것이 중요한데 말이죠.
하지만 mock 함수로 userList를 받아온 것처럼 흉내내서 테스트를 진행한다면 위의 문제가 해소될 것입니다.
00:58mock 함수 사용법
1. jest.fn()으로 mock함수를 만들 수 있습니다.
2. mock함수.mock.calls를 활용하면 몇 번 호출됐는지, 호출될 때 전달된 인수는 무엇인가를 알아낼 수 있습니다.
02:403. mock함수에 전달된 인자를 활용하는 법
참고하기:
const mockFn = jest.fn();
mockFn(11);
mockFn(12);
mockFn(13);
mockFn.mock.calls === [[11], [12], [13]]
04:254. mock함수에 콜백을 전달해서 활용하는 법
참고하기:
const mockFn = jest.fn(num => num + 1);
mockFn(10); // return: 11
mockFn(20); // return: 21
mockFn(30); // return: 31
mockFn.mock.results === [{ type: 'return', value: 11 }, { type: 'return', value: 21 }, { type: 'return', value: 31 }];
05:395. mock함수의 return value를 미리 설정해놓는 법
참고하기:
const mockFn = jest.fn();
mockFn
.mockReturnValueOnce(10)
.mockReturnValueOnce(20)
.mockReturnValueOnce(30)
.mockReturnValue(40);
mockFn(); // return: 10
mockFn(); // return: 20
mockFn(); // return: 30
mockFn(); // return: 40
mockFn.mock.results === [{ type: 'return', value: 10 }, { type: 'return', value: 20 }, { type: 'return', value: 30 }, { type: 'return', value: 40 }]
06:326. mock함수의 return value를 미리 설정해놓고 활용하기
mockFn
.mockReturnValueOnce(true)
.mockReturnValueOnce(false)
.mockReturnValueOnce(true)
.mockReturnValueOnce(false)
.mockReturnValue(true)
를 미리 해놨기 때문에 filter 안에서 호출되는 mockFn(num)는 num에 상관없이 true, false, true, false, true 순으로 return 됩니다.
08:107. 비동기함수 흉내내는 법
참고하기:
const mockFn = jest.fn();
mockFn.mockResolvedValue({name: "Mike"});
test("받아온 이름은 Mike", () => {
mockFn().then(res => {
expect(res .name).toBe("Mike");
});
});
참고하기2:
mockFn.mockReturnValue(); // 동기
mockFn.mockResolvedValue(); // 비동기
08:588. 외부의 함수를 활용할 때 실제 실행시키진 않고 정해진 return을 받는 방법(mocking module)
참고하기:
const fn = require("./fn");
jest.mock("./fn");
fn.createUser.mockReturnValue({name: "Mike"}); // 이렇게 함으로써 fn.createUser("Mike");의 return 값이 고정됨
11:379. 유용한 Matchers
참고하기:
const mockFn = jest.fn();
mockFn(10, 20);
mockFn();
mockFn(30, 40);
expect(mockFn).toBeCalled(); // mockFn이 한 번이라도 호출 되었는가?
expect(mockFn).toBeCalledTimes(3); // mockFn이 3번 호출되었는가?
expect(mockFn).toBeCalledWith(30,40); // mockFn이 30, 40을 인자로 받았던가?
expect(mockFn).lastCalledWith(10,20); // mockFn이 마지막 호출 때 10, 20을 인자로 받았던가?
✔ 학습 완료
이 학습노트가 포함된 러닝패스예요.
서원석님의 다른 노트는 어때요?
서원석
의 학습노트
리액트로 이미지 미리보기 구현(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초 만에 가입하기