[Jest] 01. Jest 설정

해당 글은 100% 정확한 글이 아닙니다. 저의 경험을 작성하는 것이며, 틀릴 수 있습니다. 
이점 참고 부탁드리며, 또한 지적을 환영합니다.

이번 글은 Jest를 사용하기 앞서 간략한 설정 방법과 주요 옵션들을 설명해볼까해요.

앞 전에 만든  프로젝트를 그대로 사용해 주세요.

 

옵션 설정

Jest 옵션을 설정하기 위해서는 package.json에 설정을 추가하거나, jest.config.js 파일을 만들어 옵션을 설정할 수 있어요.

// package.json
{
  "name": "your-project",
  "version": "1.0.0",
  "scripts": {
    "test": "jest"
  },
  "jest": {
  	"verbose": true,
	"preset": "react-native",
  	"testEnvironment": "node",
  	"setupFilesAfterEnv": ["<rootDir>/jest.setup.ts"],
  }
}

// jest.config.js
module.exports = {
  verbose: true,
  preset: "react-native",
  testEnvironment: "node",
  setupFilesAfterEnv: ["<rootDir>/jest.setup.ts"],
  collectCoverage: true,
  collectCoverageFrom: ["src/**/*.{js,jsx}", "!src/index.js"],
  coverageDirectory: "coverage",
  coverageReporters: ["text", "lcov"]
};

 

주요 옵션

verbose

해당 값을 true 설정하면 각 테스트의 성공/실패 결과를 자세히 출력해요.

testEnvironment

테스트 환경을 설정해요. 예를 들어, Node.js 환경에서는 "node", 브라우저 환경에서는 "jsdom"을 사용합니다. React Native에서는 더빠르고 가벼운 node를 사용할 수 있어요.

testEnvironment: "node"

setupFiles

이 옵션은 테스트 데이터를 설정하거나 외부 컴포넌트, 네이티브 모듈, 종속성, 서비스 또는 API를 모킹하는 등 테스트를 실행하기 전에 실행해야 하는 모듈을 지정하는 데 사용해요.

"setupFiles": [
         "./src/mock"
      ]

setupFilesAfterEnv

이 옵션은 @testing-library/jest-native와 같은 추가 테스트 라이브러리를 설정하는 데 사용돼요.

    "setupFilesAfterEnv": ["@testing-library/jest-native/extend-expect","./jest.setup.ts"]

moduleFileExtensions

이 옵션은 테스트를 실행할 때 찾아야 하는 파일 확장자를 지정하는 데 사용해요. 예를 들어 확장자가 ".ts", ".tsx", ".js", ".jsx", ".json" 및 ".node"인 테스트 파일이 있는 경우 "moduleFileExtensions" 옵션에서 지정해요.

    "moduleFileExtensions": [
      "ts",
      "tsx",
      "js",
      "jsx",
      "json",
      "node"
    ]

moduleNameMapper

"moduleNameMapper" 옵션은 코드에서 가져오는 파일을 찾는 방법을 Jest에 알려주는 데 사용해요. 예를 들어 파일을 직접 작성하는 대신 바로 가기나 별칭을 사용하여 파일을 가져올 수도 있어요.

import { Button } from '@/Components'

이러한 방식으로 Component를 가져올 때, 아래와 같이 Mapping 할 수 있어요.

  "moduleNameMapper": {
      "@/ (.*)$": "<rootDir>/src/$1"
    }

transformIgnorePatterns

"transformIgnorePatterns" 옵션은 파일을 테스트하기 전에 변경해서는 안 되는 파일을 Jest에 알려주는 데 사용해요. 예를 들어, 자바스크립트와 다른 언어나 구문을 사용하는 경우와 같이 일부 파일을 변경해야 하는 경우가 있어요. 기본적으로 Jest는 "node_modules" 디렉토리에 있는 파일은 일반적으로 이미 JavaScript로 작성되어 있기 때문에 변경하지 않지만, 때로는 일부 파일을 변경해야 할 수도 있어요. (예: TypeScript 또는 ES6 구문을 사용하는 경우). 이렇게 하려면 특수 코드를 사용하여 변경하려는 파일을 일치시키고 "!" 기호를 사용하여 일치하지 않는 파일을 제외할 수 있어요.

"transformIgnorePatterns": [
      "/node_modules/ (?! (react-native|react-native-cookies)/)"
    ]

위 코드의 의미는 Jest는 "node_modules" 디렉토리에서 "react-native" 또는 "react-native-cookies"로 시작하지 않는 모든 파일을 transform 해요. "|" 기호를 사용하여 더 많은 예외를 추가할 수 있어요. 다른 코드를 사용하여 파일 유형이나 폴더 이름과 같은 파일 이름의 다른 부분을 일치시킬 수도 있어요.

transform

Jest는 실제로 "node_modules" 디렉토리에 있는 원본 파일을 변경하지 않고, 테스트를 실행할 때 메모리에서 일시적으로만 변경해요. 이를 "변환"이라고 하며 "트랜스포머"라는 도구를 사용하여 수행해요. Jest에는 JavaScript, TypeScript, JSON 등과 같은 일반적인 파일 유형을 처리할 수 있는 몇 가지 기본 제공 트랜스포머가 있어요. npm에서 설치하거나 직접 작성한 사용자 정의 트랜스포머를 사용할 수도 있죠. Jest 구성 파일에서 "transform" 옵션을 사용하여 각 파일 유형에 사용할 트랜스포머를 지정할 수 있어요.

 "transform": {
      "\\.[jt]sx?$": "babel-jest",
      "\\.ts$": "ts-jest"
    }

위 코드는 ".js", ".jsx", ".ts" 또는 ".tsx"로 끝나는 모든 파일을 변환하려면 "babel-jest"를 사용하고 ".ts"로 끝나는 모든 파일을 변환하려면 "ts-jest"를 사용한다는 의미에요. 파일 유형과 일치하는 정규식을 사용할 수 있고, 배열 배열을 사용하여 파일이나 디렉터리마다 다른 트랜스포머를 사용할 수도 있어요.

 

이외에도 Coverage 같은 중요한 옵션이 있지만, 이것은 후에 따로 설명하도록 할게요.

 

 

React Native Test 환경 설정

React Native에서 Test를 하기 위해서는 몇가지 추가 설정을 해야해요!

새롭게 만든 프로젝트 내 App.test.tsx 파일을 열어보면, 아래와 같이 deprecated된 모습이 보이죠?

dreprecated 된 create

마우스를 얹어보면 https://react.dev/warnings/react-test-renderer  해당 사이트를 참조하라고 하네요.

여기서는 더이상 react-test-renderer가 관리되지 않기 때문에 @testing-library/react-native 를 사용하라고 설명하고 있네요!

 

따라서 몇가지 추가적인 설치를 해볼게요.

npm i -D @testing-library/react-native @types/jest @testing-library/jest-native

// 또는

yarn add -D @testing-library/react-native @types/jest @testing-library/jest-native

@testing-library/react-native는 jest에서 react native 테스트를 할 때 필요한 도구입니다.

render, screen 같은 필수적인 함수부터, 다양한 Matcher를 지원합니다. Matcher도 후에 설명하겠습니다.

@types/jest는 jest의 타입을 정의 된 파일입니다.

@testing-library/jest-native는 react native 테스트 시 유용한 Custom Matcher를 추가적으로 제공하는 라이브러리입니다. 다만 해당 라이브러리 경우 유용하지만 잘 관리 되지 않는 다는 경고가 붙어 있으니, 유의하셔서 사용해주세요.

 

라이브러리 설치가 끝나면, jest.config.js 혹은 package.json에 아래와 같이 추가해주세요.

module.exports = {
  preset: 'react-native',
  setupFilesAfterEnv: ['./jest.setup.ts'],
};

 

그리고 아래와 같이 파일을 추가로 root폴더에 생성해주세요.

// jest.setup.ts

import '@testing-library/react-native/extend-expect';
import '@testing-library/jest-native/extend-expect';

 

다음, App.tsx파일과 테스트 파일을 아래와 같이 수정해요.

// App.tsx

import React from 'react';
import {SafeAreaView, Text} from 'react-native';

function App(): React.JSX.Element {
  return (
    <SafeAreaView>
      <Text>hello</Text>
    </SafeAreaView>
  );
}

export default App;

// __tests__/App.test.tsx

import React from 'react';
import App from '../App';
import {render, screen} from '@testing-library/react-native';
describe('렌더링 확인', () => {
  it('renders correctly', () => {
    render(<App />);
    expect(screen.getByText('hello')).toBeOnTheScreen();
  });
});

 

파일 수정이 완료 되었다면, 테스트를 실행해 볼까요?

npm run test

// 또는

yarn test

테스트 성공

 

 

테스트가 성공적으로 잘 된다면 기본적인 설정은 완료됐어요.

만약 에러가 뜬다면 아래를 참조해주세요.

 

Trouble Shooting

만약 toBeOnTheScreen 함수를 인식 할 수없다면, tsconfing.json 을  아래와 같이 수정해봐요.

{
  "extends": "@react-native/typescript-config/tsconfig.json",
  "exclude": ["node_modules"]
}

 

이는 typescript가 node_modules를 제외하고 관장하게 되어 읽지 않았던 jest.setup.ts 파일을 읽도록 해줍니다.

 

그외 이슈가 있다면 댓글로 알려주세요!

여기까지 한다면, 대략적인 테스트 준비가 마무리 됐어요. 다음 글에서 간단한 테스트를 작성해볼게요.

[Jest] 00. Jest 시작하기