내가 jest에 대해서 알게된 경로는 우아한테크코스를 진행하면서 알게 되었다. 예전부터 jest라는 용어를 듣기만 했었고, 이게 무슨 테스트코드를 작성하는 방식이다라고만 알고 있었다. 정확히 난 테스트코드가 무엇인지, jest가 무슨 용도인지 몰랐지만, 이번 기회에 한 번 정리해볼까한다.
테스트 코드란 뭘까?
프로그램의 동작이 예상대로 이루어지는지 확인하기 위해 작성하는 코드!
즉, 특정 기능이나 동작이 의도한 대로 작동하는지 자동으로 확인하는 코드이다.
jest 테스트 코드
// add 함수
function add(a, b) {
return a + b;
}
// 테스트 코드
describe('add function', () => {
it('should return the sum of two numbers', () => {
expect(add(2, 3)).toBe(5);
expect(add(-1, 1)).toBe(0);
expect(add(0, 0)).toBe(0);
});
});이러한 코드가 바로 테스트 코드이다. 현재 add 함수가 제대로 작동하는지 임의의 파라미터 값을 넣어서 예상 결과를 예측하는 테스트를 진행하는 과정이다.
테스트 코드의 종류
- 단위 테스트
가장 작은 코드 단위가 예상대로 작동하는지 확인
ex) add 함수, 작은 메소드 단위 - 통합테스트
여러 코드 단위가 함께 작동하는지 확인
ex) 여러 함수가 연계되어 동작하는 흐름 테스트 - 시스템 테스트
시스템 전체가 예상대로 작동하는지 확인하는 테스트
ex) 로그인과 데이터 처리 등이 정상적으로 이루어지는지 확인. - 엔드 투 엔드 테스트
전체 시스템을 실제 사용자처럼 테스트하여, 시스템 전체가 올바르게 작동하는지 확인
ex) QA 작업이 아닐까? 라는 생각
jest란 뭘까?
JavaScript 테스트 프레임워크로, 주로 React와 같은 프론트엔드 애플리케이션에서 테스트를 쉽게 작성하고 실행할 수 있도록 돕는 도구이다. Facebook(현재 Meta)이 개발했으며, 단위 테스트, 통합 테스트, 엔드 투 엔드 테스트까지 다양한 테스트를 지원한다.
즉, 위에선 말한 테스트코드 개념을 사용할 수 있게 도와주는 기술이 바로 jest인 것이다.
특징
- 간단하고 직관적인 API
describe,it,test,expect와 같은 직관적인 함수들을 제공하여 테스트 코드 작성이 쉽고 읽기 쉽다. - 빠른 테스트 실행
병렬 처리를 통해 여러 테스트를 동시에 실행하며, 캐싱 기능을 사용해 변경된 부분만 테스트하므로 실행 속도가 빠르다. - 모의 함수(Mock Function)
함수 호출을 가짜로 만들 수 있어, 실제 의존성이나 외부 API 호출 없이 테스트할 수 있다. - 스냅샷 테스트
특정 UI의 렌더링 결과를 스냅샷(기존 결과)으로 저장하고, 이후에 UI가 변경되었는지 여부를 확인하는 기능이다.
간단한 사용예시
// sum.js
function sum(a, b) {
return a + b;
}
module.exports = sum;// sum.test.js
const sum = require('./sum');
test('adds 1 + 2 to equal 3', () => {
expect(sum(1, 2)).toBe(3);
});
이렇게 내가 만든 함수(ex.sum) 가 제대로 동작하는지 테스트 하는 환경을 만들어주는 것이 바로 jest이다.
설치와 사용이 간편하므로, 초기 설정이 필요하지 않기 때문에 jest는 매우 강력하다고 말할 수 있다!!!
Jest 설치
jest를 프로젝트에서 사용하기 위해선 우선 jest 라이브러리를 받아와야한다.
1. Jest 설치하기
npm install --save-dev jest
or
yarn add --save-dev jest2. Jest 설정하기
- 테스트 스크립트 추가
package.json파일에서 scripts 항목에 Jest 실행 명령을 추가한다.
"scripts": {
"test": "jest"
}이제 npm test 명령어로 Jest 테스트를 실행할 수 있다.
- ⭐️ 테스트 파일 작성 규칙
Jest는 파일명이*.test.js또는*.spec.js형식이거나__tests__폴더 안에 있는 파일을 자동으로 테스트 파일로 인식한다.
3. 테스트 코드 작성
3-1. 테스트 대상 코드 작성
// sum.js
function sum(a, b) {
return a + b;
}
module.exports = sum;3-2. 테스트 코드 작성
sum.test.js 파일을 만들어, sum 함수가 정상 작동하는지 테스트한다.
test 함수는 테스트 케이스를 정의하고, expect는 sum(1, 2)의 결과가 3과 같은지 확인한다.
// sum.test.js
const sum = require('./sum');
test('adds 1 + 2 to equal 3', () => {
expect(sum(1, 2)).toBe(3);
});
4. 테스트 실행하기
npm test 명령어로 Jest를 실행
Jest는 자동으로 *.test.js 파일을 찾아서 실행하고, 테스트 결과를 출력한다.
Jest가 돌아가는 환경은??
Jest는 기본적으로 Node.js 환경에서 동작하며, Node.js는 CommonJS 모듈 시스템을 기본으로 사용한다. CommonJS 환경에서는 require와 module.exports를 통해 모듈을 불러오고 내보내므로, 문법 자체도 이렇게 사용해야한다.
하지만, 최신 JavaScript 문법에서는 import와 export를 사용하는 ES 모듈 방식을 사용한다.
Jest에서 es모듈 방식 사용하기
Jest에서 import와 export를 사용하려면, Jest가 ES6 모듈 문법을 이해할 수 있도록 Babel을 설정해 Jest가 ES6 코드와 최신 JavaScript 문법을 변환할 수 있게 해야한다.
1. Babel 설치 및 설정
Babel이란?
최신 JavaScript 코드를 ES5 또는 Node.js가 이해할 수 있는 코드로 변환해 주는 도구이다.
npm install --save-dev @babel/core @babel/preset-env babel-jest2. Babel 설정 파일 추가
package.json 파일에 babel 설정을 추가한다.
여기서 "@babel/preset-env"는 최신 JavaScript 문법을 Node.js와 호환되는 코드로 변환해주는 역할은 한다.
"babel": {
"presets": [
"@babel/preset-env"
]
}3. Jest 설정
Jest가 .js 파일을 테스트할 때 Babel을 통해 변환하도록 설정하려면, package.json 파일에서 Jest의 transform 옵션을 설정해준다.
"jest": {
"transform": {
"\\.js$": "babel-jest"
}
}이렇게 하면 *.test.js 또는 *.spec.js 형식말고, 그냥 일반 x.js로 작업을 해도 바벨이 알아서 전환해준다.
cf.
우테코 프리코스 과정에서는 테스트코드를 작성할 때, 그냥 xxTest.js로 되어있었다. 즉,*.test.js또는*.spec.js형식이 아니었다. 그래서 package.json 파일에서"jest"설정에"transform"옵션으로"\\.js$":"babel-jest"를 지정해두면, .js 파일도 Babel을 통해 변환하여 Jest 테스트에서 사용할 수 있다.
)
4. 예시코드 수정
// sum.js
export function sum(a, b) {
return a + b;
}// sumTest.js
import { sum } from './sum';
test('adds 1 + 2 to equal 3', () => {
expect(sum(1, 2)).toBe(3);
});Jest가 Babel을 통해 코드를 변환하기 때문에, import와 export 문법을 사용한 최신 JavaScript 코드도 문제없이 Jest에서 실행된다.
마무리
테스트코드와 jest에 대해서 간단히 알아보았다. 다음 포스팅에서는 jest의 다양한 기능들에 대해서 다뤄볼 예정이다!!
