190616 jest, eslint

Jest · 🃏 Delightful JavaScript Testing

공식 홈페이지에 따르면,

jest 는 심플함에 중점을 둔 자바스크크립트 테스팅 프레임워크이다.

babel, typescript, noe, react, angular, vue 등 대부분의 자바스크립트 환경에서 사용이 가능하다.

본인은 npm을 사용하기 때문에 npm 기준으로 서술하겠다.

(공식문서에는 yarn을 통한 방법도 소개됨)

npm install --save-dev jest
//설치 후 기본 jest config file 작성
  jest --init

기본 jest 실행 방식

//sum.js
function sum(a, b) {
   return a + b;
 }
 module.exports = sum;
//sum.test.js
const sum = require('./sum');
  test('adds 1 + 2 to equal 3', () => {
   expect(sum(1, 2)).toBe(3);
 });
//package.json
 {
   "scripts": {
     "test": "jest"
   }
 }
//cmd
npm run test   //package.json에서 설정해준 'test'명령어로 실행.
//cli로 직접 실행하는 방법
jest my-test --notify --config=config.json
// my-test라는 파일을 config.json의 설정을 참고하여 jest로 실행

테스트 파일을 작성하는 방법은 아래 문서를 참고하여 작성.

Using Matchers · Jest

Getting Started with ESLint

eslint

: 코드의 스타일 가이드라인을 준수하도록 도와주는 오픈소스 js linting utility

$ npm install eslint --save-dev   //npm 통해서 eslint 설치
$ ./node_modules/.bin/eslint — init 
//eslint 기본 config파일 작성. 
//이 때 옵션들 잘 봐서 체크해줘야 함.
//예를 들어 .eslintrc.파일이 js일지 json일지도 포함됨
 $ ./node_modules/.bin/eslint yourfile.js
//기본적인 eslint config를 통하여 yourfile.js를 체크하는 코드

estlint config 파일은 .eslintrc.

기본 형태는 아래와 같다.

{
    "rules": {
        "semi": ["error", "always"],
        "quotes": ["error", "double"]
    }, 
    "extends": "eslint:recommended"
}

semi와 quotes는 각각 ESlint의 룰의 이름이다.

해당 key의 첫번째 value ( semi[0]) 은 에러의 레벨이다. 아래와 같이 총 세가지 존재한다.

extends는 다른사람이 작성한 eslint rule들의 집합을 받아 사용한다.

List of available rules

예제의 extends의 경우는 위의 주소의 체크표시된 rule들을 전부 적용한다.

“extends”: “airbnb” 

이런식으로 사용한다면, airbnb의 스타일 가이드라인을 사용할 수 있다.

airbnb/javascript