20-1 단위테스트와 컨테이너화
- 테스트코드
- 단위테스트
- 컨테이너화
테스트 코드
이전에 테스트 코드 관련해서 노션에 정리했던 내용 추가함
작성한 코드가 예상대로 동작하는지 자동으로 확인해주는 코드
필요성
- 사용방법의 이해
- 배포 전 품질 검증
- 리펙토링시 안정감
- 버그를 조기에 발견
- 팀 개발에서 신뢰성 확보
테스트 코드란 작성한 코드가 예상대로 동작하는지 확인해주는 코드로
해당 함수의 사용법과 동작에 대한 정보 제공,
검증의 자동화,
테스트 시 기존의 코드를 변경하지 않고 확인을 진행,
개발 단계에서의 버그 발견,
팀원과의 코드 리뷰시 기준점이 되는 장점이 있습니다.테스트 종류
| 종류 | 설명 |
|---|---|
| 단위 테스트 | 함수, 컴포넌트 단위로 테스트 |
| 통합 테스트 | 여러 모듈, 컴포넌트들이 함께 연결되어 동작하는지 테스트 |
| E2E 테스트 | 실제 사용자 시나리오 전체 테스트 |
테스트 종류에는
개발하는 어플리케이션의 각 기능이 개별적으로 정확하게 동작하는지 함수단위로 확인하는 단위테스트,
컴포넌트가 결합하여 올바르게 동작하는지 확인하는 통합테스트,
그리고 실제 사용자가 사용할 때의 관점으로 어플리케이션의 모든 부분을 테스트하는
E2E 테스트가 있습니다.테스트 코드 Tool
| 종류 | 분류 | 설명 |
|---|---|---|
Jest | 단위 테스트 | 페이스북이 만든 JavaScript 테스트 프레임워크 입니다 |
React Testing Library | 통합 테스트 | 사용자가 컴포넌트를 사용하는 것처럼 테스트를 작성합니다 |
Playright | E2E 테스트 | 브라우저를 자동으로 조작하여 테스트 합니다 |
Jest는 JavaScript 테스팅 프레임워크로 React 프로젝트에서 가장 많이 사용되는 테스트 도구입니다.
React Testing Library는 UI가 실제로 어떻게 동작하는지를 중심으로,
React컴포넌트를 사용자 관점에서 테스트를 작성합니다.
Playright는 Microsoft에서 만든 E2E 프레임워크입니다. '크롬', '파이어폭스' 등
주요 브라우저를 지원하며, 실제 브라우저를 자동으로 조작하여 테스트합니다.- Jest 설치 방법
-
Jest 설치
npm install —save-dev jest
-
스크립트 추가
위치 : package.json
”scripts”: {
“test”: “jest”
}
-
테스트 코드의 사용
테스트 코드의 구조
<aside>
describe(”테스트 그룹”), () ⇒ {
test(’테스트1’, () ⇒ {
expect( 1 + 1 ).toBe(2);
});
test(’테스트2’, () ⇒ {
expect( 1 + 2 ).toBe(3);
});
});
</aside>describe : 테스트케이스를 하나의 그룹으로 묶을 때 사용합니다.
test : 개별 테스트 케이스로 실제 테스트 단위 입니다.
expect : jest 함수를 사용하여 실제 결과와 예상 결과를 비교합니다.
< Jest 함수 >
toBe : 값을 정확하게 비교
toEqual : 객체나 배열을 비교
toBeTruthy : 값이 true인지 확인
toBeNull : 값이 null 인지 확인실습 1
const t = (a, b) => {
if(a > 2) {
return a + b;
}
return a - b;
}
test('a>2 = a+b ', () => {
expect(t(3, 1)).toBe(4);
})
test('a<=2 = a-b ', () => {
expect(t(2, 1)).toBe(1);
})a와 b의 값을 비교하여, a가 2보다 클 때에는 a+b를 그 외에는 a-b를 반환하는 함수 t에 대한 테스트로
a의 값에 따라 실제로 예상한 값과 동일한지 테스트가 이루어지면서
기대한 값과 동일하면 PASS 를
기대한 값과 불일치하면 FAIL을 확인 할 수 있습니다.