Node.js와 Jest 실습

Node.js 는 프레임워크가 아니라 자바스크립트를 실행시킬 수 있는 런타임 환경이다.

 

---

자바스크립트의 런타임 환경

예전에는 자바스크립트를 실행할 수 있는 환경이 브라우저에만 한정되어 있었다. 하지만 이러한 자바스크립트를 브라우저에서 꺼내와 그 밖에서도 실행할 수 있도록 만들고 싶어 했다. 그래서 나오게 된 자바스크립트 환경이 Node.js이다.

브라우저와 Node.js

브라우저에서는 자바스크립트가 File을 읽을 수는 있지만, update나 write(delete)을 하면 안 된다. 웹 사이트에서 파일을 조작한다는 것은 결국 해킹이다. 즉, 이러한 기능을 제공할 필요가 없기 때문에 원척적으로 파일 컨트롤을 보안 문제 때문에 불허한다.

 

반면에 Node.js의 경우에는 서버를 개발하는 등의 환경에서 사용되기 때문에 파일 컨트롤이 필요하다. 그래서 Node.js의 경우에는 브라우저 환경과 다른 Host 객체를 제공하여 이러한 기능들을 지원한다. 그리고 Node.js의 경우에는 ES6에서 모듈을 지원하기 전 이미 필요에 의해 모듈 시스템을 제공하기도 했다.

Node.js와 npm(Node Package Manager)

과거에는 스크립트 태그를 통해서 라이브러리 등을 사용할 때 관리했는데, 일정 수준 이상의 프로젝트의 경우 라이브러리를 많이 사용하게 되고 라이브러리들 사이의 의존성도 직접 관리해주어야 했다. 스크립트 태그는 순서에 영향을 받기 때문에 실수를 유발할 가능성이 매우 높으며 실수가 발생하지 않도록 하기 위해 엄청난 노력이 필요했다.

 

하지만 오늘날에는 npm을 통해서 의존성 관리 등을 쉽게 해 줄 수 있으며, 이러한 기능들을 동작시키기 위해서 환경이 필요한데 이 환경이 바로 Node.js이다.

 

npm 간단 실습! (Jest)

1. 설정

먼저 npm init을 통해 초기화를 해준 뒤에 에어비앤비 컨밴션을 따르는 eslint를 설치해주도록 아래와 같이 명령어를 입력해준다.

npm init -y
npm i -D eslint eslint-config-airbnb-base babel-eslint eslint-config-prettier
npm i -D jest @types/jest 

참고로 "-D" 옵션을 주면 devDependencies로 들어가서 배포를 하지 않고 개발에만 사용되도록 해준다.

 

그럼 아래와 같이 package.json파일이 생성된다.

{
  "name": "test_js",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "jest"
  },
  "devDependencies": {
    "@types/jest": "^26.0.23",
    "babel-eslint": "^10.1.0",
    "eslint": "^7.27.0",
    "eslint-config-airbnb-base": "^14.2.1",
    "eslint-config-prettier": "^8.3.0",
    "jest": "^27.0.3"
  }
}

그리고. eslintrc.json을 통해서 lint설정을 원하는 대로 세팅해주면 되는데, 여기서는 아래와 같이 설정을 해주었다.

{
  "parser": "babel-eslint",
  "parserOptions": {
    "ecmaVersion": 11
  },
  "env": {
    "browser": true,
    "node": true,
    "jest": true
  },
  "extends": ["airbnb-base", "prettier"],
  "rules": {
    "no-console": "warn",
    "no-plusplus": "off",
    "no-shadow": "off",
    "vars-on-top": "off",
    "no-underscore-dangle": "off", // var _foo;
    "func-names": "off", // setTimeout(function () {}, 0);
    "prefer-arrow-callback": "error", // Require using arrow functions for callbacks
    "prefer-template": "off",
    "no-nested-ternary": "off",
    "max-classes-per-file": "off",
    "wrap-iife": ["error", "inside"],
    "arrow-parens": ["error", "as-needed"], // a => {}
    "no-restricted-syntax": [0, "ForOfStatement"], // disallow specified syntax(ex. WithStatement)
    "no-param-reassign": ["error", { "props": false }],
    "require-await": "error",
    "import/no-extraneous-dependencies": ["error", { "devDependencies": true }]
  }
}

2.  Test

Jest로 테스트를 하기 위해서는 jest.config.json이라는 설정 파일이 필요하다. Jest가 이 설정 파일을 참고해서 실행되기 때문이다.

 

그리고 테스트에 필요한 모듈(.js 파일)에 .test.js확장자를 붙여 Jest의 테스트 대상이 되도록 해준다.

add.js

const add = (x, y) => x + y;

module.exports = add;

add.test.js

const add = require('./add');

// test들을 여러개 모아놓음 즉, 테스트 케이스들(test() 함수들)이 여러개 있을 수 있음
describe('function add test', () => {
  test('add(1, 2) -> 3', () => {
    expect(add(1, 2)).toBe(3); // toBe()는 matcher로써, add(1, 2)의 결과가 3이기를 기대한다는 뜻이다.
  });

  test('add(3, 6) -> 9', () => {
    expect(add(3, 6)).toBe(9);
  });
});

이 정도로 작성을 한 뒤 npm test를 입력해보면 결과가 출력된다. 참고로 toBe()는 "==="으로 동작한다 따라서 toEqual()이라는 matcher로 변경해서 사용해야 한다(https://jestjs.io/docs/using-matchers).

 

이렇게 라이브러리를 사용할 때에는 문서를 꼼꼼히 참고하는 것이 답이다!

Test 결과

 

describe(), test(), expect() 등 Jest문법을 잘 기억하자! 기억이 나지 않을 때는 공식 문서(https://jestjs.io/docs/)를 잘 활용하자!!