React Testing Setting ( Jest )

환경 세팅

CRA 명령어

npx create-react-app react-test --template typescript 

Jest 설치 및 여러 부수 라이브러리 설치

npm i jest jest-dom jest-environment-jsdom ts-jest babel-jest --dev

testing-library 를 위한 모듈들 설치

npm i @testing-library/user-event @testing-library/react @testing-library/jest-dom @testing-library/dom --dev

package.json scripts 영역에 명령어 추가

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

tsconfig / basic setting

{
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "@/*": ["./*"],
      "@pages/*": ["pages/*"],
      "@components/*": ["components/*"],
      "@utils/*": ["utils/*"],
      "@hooks/*": ["hooks/*"],
      "@types/*": ["types/*"]
    },
      //...
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"]
}

tsconfig-setup

{
  "compilerOptions": {
    "target": "es5",
    "baseUrl": "src",
    "paths": {
      "@/*": ["./*"],
      "@pages/*": ["pages/*"],
      "@components/*": ["components/*"],
      "@utils/*": ["utils/*"],
      "@hooks/*": ["hooks/*"],
      "@types/*": ["types/*"]
    },
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "jest.config.ts","src/jest-setup.ts"],
  "exclude": ["node_modules"]
}

package.json 명령어 추가

 "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "jest --watch --passWithNoTests",
    "test:ci": "jest --ci --passWithNoTests",
    "eject": "react-scripts eject"
  },

---

환경 세팅중 이슈 해결

(SyntaxError: Support for the experimental syntax ‘jsx’ isn’t currently enabled)

ReferenceError: React is not defined

.babelrc 및 웹팩 설정시 JSX 변환 오류가 있었다.

해당 error 는 웹팩에서 실행하는 babel-loader 에서 JSX의 <> 태그 문법이 변환이 되지않아 에러가 나는 상황이였다.

해당 에러는 다음과 같이 해결할 수 있었다.

1).babelrc 생성 ( 해결 )

{
    "presets": [
      "@babel/preset-env",
      ["@babel/preset-react", { "runtime": "automatic" }],
      "@babel/preset-typescript"
    ]
}

2)babel.config.js 생성

module.exports = {
  presets: [
    ["@babel/preset-react", { runtime: "automatic" }],
};

또한, 위와 같이 설정을 해주니 ReferenceError: React is not defined 이슈도 함께 해결되었다.

typeError: expect(...).toHaveAttribute is not a function

Git hub 이슈를 살펴보니 toHaveAttribute 같은 속성은 기본적으로
import "@testing-library/jest-dom/extend-expect"; 를 추가해주어야한다.

test file 에 하기 import 를 추가했다.

import "@testing-library/jest-dom/extend-expect";

---

역시 항상 초기세팅이 어려운것 같다..

다음에는 테스트 코드의 개념과 TDD 개발론을 정리해 오겠다.