[테스팅 초기 설정] Jest + yarn-berry + Nextjs + Recoil + TypeScript

[아코하] 프로젝트에서 Jest를 적용하기 위해 세팅이다.

 

프로젝트 환경

- yarn-berry 3.3.1

- Next.js 13.1.2

- Recoil 0.7.6

- TypeScript 4.9.4

- Jest 29.5.0

 

 

1. 프로젝트 시작 & 관련 모듈 설치

yarn create next-app --typescript

CNA를  TypeScript 로 설치해주고,

 

yarn add -D jest @types/jest jest-environment-jsdom ts-jest babel-jest

Jest 와 관련 라이브러리도 설치해준다.

- jest : 단위테스트에 적합한 테스팅 라이브러리

- jest-environment-jsdom : Jest 28 버전 이후부터는 테스팅환경을 jsdom이 아니라 이 패키지로 추가 설치하고 적용시켜줘야 한다.

- ts-jest : Jest는 내부적으로 babel-jest로 컴파일하기 때문에, 타입스크립트 적용을 위해 설치한다.

- babel-jest : Jest는 기본 es5를 기준으로 동작하기 때문에 es6 환경을 사용하기 위해서 필요하다

 

 

yarn add -D @testing-library/react @testing-library/react-hooks @testing-library/user-event @testing-library/dom @testing-library/jest-dom

본격적으로 testing을 위해 testing 라이브러리들도 설치해준다.

@testing-library/react : React 환경 테스팅을 위해 필요

@testing-library/react-hooks : useExample과 같은 커스텀 훅을 테스팅하기 위해 필요

@testing-library/user-event : click()과 같은 실제 사용자가 이용하는 것과 비슷한 테스팅을 위해 필요

@testing-library/dom : matcher. dom 엘리먼트를 찾아내는데 필요한 메서드를 포함한 라이브러리. ex) getByRole

@testing-library/jest-dom : custom matcher를 위해 필요. ex) expect(dom).toBeInTheDocument()

 

Jest 관련 라이브러리들을 설치했다면, 이제 추가적으로 주변 config 파일들도 셋팅해준다.

 

 

package.json 설정

    "test": "jest --watch --passWithNoTests",
    "test:ci": "jest --ci --passWithNoTests",
    "coverage": "jest --coverage",

 

script에 jest 실행을 추가한다.

--watch : 파일이 변경되면 해당 파일과 관련된 테스트를 다시 실행한다. 파일 변경시 모든 테스트를 다시 실행하려면 --watchAll

--passWithNoTests : 테스트 파일을 찾을 수 없을 때 테스팅 도구 모음을 통과시킨다.

https://jestjs.io/docs/cli#--passwithnotests

 

 

tsconfig.json 설정

"compilerOptions: {
	"baseUrl": "./src",
    "paths": {
    	"@/*": ["./*"],
        "@pages/*": ["pages/*"],
        "@components/*": ["components/*"],
        "@utils/*": ["utils/*"],
        "@hooks/*": ["hooks/*"],
        "@types/*": ["types/*"],
    }
}

보다 간결한 import를 위해 baseUrl과 paths 경로를 설정한다.

@pages/* : @는 root를 의미하며 root는 설정한 baseUrl이다. 따라서 ./src/pages/* 가 된다.

 

 

jest.setup.js 설정

import '@testing-library/js-dom/extend-expect';

jest.setup.js 파일을 생성한다. 이 파일은 Jest testing에서 공통적으로 사용할 환경을 적용한다.

@testing-library/js-dom의 custom matcher를 기본 사용하기 위해 import 한다.

 

* @testing-library/react/cleanup-after-each 는 @testing-library/react가 버전 업 되면서 자동으로 지원해줘서 더이상 필요하지 않다.

 

 

jest.config.js 설정

const nextJest = require('next/jest');

const createJestConfig = nextJest({
  dir: './',
});

const customJestConfig = {
  verbose: true,
  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1',
    '^@/images/(.*)$': '<rootDir>/public/images/*',
    '^nanoid(/(.*)|$)': 'nanoid$1',
  },
  transform: {
    '^.+\\.(ts|tsx)$': 'ts-jest',
    '^.+\\.(js|jsx)$': 'babel-jest',
  },
  transformIgnorePatterns: [`/node_modules/(?!nanoid)`],
  testEnvironment: 'jest-environment-jsdom',
};
module.exports = createJestConfig(customJestConfig);

Nextjs는 12버전부터 내부적으로 Jest를 지원한다. next.config.js의 설정을 적용시키기 위해 모듈을 불러오고 dir 경로 세팅을 해준다.

- verbose : 실행중에 Jest가 개별 테스트를 보고해야하는지 유무.

- setupFilesAfterEnv : jest.setup.js 설정파일을 적용시킬 경로. 여기서 사용하는 <rootDir> 디렉토리 root를 의미한다.

- moduleNameMapper : 이미지나 스타일같은 싱글 모듈을 Mocking 하지 않고 사용하기 위해 절대경로를 설정한다.

  아코하 프로젝트에서는 nanoid 라이브러리를 사용했기 때문에, 오류를 피하고 그대로 사용하기 위해 설정해줬다.

- transform : Jest가 매칭되는 해당 파일을 지정한 라이브러리로 컴파일한다. Jest의 기본 설정은 babel-jest

- transformIgnorePatterns : 여기에 적히는 라이브러리는 transform 되지 않는다. 마찬가지로 nanoid의 오류를 피하기위해 설정.

- testEnvironment : Jest 28버전 이후로는 jsdom이 아니라 jest-environmnet-jsdom 으로 환경 세팅 해줘야 한다.

 

 

추가로 eslint도 세팅해준다.

 

.eslintrc.json 설정

yarn add -D @typescript-eslint/parser

{
  "env": {
    "browser": true, //실행환경 설정
    "es6": true,
    "node": true
  },
  "extends": [ // 여기에 꼭 적어줘야 사용 가능
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:prettier/recommended"
  ],
  "overrides": [],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "plugins": ["react", "react-hooks", "@typescript-eslint", "prettier"],
  "rules": { // 설정 적용 유무 0: 적용x, 1: 적용
    "react/react-in-jsx-scope": 0,
    "react/prefer-stateless-function": 0,
    "react/jsx-filename-extension": 0,
    "react/jsx-one-expression-per-line": 0,
    "no-nested-ternary": 0
  }
}

 

끝!

테스팅을 처음 적용해서 그런지 환경 세팅부터가 만만하지않다. testing하는 라이브러리의 의존에 따라서 nanoid외에도 추가적으로jest.config.js를 계속 수정해야 할듯 하다..!