[Testing] react + webpack + typescript 프로젝트 간단한 테스트 환경 구성 및 실습(feat. Jest , Testing-library, without CRA)

오늘은 리액트 + 타입스크립트 + 웹팩 조합에서 테스트 환경을 구성하는 방법에 대해서 알아보도록 하겠습니다. 사실 CRA안에 이미 다 준비가 되어 있지만, CRA를 즐겨 사용하지 않는 저는 직접 구성을 하여야 되었습니다. 오늘은 간단하게 프로젝트에 테스트 환경을 부어보도록 하겠습니다.

 

선수 지식이 필요 합니다. 우측 링크를 확인해주세요. (https://ryuhojin.tistory.com/19)

 

1. 패키지 설치

//npm
npm i -D jest jest-environment-jsdom ts-jest @testing-library/react @types/jest
//yarn
yarn add -D jest jest-environment-jsdom ts-jest @testing-library/react @types/jest

 

 리액트 공식문서 기반으로 가이드 되어 있는 testing-library와 jest를 이용하도록 하겠습니다. 위의 패키지 설치가 끝났다면 아래와 같은 작업을 해줄 수 있습니다.

 

2. 설정 (tsconfig.json / jest.config.js)

2.1. tsconfig.json

{
  "compilerOptions": {
    "outDir": "./dist",
    "target": "es5",
    "module": "esnext",
    "jsx": "react-jsx",
    "noImplicitAny": true,
    "allowSyntheticDefaultImports": true,
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "include": ["src", "test"]
}

 저는 최상위 디렉토리 아래에 test라는 디렉토리를 두고 해당 디렉토리에 test코드를 따로 작성할 계획이 있기 때문에  include에 위와 같이 작성하였습니다.

 

2.2 jest.config.js

/** @type {import('ts-jest').JestConfigWithTsJest} */
module.exports = {
  preset: "ts-jest",
  testEnvironment: "jsdom",
  moduleNameMapper: {
    "^@/(.*)$": "<rootDir>/src/$1",
  },
};

 jest설정 파일인 jest.config.js 입니다. test환경인 jsdom을 적어주시고 preset에 ts-jest 그리고 moduleNameMapper를 tsconfig.json의 paths와 매칭시켜줍니다. 이 작업을 하는 이유는 test파일 내에서 import된 모듈을 인식을 못할 수 있기 때문에 이를 명시해주는 작업입니다.

 

 위의 코드는 yarn ts-jest config:init 명령어를 입력하시면 자동으로 생성이 되게 됩니다. 아마 testEnvironment가 다르고 moduleNameMapper가 비어있을 것입니다. 복붙하는거보다 직접해보시는게 아무래도 좋습니다.

 

3. 테스트 코드 작성(예)

import { render } from '@testing-library/react';
import MainPage from '@/pages/home/MainPage';

describe('<MainPage />', () => {
    const mainPage = (props = {}) => {
        const utils = render(<MainPage />)
        const { getByText } = utils;
        const text = getByText('류호진');
        return {
            ...utils,
            text
        }

    }
    it('matches snapshot', () => {
        const { container } = mainPage();
        expect(container).toMatchSnapshot();
    });

    it('show the props correctly', () => {
        const { text } = mainPage();
        expect(text).toBeTruthy();
    })
})

간단한 테스트 코드 입니다. 저는 MainPage를 import하였고 해당 페이지를 스냅샷을 찍고 또한 텍스트를 검증하는 테스트 코드를 작성하였습니다. render와 같은 것들은 저는 공통으로 빼서 각각의 테스트 코드 내에서 다시 작성하는 일이 없도록 하였습니다. 해당 코드에서는 별로 필요 없어보일 수 있지만, 테스트 코드량이 많아진다면 유용하다고 생각합니다.

 

4. package.json 실행 스크립트 추가

"scripts": {
  "dev": "webpack-dev-server --config config/webpack.dev.js",
  "test": "jest --maxWorkers=50%",
  "test:watch": "jest --watch --maxWorkers=25%",
  "master": "start yarn run dev && start yarn run test"
},

저는 간단하게 위와 같이 구성해보았습니다. 기본적으로 jest만 적어주면 테스트 간단한거 하는데도 한세월이 걸리기 때문에 전 maxWorker 옵션을 통해 테스트 속도를 올렸습니다. 이 외에도 --verbose나 다양한 옵션등이 있기 때문에 공식문서를 참고하시는게 가장 좋습니다.

 

항상 글을 쓰면서 생각하는거지만 모든 문서는 공식 문서가 가장 좋습니다. 특히, 설정사항등은 개인마다 프로젝트 셋팅이 천차만별 이기 때문에 공식문서를 보고 이해하는편이 좋다고 생각합니다. 저도 글을 쓰는 사람이지만.. 아무래도 공식문서가 가장 명확합니다.

 

사이드프로젝트 준비중인 코드지만 아래코드를 참고해주세요. 기본적인 셋팅에 대한 대답이 되었으면 좋겠습니다. fork해가서 그대로 쓰셔도 됩니다.

참고 할만한 코드 -> https://github.com/ryuhojin/unje