WEB/REACT

TDD 테스트 주도 개발 (jest)

heeney 2022. 9. 15. 18:44
728x90

 

내가 만든 로직이 제대로 작동하는지 확인하기 위해 작성하는 테스트 코드이다.

 

환경설정

/src 폴더 위치에 test라는 폴더를 만들고 그 안에 테스트 코드를 작성한 파일을 두면 된다. 파일명은 __test__ 혹은 .test.ts로 지정해준다.

함수를 테스트하는 경우 해당 컴포넌트를 import해와서 테스트를 진행하면 된다.

우선 필요한 라이브러리를 설치해야 한다.

yarn add -D jest @types/jest
yarn add -D ts-jest
yarn add -D @testing-library/jest-dom @testing-library/react

필요한 파일로는 우선 테스트를 돌려볼 수 있는 파일이 필요할 것이다.
/src/test/app.test.tsx ...

root 위치에 jest.config.js, setupTest.js, tsconfig.jest.json, (typescript일 경우)tsconfig.json

package.json에 test를 jest로 설정

  "scripts": {
	...
    "test": "jest",
  },

 

예시

const sum = (num1, num2) => num1 + num2;

test('1 더하기 2는 3이다.', () => {
	expect(sum(1, 2)).toBe(3)
});

여기서 toBe 같은 메소드는 Matcher라고 한다. toBe 말고도 toEqual, toStrictEqual, toBeNull 등이 있다.

이때 예시처럼 test를 통해 바로 테스트를 해볼수도 있고 describe을 통해 진행해볼 수도 있다.

테스트 실행하기

yarn test
// or npm test

 


it VS test

it과 test 둘다 기능은 동일하다고 한다. 그러나 의미론적으로 it을 사용하는 것을 권장한다는 글을 읽었다. 테스트 출력할 때 테스트를 더 읽기 쉽게 만들기 위해 만들어졌다. 가독성 부분에서 다르다고 볼 수 있다.

 

참고

 

728x90