함수가 잘 동작하는지 확인하고 싶어서 Jest를 사용하게 됐다.
사실 브라우저에서 콘솔로그로 확인하는 게 귀찮아서 이제는 테스트 라이브러리를 사용해보고 싶었다.
패키지 설치
npm i -D jest ts-jest jest-environment-jsdom @testing-library/jest-dom @babel/preset-react @babel/preset-typescript @babel/preset-env- Jest: js 테스팅 프레임워크
- ts-jest: Typescript 내에서 Jest를 실행하는 데 필요한 도구
- jest-environment-jsdom: 원래 Jest에서 기본적으로 제공되었다가 Jest 28버전 부터는 별도 설치 필요
(나머지 패키지는 아래 설명에 포함되어 있음)
package.json
"scripts": {
...
"test": "jest"
}스크립트에서 npm test를 작성하면 jest가 실행되도록 한다.
jest.config.json
{
"roots": ["<rootDir>/test/"],
"testEnvironment": "jsdom",
"setupFilesAfterEnv": ["<rootDir>/test/index.ts"],
"transform": {
"^.+\\.tsx?$": "ts-jest"
}
}roots
기본값은 ["<rootDir>"]이다. Jest가 파일을 검색하는 데 사용해야 하는 디렉토리 경로 목록을 설정한다. 나는 test라는 폴더에 테스트 파일을 몰아 넣기 위해 따로 디렉토리를 지정했다.
testEnvironment
기본값은 node인데, 이것은 Node.js 환경을 의미한다. jsdom을 사용하면 브라우저와 유사하게 DOM을 사용할 수 있는 환경으로 테스트할 수 있다.
test('jsdom 사용', () => {
const element = document.createElement('span');
expect(element).not.toBeNull();
});setupFilesAfterEnv
테스트 파일 실행 전에 테스트 프레임워크를 설정(configure)하거나 셋업하기 위해 일부 코드를 실행하는 파일이 필요하다면 그 파일에 대한 경로를 설정한다.
// test/index.ts
import "@testing-library/jest-dom";DOM 상태를 테스트하려면 jest-dom이 필요하기 때문에 이곳에 추가해준다.
transform
Jest는 코드를 자바스크립트로 실행한다. 그렇기 때문에 Node에서 기본적으로 지원하지 않는 jsx, typescript 구문을 사용하는 경우 변환기가 필요하다.
.ts와 .tsx 파일명을 포함하는 정규표현식으로 키를 만들고 값으로는 Typescript 내에서 Jest를 실행하게 해주는 "ts-jest"를 지정해준다.
babel.config.json
{
"presets": [
[
"@babel/preset-env",
{
"targets": {
"node": "current"
}
}
],
"@babel/preset-react",
"@babel/preset-typescript"
]
}presets
파일을 처리할 때 활성화할 사전 설정들을 정한다.
@babel/preset-env
대상 환경에 필요한 구문 변환을 세세하게 관리할 필요 없이 최신 자바스크립트를 사용할 수 있게 해주는 설정이다.
browserslist 같은 오픈소스를 활용해서 브라우저에 따라 폴리필이 필요한 구문을 찾아 매핑하는 역할을 한다.
targets 설정은 프로젝트에 대한 지원/대상 환경을 설명하는 곳이다. Jest를 사용하려고 바벨을 설치했기 때문에 브라우저 설정은 안하고 Node.js만 처리한다. "current"는 현재의 노드 버전을 의미한다.
// e.g targets 사용법 예시
{
"targets": {
"chrome": "58",
"ie": "11"
}
}@babel/preset-react, @babel/preset-typescript
아까 위에서 Jest는 코드를 자바스크립트로 실행하기 때문에 Node에서 기본적으로 지원하지 않는 jsx, typescript 구문을 사용하는 경우 변환기가 필요하다고 공부했다.
이 역할은 babel(@babel/preset-react와 @babel/preset-typescript)이 하는 거 아닌가? 싶지만 프리셋만으로는 한계가 있기 때문에 ts-jest로 보완하는 거였다.
🚀 npm test
npm test를 입력하면 아주 잘 동작한다. 요리조리 써보면서 익숙해져야 겠다.
참조
