1. 프로젝트 생성
yarn만 설치되어 있다면, 아래와 같은 명령어로 adam 이름을 가진 nextjs 프로젝트를 쉽게 생성할 수 있습니다.
yarn create next-app adam
2. Nextjs의 다양한 테스트 도구들
넥스트는 공식문서에서 다양한 테스트 툴을 소개하고 있습니다.
https://nextjs.org/docs/testing
- Jest
- Cypress
- Playwright
빠르게 훑어본 결과 모두 비슷비슷한 느낌이었습니다. 저는 제일 위에 있어서 Jest를 사용하기로 했습니다.
3. 테스트를 위한 패키지 설치
- jest 설치 yarn add --dev jest
- scripts 등록
jest를 설치하고 나면 yarn jest 명령으로 테스트를 실행할 수 있습니다.
하지만 yarn test 명령이 우리에겐 더 익숙하기때문에 이를 package.json 파일의 scripts에 등록해줍니다.
이제 yarn test 명령을 실행하면 yarn jest가 실행됩니다.
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint",
"test": "jest" // 등록 후에 yarn test로 테스트를 실행할 수 있다.
},
이제, 본격적으로 테스트를 위한 코드를 작성합니다.
간단히 두 수를 더하는 함수를 만들고 이를 테스트해보겠습니다.
4. 샘플 테스트 작성
- calculator.tsx 작성
next.js 프로젝트를 생성하면 자동적으로 pages 폴더가 존재하게 됩니다.(13 최신버전의 경우 app)
pages 폴더 하위에 calculator.tsx 파일을 생성하고 아래 코드를 작성합니다.
type SumParams = {
num1: number;
num2: number;
};
const sumTwoNums = ({ num1, num2 }: SumParams): number => {
return num1 + num2;
};
export default sumTwoNums;
- 샘플 테스트 작성 : calulator.text.tsx 파일을 생성하고 아래 코드를 작성
(위치는 일단 루트에 따로 test 폴더를 생성하여 그 하위에 작성하도록 하겠습니다.)
import {describe, expect, test} from '@jest/globals';
import sumTwoNums from './calculator';
describe('calculator test', () => {
test('sum test', ()=> {
expect(sumTwoNums({ num1: 2, num2: 3 })).toBe(5);
})
});
여기까지하고 yarn test로 테스트를 실행하면 실행되지 않고 에러가 발생합니다.
Jest가 테스트를 위한 패키지이긴 하지만 Javascript 파일만 파싱 가능할 뿐,
최신 문법인 Typescript를 파싱하지 못하기 때문입니다.
즉, 모국어(javascript)밖에 못하는 Jest에게 외국어(typescript)를 가르쳐야 합니다.
이것을 2가지 방법으로 해결할 수 있습니다.
5. Jest 설정
첫번째 방법은, 루트에 다음 파일을 작성하는 것입니다.
babel.config.js 파일을 생성하고 아래 코드를 작성해줍니다.
module.exports = {
presets: [
'@babel/preset-env',
'@babel/preset-typescript',
]};
jest 패키지 설치 시 자동으로 Babel 패키지가 설치되는데, Babel을 사용하여 TypeScript 파일을 컴파일하고 JavaScript 파일로 변환합니다.
즉, jest가 Typescript를 읽지 못하니 읽어주는 통역사(translator) 역할을 Babel에게 부여해주는 것입니다.
이제 다시 yarn test를 실행하면 테스트가 정상 실행 및 성공합니다.
(참고로 config 파일이 js파일이기때문에 이 파일을 ts로 고치고싶을 수 있습니다. 이 방법은 맡기겠습니다.)
위의 첫번째 방법은 Jest가 typescript 해석 능력을 직접 갖는게 아니라고 할수 있습니다. 번역을 babel에게 맡기니까요. 근데 Jest에게 번역 능력을 직접 갖게 하는 방법도 있습니다. 그게 아래 두번째 방법입니다.
아래 방법을 일반적으로 더 많이 쓴다고 합니다.
그래서 저도 두번째 방법을 사용하여 테스트 환경을 구성하기로 하였습니다.
두번째 방법은, jest에서 제공하는 ts-jest 패키지를 설치하고 사용하는 방법입니다.
yarn add --dev ts-jest
단, 이 패키지를 설치하고 추가로 config 파일을 만들어줘야 합니다.
이름은 jest.config.ts로 만들어줘야하고, 아래 코드를 작성합니다.
export default {
preset: 'ts-jest'
}
이 상태에서 yarn test를 실행해봅시다. 여전히 에러가 발생합니다.
왜냐면 config 파일이 typescript로 되어있기 때문에 이 파일을 해석하지 못합니다.
Error: Jest: Failed to parse the TypeScript config file /Users/taki/adam/jest.config.ts
Error: Jest: 'ts-node' is required for the TypeScript configuration files. Make sure it is installed
Error: Cannot find package 'ts-node' imported from /Users/taki/adam/node_modules/@jest/core/node_modules/jest-config/build/readConfigFileAndSetRootDir.js
at readConfigFileAndSetRootDir (/Users/taki/adam/node_modules/@jest/core/node_modules/jest-config/build/readConfigFileAndSetRootDir.js:116:13)
at async readInitialOptions (/Users/taki/adam/node_modules/@jest/core/node_modules/jest-config/build/index.js:400:13)
at async readConfig (/Users/taki/adam/node_modules/@jest/core/node_modules/jest-config/build/index.js:147:48)
at async readConfigs (/Users/taki/adam/node_modules/@jest/core/node_modules/jest-config/build/index.js:421:26)
at async runCLI (/Users/taki/adam/node_modules/@jest/core/build/cli/index.js:152:59)
at async Object.run (/Users/taki/adam/node_modules/jest-cli/build/run.js:124:37)
좀 이상하게 느껴지는 부분이긴 하지만,
jest에게 타입스크립트로 된 config 파일을 해석하는 방법을 따로 가르쳐줘야합니다.
방법은 간단히 ts-node 패키지를 추가하면 됩니다.
yarn add ts-node --dev
이제 다시 yarn test를 실행하면 테스트가 잘 작동하게 됩니다.
++ 참고로 jest.config.ts을 그냥 js파일로 만들어주면 ts-node 없이도 테스트가 잘 실행됩니다.
module.exports = {
preset: 'ts-jest',
};
++ 또한 ts-jest 패키지 설치 과정에서 옵션을 주어 jest.config.ts 파일을 바로 만들어줄 수도 있습니다.
이때도 preset: ‘ts-jest’를 따로 추가해주긴 해야합니다.
https://kulshekhar.github.io/ts-jest/docs/getting-started/installation/#jest-config-file
Installation | ts-jest
Dependencies
kulshekhar.github.io
6. 결론
nextjs, typescript 환경에서 jest를 쓰고 싶으면
아래 명령처럼 최초 패키지 설치 시 jest, ts-jest, ts-node를 함께 설치해주어야 편합니다.
yarn add --dev jest ts-jest ts-node
참고자료
댓글