뒤로 가기
홈으로 이동
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
스크랩
서원석의 프로필 이미지
서원석
의 학습노트

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

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