들어가기에 앞서
참고한 자료를 바탕으로 비전문가가 정리한 글이므로 오류가 있을 수 있습니다.
오류에 대한 피드백은 언제든지 환영합니다. 부디 댓글로 알려주시길 바랍니다. 감사합니다.
패키지 설치
먼저 아래 명령어를 통해 패키지를 설치합니다. 추가적인 jest 매처를 사용하기 위해 jest-native도 설치합니다.
타입스크립트로 작성된 react컴포넌트는 ts-jest로 테스트를 진행할 것이므로 ts-jest도 설치합니다.
# npm
npm install -D @testing-library/react-native @testing-library/jest-native
npm install -D ts-jest @types/jest
npm install -D babel-jest @babel/preset-env @babel/preset-react @babel/preset-typescript
# yarn
yarn add - dev @testing-library/react-native @testing-library/jest-native
yarn add - dev ts-jest @types/jest
yarn add - dev babel-jest @babel/preset-env @babel/preset-react @babel/preset-typescript
Bash
복사
jest 및 babel 환경설정
jest 설정
설치를 완료하셨으면 jest관련 환경 설정파일을 작성해야 합니다. package.json에 “jest”키를 추가하여 작성해도되지만, 저는 package.json이 지저분해지는 거 같아서 따로 루트폴더에 jest.config.ts를 만들어서 관련 코드를 작성했습니다. 아래와 같이 작성해 주세요.
import { defaults as tsjPreset } from 'ts-jest/presets'
import type { JestConfigWithTsJest } from 'ts-jest'
const jestConfig: JestConfigWithTsJest = {
...tsjPreset,
preset: 'react-native',
setupFilesAfterEnv: ['@testing-library/jest-native/extend-expect'],
testEnvironment: 'node',
transform: {
'^.+\\.jsx$': 'babel-jest',
'^.+\\.tsx?$': 'ts-jest',
},
transformIgnorePatterns: [
'node_modules/(?!(jest-)?@react-native|react-native|react-clone-referenced-element|@rneui|expo-modules-core/*|@expo/*|expo(.*)/*)',
],
testRegex: '(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$',
moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
}
export default jestConfig
TypeScript
복사
각 옵션에 대해 위에서부터 하나씩 정리해보겠습니다.
1.
tsjPreset을 기반으로 하여 jestConfig를 구성합니다.
2.
preset: 'react-native'으로 설정하여 React Native 프로젝트용 Jest 프리셋을 사용합니다.
3.
setupFilesAfterEnv: 배열에 @testing-library/jest-native/extend-expect를 추가하여 테스트 환경을 설정합니다.
4.
testEnvironment: 'node'로 설정하여 테스트 환경을 Node.js로 설정합니다.
5.
transform: 객체를 사용하여 파일 변환기를 구성합니다. .jsx 파일은 Babel을 사용하여 변환되고, .tsx 또는 .ts 파일은 ts-jest를 사용하여 변환됩니다.
6.
transformIgnorePatterns: 배열을 사용하여 변환을 무시할 파일 패턴을 설정합니다. 주로 Node.js 모듈이나 특정 패키지를 제외하기 위해 사용됩니다.
7.
testRegex: Jest가 테스트 파일을 어떻게 찾을지 정의합니다. 기본적으로 __tests__ 디렉토리나 .test 또는 .spec로 끝나는 파일들을 찾습니다.
8.
moduleFileExtensions: 배열을 사용하여 모듈 파일의 확장자를 지정합니다. 이는 Jest가 테스트 파일을 어떤 확장자로 찾을지 정의합니다.
babel 설정
jest를 제대로 사용하려면 babel 프리셋도 설정해줘야 합니다.
module.exports = {
presets: [
'@babel/preset-react',
'@babel/preset-typescript',
'module:metro-react-native-babel-preset',
// '@babel/preset-env',
],
plugins: [
['@babel/plugin-transform-private-property-in-object', { loose: true }],
['@babel/plugin-transform-private-methods', { loose: true }],
['@babel/plugin-transform-class-properties', { loose: true }],
],
}
TypeScript
복사
Jest ES6 Syntax Error Troubleshooting
해당 에러는 Jest가 ES6 구문 또는 TypeScript 구문을 지원하도록 구성되지 않은 경우 발생할 수 있습니다.
이미 상단에 관련 설정을 작성해놨지만, 좀 더 추가적인 설명을 해보겠습니다.
제가 참고한 글에서는 transform옵션에서 ‘<rootDir>/node_modules/ts-jest/preprocessor.js’를 설정하라고 하지만, 저렇게 적으면 ts-jest로 적으라고 경고 메시지가 나옵니다.
해당 옵션은 ‘ts-jest’로 적으셔야 합니다. 또한, babel.config.js의 presets에 'module:metro-react-native-babel-preset' 를 추가하셔야 합니다. 혹시 그래도 파싱이 실패한다면 '@babel/preset-env' 프리셋을 추가해주세요.
하지만 제 프로젝트에서는 해당 프리셋을 추가하니 Property 'require' doesn't exist react native metro bundler 에러가 발생했습니다.
해당 프리셋은 ECMAScript 2015+(ES6+) 문법을 사용하여 작성된 코드를 대상 환경에 맞게 변환하는 데 사용됩니다. JavaScript 코드를 다양한 환경에서 실행 가능한 형태로 변환하는 데 필수적인 프리셋이지만 제 경우에는 오히려 에러만 발생하고 프로젝트 실행 자체가 불가능했기에 삭제했습니다.
아무쪼록 이 글을 보시는 분은 저와 같은 삽질을 안 하시길 바랍니다. 감사합니다.
