Jest 테스트 코드 - 코딩앙마 유튜브

https://www.youtube.com/watch?v=g4MdUjxA-S4 

코딩앙마 - Jest 강좌 #1 소개, 설치 및 간단한 테스트 작성 - 자바스크립트 테스트 프레임워크

 

1. npm install jest --save-dev로 설치합니다.
2. package.json의 scripts 값 "test": "jest"로 바꾸어줍니다.
3. fn.test.js 형태의 파일 또는 __test__ 폴더 안의 파일을 자동으로 test하게 됩니다.

4. 아래와 같이 작성합니다.

test("함수에 대한 설명", () => {     expect("기대하는 값").toBe("되어야하는 값"); });

5. 성공 예시

test("1은 1이어야 합니다.", () => {     expect(1).toBe(1); });

test("2더하기 3은 5여야 합니다.", () => {     expect(fn.add(2, 3)).toBe(5); });

위와 같이 성공하는 케이스를 작성합니다.

6. not

~가 아니어야 합니다. 를 작성할 떄 사용합니다.

test("3더하기 3은 5가 아닙니다.", () => {     expect(fn.add(3, 3)).not.toBe(5); });

7. toBe
Matcher라고 합니다. 숫자나 문자 등 기본 타입 값을 비교할 때 사용합니다.

8. toBe와 toEqual
객체나 배열은 toEqual을 사용해야 합니다.

test("이름과 나이 반환", () => {     expect(         fn.makeUser("Mike", 10).toBe({             name: "Mike",             age: 10,         })     ); });

toBe에 객체를 입력받으면 실패합니다.

test("이름과 나이 반환", () => {     expect(         fn.makeUser("Mike", 10).toEqual({             name: "Mike",             age: 10,         })     ); });

toEqual는 객체를 읽어들여 통과합니다.

9. toEqual과 toStrictEqual
undefined 값은 toEqual에서 통과하지만 toStrictEqual에서는 통과하지 못합니다.
따라서 정확한 테스트를 위해 toStrictEqual을 사용합니다.

10. 각각 Null, Undefined, Defined면 통과합니다.
toBeNull
toNeUndefined
toBeDefined

test("null은 null입니다.", () => {     expect(null).toBeNull(); });

11. 각각 Truthy, Falsy면 통과합니다.
toBeTruthy
toBeFalsy

test("비어있지 않은 문자열은 true입니다.", () => {     expect("word").toBeTruthy(); });

12. 대소를 비교합니다.
toBeGreaterThan
toBeGreaterThanOrEqual
toBeLessThan
toBeLessThanOrEqual

test("ID는 10자 이하여야 합니다.", () => {     const id = "abcdefg";     expect(id.length).toBeLessThanOrEqual(10); });

13. toBeCloseTo
근삿값이면 통과합니다.
언어 특성상 이진법을 사용해 무한소수가 되는 경우에는 근삿값으로 구합니다.

test("0.1 더하기 0.2는 0.3 입니다.", () => {     expect(fn.add(0.1, 0.2)).toBeCloseTo(0.3); });

14. toMatch

문자열이 일치하면 통과합니다.

test("h를 포함하고 있어야 합니다.", () => {     expect("Hi").toMatch(/h/i); });

15. toContain
배열에 특정 요소가 존재하면 통과합니다.

test("alphabet에 A가 있어야 합니다.", () => {     const word = "A";     const alphabet = ["A", "B", "C"];     expect(alphabet).toContain(word); });

16. toThrow
에러가 발생하면 통과합니다.

test("에러가 발생해야 합니다.", () => {     expect(() => fn.throwErr()).toThrow(); });

특정한 에러 메시지가 발생할 때 통과시키고 싶다면 message를 작성해주면 됩니다.

test("에러가 발생해야 합니다.", () => {     expect(() => fn.throwErr()).toThrow("message"); });

17. 비동기 코드
필요해질 때 8:20 뒷부분의 async를 공부합시다.
https://www.youtube.com/watch?v=snFRUjYR6j4

18. 테스트 변수 값 초기화

beforeEach
테스트마다 변수의 값이 변한다면 이 변수의 값을 초기화할 때 사용합니다.

let num = 0; beforeEach(() => {     num = 0; });

18-2. afterEach
테스트를 실행한 후에 변수의 값을 초기화합니다.

19. 비동기 테스트
beforeEach, afterEach를 비동기에 사용하게 되면
매 테스트마다 timeout만큼의 시간을 소요하게 됩니다.

beforeAll, afterAll
따라서 테스트 시작 전에 DB를 한 번 불러오고
테스트가 끝나면 DB 연결을 종료하면 되는데
이 떄 사용하는 기능입니다.

beforeAll(async () => {     user = await fn.connectUserDb(); }); afterAll(() => {     return fn.disconnectDb(); }); test1; test2; test3;

20. test.only
원하는 테스트만을 실행합니다.
중간에 변수가 변하는 경우가 생길 때

해당 함수만을 테스트하여 잘 작동되고 있는지를 우선 확인합니다.

 

그리고 only로 실행된 테스트가 틀렸다면 해당 테스트를 통과할 수 있도록 수정한 뒤
다시 전체 테스트를 실행합니다.
그러고 나서도 테스트가 실패한다면 다른 곳에서 입력받는 변수의 값이 변했음을 추측할 수 있습니다.

20-2. test.skip
문제가 생긴 지점으로 예상되는 테스트를 건너뛰고 전체 테스트를 진행합니다.

21. mock function
테스트하기 위해 흉내만 내는 함수

const mockFn = jest.fn();

형태로 mock함수를 만듭니다.

mockFn.mock.calls; mockFn(); mockFn(1); console.log(mockFn.mock.calls);

확인을 해보면
// [ [], [ 1 ] ] 이 출력됩니다.
전달된 인수는 무엇인지, 몇 번 호출되었는지 확인할 수 있습니다.

test("mockFn은 두 번 호출되어야 합니다..", () => {     expect(mockFn.mock.calls.length).toBe(2); });

test("두 번째 mockFn의 첫번째 인수는 1이어야 합니다.", () => {     expect(mockFn.mock.calls[1][0]).toBe(1); });

22. mockFn.mock.calls 이용 예시

const mockFn = jest.fn(); function forEacgAdd1(arr) {     arr.forEach((num) => {         mockFn(num + 1);     }); } forEachAdd1([10, 20, 30]); test("mockFn은 각각 11, 21, 31이 되어야 합니다.", () => {     expect(mockFn.mock.calls[0][0]).toBe(11);     expect(mockFn.mock.calls[1][0]).toBe(21);     expect(mockFn.mock.calls[2][0]).toBe(31); });

23. mockFn의 인수에 함수 전달하기 

const mockFn = jest.fn((num) => num + 1); mock(10); test("10에 1이 더해진 값이 반환되어야 합니다.", () => {     expect(mockFn.mock.results[0].value).toBe(11); });

24. mockReturnValueOnce()
특정한 값을 반환합니다.

mockFn     .mockReturnValueOnce(1)     .mockReturnValueOnce(true)     .mockReturnValueOnce(false)     .mockReturnValue(true); const result = [1, 2, 3, 4, 5].filter((num) => mockFn(num)); test("1, 3, 4를 반환해야 합니다.", () => {     expect(result).toStrictEqual([1, 2, 4]); });

25. mockResolveValue
비동기 함수를 흉내낼 수 있습니다.
https://www.youtube.com/watch?v=9xBjErtlr1o
8:15부터 필요해질 때 찾아봅시다.

26. toBeCalled() 
함수가 한 번 이상 호출되면 통과합니다.

test("mockFn함수가 한 번 이상 호출되어야 합니다.", () => {     expect(mockFn).toBeCalled(); });

26-2. toBeCalledTimes(3) 
함수가 세 번 호출되면 통과합니다.

test("mockFn함수가 세 번 호출되어야 합니다.", () => {     expect(mockFn).toBeCalled(3); });

26-3. toBecalledWith(10, 20) 
인수로 전달받은 값이 10과 20인 함수가 있다면 통과합니다.

test("mockFn함수의 인수가 10과 20을 전달받아야 합니다.", () => {     expect(mockFn).toBecalledWith(10, 20); });

26.4 lastCalledWith(30, 40) 
마지막으로 호출된 함수는 인수로 30과 40을 전달받으면 통과합니다.

test("마지막으로 호출된 mockFn함수는 인수로 30과 40을 전달받아야 합니다.", () => {     expect(mockFn).lastCalledWith(30, 40); });