Jest와 Prettier

Jest

1. What is Jest?

• Jest 는 test case를 통해 코드가 제대로 동작하는지 확인하는 '테스팅 프레임워크' 입니다.
• ESlint 가 코드 스타일 rule을 정하는 것이라면, Jest를 통해서는 코드가 올바른 기능을 하는지 체크할 수 있습니다.

2. Getting Started

• sprint directory 의 root 에서 Jest 라이브러리를 개발 의존성(devDependencies)으로 설치합니다.

  yarn 혹은 npm을 이용하여 간단하게 설치 가능합니다.

        npm install --save-dev jest

  Tip* --save-dev 는 모듈을 개발 의존성으로 설치한다는 의미의 명령어로, 해당 모듈은 package.json의 dependencies 가 아닌 devDependencies 에 저장됩니다.

  Tip* devDependencies 는 개발 시 사용하는 패키지를 설치하는 곳으로 배포 시에는 포함되지 않습니다.

• test 커맨드를 지정해 보겠습니다.

  package.json 파일을 열고 test script를 jest로 수정합니다.

         "scripts": {
             "test": "jest"
          }

  설정을 마쳤다면 터미널에 npm test ( 혹은 yarn test ) 라고 입력하면 jest 커맨드를 실행할 수 있습니다.

  test 코드와 파라미터는 다음과 같이 이루어져 있습니다.

          test(' test 할 코드에 대한 설명 ', () => {
               expect(' test 할 코드 ').toXxx(' test 결과 ');
          });

• 이제 직접 테스트를 만들고 적용시켜 보겠습니다.

  먼저 sum.js라는 파일을 생성하고 함수를 exports 합니다.

  // sum.js
  
  function sum(a, b){
      return a+b;
  }
  
  module.exports = sum;

  그 다음 sum.test.js 파일을 생성하고 다음과 같이 입력합니다.

  // sum.test.js
  
  const sum = require('./sum');
  test('adds 1 + 2 to equal 3', () => {
      expect(sum(1, 2)).toBe(3);
  });

  터미널에 npm test 를 입력하면 다음과 같이 Jest에서 testing 한 결과가 출력됩니다.

3. Matcher?

• jest 에서는 결과에 따라 다른 Matcher 를 사용합니다.

  ex) .toBe / .toEqual / .toBeTruthy .......

https://jestjs.io/docs/en/using-matchers

Jest · 🃏 Delightful JavaScript Testing

 

Prettier

1. What is Prettier?

• 정해진 규칙에 따라 자동으로 코드 스타일을 정렬해주는 도구입니다. 코드의 가독성을 높이고, 자동으로 스타일을 통일할 수 있습니다.
• Linter와 함께 사용할 수 있습니다.
• VS Code, Sublime text 등과 같은 IDE에 추가하여 편리하게 사용할 수 있습니다.

2. How to integrate Prettier to Visual Studio Code

• Visual Studio Code Extention 에서 Prettier 를 검색하고 설치합니다.

  이 후 VS Code를 다시 시작한 후, settings에서 규칙을 설정하면 코드를 깔끔하게 정리할 수 있습니다.

•  

  {
     "singleQuote": true, // 따옴표 고정
     "semi": true, // 코드 끝에 ; 설정
     "useTabs": false, // Tap 사용여부
     "tabWidth": 2, // Tap 크기
     "trailingComma": "all", // 객체 끝 부분에도 Comma 추가
     "printWidth": 100 // 줄 당 max length
  }

  더 자세한 설정과 규칙은 이 Docs 에서 확인하실 수 있습니다.

https://prettier.io/docs/en/options.html

Prettier · Opinionated Code Formatter

3. ESlint + Prettier

• eslint-config-prettier를 사용하면 ESLint 는 자바스크립트 문법을 담당하고, 코드 스타일 정리는 prettier 가 담당하게 됩니다.

• 먼저 작업할 directory 의 root 에서 eslint-config-prettier 패키지를 설치합니다.

  npm install eslint-config-prettier
  
  package.json 의 eslintConfig 에서 extends 부분에 prettier를 추가해줍니다.

"eslintConfig": {
    "extends": [
        "airbnb",
        "prettier"
    ],
    "rules": {
        "react/jsx-filename-extension": 0,
        "react/jsx-one-expression-per-line": 0
    }
},

이제 ESlint 와 Prettier 를 충돌 없이 함께 사용할 수 있습니다.

Tip* ( 저장 시마다 Auto Fix 설정하기 )

설정에서 Format On Save 를 검색해서 활성화 , ESLint 를 검색해서 Auto Fix On Save를 활성화 시킵니다.

또는 settings 화면으로 간 뒤 아래처럼 prettier 속성을 설정해 사용할 수 있습니다.

{
  "editor.formatOnSave": true,
  "prettier.semi": false,
  "prettier.javascriptEnable": ["javascript", "javascriptreact"],
  "prettier.printWidth": 100
}