[FE - ConnecTo] DAY73 TIL👩🏻‍💻 (Jest 탐구하기🤹‍♂️ - 1편)

22.10.26 수업 시간 중 공부한 내용들을 정리하였습니다 😊
피드백은 언제나 환영입니다! 🍊

Jest는 아이콘이 재미있게 생겨서 한 번쯤은 제대로 알아보고 싶었던 framework 입니다.

삐에로 신발처럼, 재미있을 것만 같은 Jest!

자 이제 탐구해보러 GO GO!

Jest?

Jest는 Facebook에서 만든 간단하고 사용하기 쉬운 testing Framework입니다!

---

설치는 어떻게 하나요?

npm i -D jest @types/jest

@types/jest 패키지를 설치하면 VSCode에서 코드 자동 완성 기능을 사용 가능합니다!

---

Jest 구성 파일은 어떻게 생성하나요?

npx jest --init

🕹 Jest 설치시 나오는 질문은 다음과 같이 설정하면 됩니다!

# 다음 질문은 Jest가 프로젝트에 적합한 구성을 만드는 데 도움이 됩니다.
The following questions will help Jest to create 
a suitable configuration for your project

# "package.json"에서 "test" 스크립트를 실행할 때 Jest를 사용하시겠습니까?
✔ Would you like to use Jest when running "test" script in "package.json"?
… yes

# 구성 파일에 Typescript를 사용하시겠습니까?
✔ Would you like to use Typescript for the configuration file? 
… no

# 테스트에 사용할 테스트 환경 선택
✔ Choose the test environment that will be used for testing 
› jsdom (browser-like)

# Jest가 커버리지 보고서를 추가하기를 원하십니까?
Do you want Jest to add coverage reports?
… no

# 커버리지 목적으로 코드를 계측하려면 어떤 공급자를 사용해야 합니까?
Which provider should be used to instrument code for coverage?
› babel

# 모든 테스트 전에 모의 호출, 인스턴스, 컨텍스트 및 결과를 자동으로 지우시겠습니까?
Automatically clear mock calls, instances, contexts & results before every test?
… no

---

테스트 명령어는 어떻게 등록하나요?

package.json 파일에 Jest 테스트를 수행할 수 있는 명령어를 작성합니다!

{
	"scripts": {
		"test": "jest --watch"
	}
}

# 테스트 파일 변경 관찰 후, 테스트 결과 출력
npm test

---

test할 파일은 어떻게 관리하나요?

Jest 테스팅 도구는 __tests__ 디렉토리 안에 js 확장자를 가진 파일 또는 .(test|spec).js 확장자를 가진 파일을 테스트 파일로 인식합니다.

예를 들면, __tests__ 디렉토리를 별도로 구성 관리할 수 있고,

아니면 테스트 할 파일을 실제 코드와 같은 위치에서 관리할 수도 있습니다.

---

만약 Jest와 ESLint 린팅 도구를 함께 사용하려면 어떻게 해야하나요?

→ 이 때는 eslint-plugin-jest 패키지도 함께 설치하면 됩니다!

npm i -D eslint-plugin-jest

그 다음, .eslintrc 파일을 만든 후, 구성 코드를 작성합니다.

npx eslint --init

{
  "env": {
    "es2021": true,
    "node": true,
    "jest/globals": true
  },
  "settings": {
    "jest": { "version": 26 }
  },
  "plugins": [ "jest" ],
  "extends": [
    "eslint:recommended",
    "plugin:jest/recommended"
  ],
  "parserOptions": {
    "ecmaVersion": 12
  },
  "rules": {
    "indent": [ "error", 2 ],
    "linebreak-style": [ "error", "unix" ],
    "quotes": [ "error", "single", { "allowTemplateLiterals": true } ],
    "semi": [ "error", "always" ],
    "jest/no-disabled-tests": "warn",
    "jest/no-focused-tests": "error",
    "jest/no-identical-title": "error",
    "jest/prefer-to-have-length": "warn",
    "jest/valid-expect": "error"
  }
}

---

Jest 환경에서 Babel 컴파일러를 함께 사용하려면 어떻게 해야하나요?

→ 필요한 종속성 패키지를 설치하면 됩니다!

Babel 구성 파일을 프로젝트 루트 위치에 생성한 후, 현재 버전의 Node를 대상으로 설정합니다!

npm i -D babel-jest @babel/core @babel/preset-env

• babel.config.js

module.exports = {
	presets: [
		['@babel/preset-env', {targets: { node: 'current' }}]
	],
};

• jest.config.js

module.exports = {
	testEnvironment: 'jsdom',
	transform: {
    '\\.js$': 'babel-jest',
  },
	testPathIgnorePatterns: ['/node_modules/'],
	setupFilesAfterEnv: ['./jest.setup.js'],
}

• jest.setup.js

import 'regenerator-runtime';