단위테스트 도입을 위한 JEST 설치 및 기본 사용법

SaraRyu·2023년 2월 26일
TDDbddjest단위테스트프론트엔드
0

글또 8기

목록 보기
2/3
post-thumbnail

TDD가 뭐야?

처음 TDD라는 이야기를 들었을때 아예 감조차 오지 않았다..!

하지만, 회사에서 단위테스트 적용을 위해 JEST에 기본 개념과 사용예시 레퍼런스를 찾아보라 한 것이 좋은 계기가 되어 어렴풋이 알게 된 내용을 전한다.

  1. 단위테스트의 이점.
    1)"어떻게" 작동하는지 생각하는데 도움을 준다.
    2)함수와 메소드들이 여러개의 역할이 아닌 하나의 역할만을 수행할 수 있도록 돕는다.
    3)문제를 빠르게 발견할 수 있고 통합을 간단하게 하고 설계를 개선할 수 있다.

  2. TDD

  • 테스트 케이스를 하나 추가한다.
  • 모든 테스트를 실행하고 새로 추가한 것이 실패하는지 확인한다.
  • 테스트를 통과하기 위한 코드를 작성한다.
  • 모든 테스트를 실행하고 전부 성공하는지 확인한다.
  • 리팩토링을 통해 중복을 제거한다.
  1. BDD
    TDD와 교집합이 많지만, BDD는 엔드 유저의 행동으로인해(요구사항) 일어나는 시나리오 코드를 작성하는 방식으로 TDD에 비해 요구사항에 중점을 두기 때문에, 요구사항에 대한 이해를 명확히 할 수 있으며 이는 기획자, 테스터 등 비개발자와의 협업 프로세스를 도와준다.

가장 좋은 방법은 TDD와 BDD 둘을 상호보완하도록 하기!

요구사항이 하나 주어질 때, BDD로 테스트를 작성하고 TDD를 하면서 개발하다가 마지막에 요구사항을 작성한 BDD의 테스트가 통과하는 것을 확인하는 것을 거대한 사이클 하나로 정할 수 있다.

  1. JEST 선정이유
    1) 제로설정 초기 여러 설정할 필요없이 바로 시작할 수 있다

    -Test Runner:  테스트 메소드를 실행하고 결과를 표시하는 역할
-Test Mathcher: 이거맞아? "기대한 값이 실제 반환된 값과 일치하는지 확인하는 작업"
ex) toBeDefined() 변수가 정의되었는지 묻는 메서드
-Test Mock: 테스트 진행이 어려울때 이를 대신해 테스트를 진행 할 수 있도록 만들어주는 객체를 의미한다.

    2) 스냅샷 테스트시 일일이 확인하기 힘든 값들이 있는데, 스냅샷 기능을 통해 이전 값과 변동사항이 있을때 알려준다
    3)모의객체 쉽게 모의 객체를 생성할 수 있다(Mocking)
    4)테스트코드의분리 완전히 분리되어 있기 때문에 테스트 코드를 동시에 실행할 수 있다
    5)간단한 API --coverage 옵션을 통해 코드 커버리지(Code, coverage)를 간단하게 확인할 수 있고, 쉽고 간단하게 테스트 할 수 있는 뛰어난 API를 가지고 있다.

1. JEST란?

2. JEST 설치방법

3. JEST 기본예제

4. JEST 도입시 개발순서 및 작성방안 예시

JEST란?

자바스크립트를 위한 테스팅 프레임워크로서, 테스트케이스 작성을 통해 코드의 올바른 기능수행평가가 가능하다.

하단은 JEST의 핵심특징이다.

  • 설치가 매우 빠르고 간편하다

  • npm 또는 yarn을 통해 직접적으로 설치가 가능하다

  • package.json의 script를 추가한 뒤, npm test를 콘솔창에 입력하면 test.js 파일이 자동 실행된다.

  • CPU로 테스트할 경우 속도가 빠르다(병렬로 프로그램을 처리한다)

  • 가장 느린 테스트를 먼저 실행하기 때문에 코어를 활용한다.

  • Babel 변환을 캐싱해 놓음으로, CPU를 많이 잡아먹는 바벨변환을 줄인다.

  • JEST는 Watch 모드를 사용해, 코드 변경시 자동 테스트가 가능하다.

  • 간단한 API를 통해 필요한 정보들을 빠르게 얻을 수 있다.

  • coverage 옵션을 사용하여 간단하게 테스트 코드 커버리지를 확인할 수 있다.

  • 스냅샷이 가능해 편리하다.

JEST 설치방법(ES6문법 사용가능 설치방법)

명령어 입력(jest를 사용할 폴더로 이동해 입력한다)

/** 순서대로 진행한다
1. npm 환경을 잡아준다
2. 기존에 설치되어 있는 버전은 삭제해준다
3. jest를 설치해준다.

ex) AI 폴더인 경우 이미 package.json이 설치되어 있으므로, 추가만 시켜주면 되고 Syntax 폴더에는 
미설치되어있으므로 설치해주어야 한다.*/

1)
$ npm init -y

2) 
$ npm install -D jest @types/jest @babel/core @babel/preset-env

3)
$ npm install --save-dev jest

1)혹시 이런 에러가 뜬다면, npm audit fix를 터미널에 입력해준다.

$ npm audit fix

2. package.json 파일 설정 확인

1)새로 npm을 설치한 경우

{
  "name": "syntax",
  "version": "1.0.0",
  "scripts": {
    "test": "jest"
  },
  "devDependencies": {
    "@babel/core": "^7.18.5",
    "@babel/preset-env": "^7.18.2",
    "@types/jest": "^28.1.3",
    "jest": "^28.1.1"
  }
}



2)기존의 npm이 설치되어 있던 경우

{
  "name": "ai",
  "version": "1.0.0",
  "main": "babel.config.js",
  "scripts": {
    "test": "jest",
    "build": "webpack --mode production"
  },
  "repository": {
    "type": "git",
    "url": "git+https://sangwonahn@bitbucket.org/ai-en/ai.git"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "homepage": "https://bitbucket.org/ai-en/ai#readme",
  "devDependencies": {
    "@babel/core": "^7.17.10",
    "@babel/preset-env": "^7.17.10",
    "@types/jest": "^28.1.3",
    "babel-loader": "^8.2.5",
    "jest": "^28.1.3",
    "webpack": "^5.72.0",
    "webpack-cli": "^4.9.2"
  },
  "bugs": {
    "url": "https://bitbucket.org/ai-en/ai/issues"
  },
  "description": ""
}

3. babel.config.json 파일생성

{
  "presets": ["@babel/preset-env"] // babel을 실행하기 위해 필요한 플러그인들을 모아놓은 파일실행
}



*babel.config.js 가 이미 해당 폴더에 있었을 시(따로 json파일을 추가 생성할 필요없이, js 파일에 추가하면 된다.)

["@babel/env"],["@babel/preset-modules"]  콤마의 형태로 원하는 모듈을 추가해준다
const presets = [
	[
		"@babel/env",
		{
			targets: {
				ie: "10",
				edge: "17",
				firefox: "60",
				chrome: "67",
				safari: "11.1",
			},
		},
	],

	[
		"@babel/preset-modules"
	],
];

const plugins = [
	'@babel/plugin-transform-template-literals',
	'@babel/plugin-transform-arrow-functions'
]

module.exports = { presets, plugins };

4. jest.config.json 파일생성

/**
1. 개별 테스트 결과를 계층적으로 보여준다
2. 테스트 적용 범위 정보를 출력한다*/

{
  "verbose": true, 
  "collectCoverage": true 
}

5-1. JS파일 생성(아주 기본적인 예시 코드로 원활하게 작동되는지 확인한다)

//add.js 파일 생성(예시)

const add = (a, b) => a + b;

export default add;

5-2. JS를 테스트할 테스트 파일 생성(“JS파일명.test.js”로 파일명을 설정해준다)

//add.test.js 파일 생성(예시)

import add from './add';

test('adds 1 + 2 to equal 3', () => {
  expect(add(1, 2)).toBe(3);
});

6. 콘솔창에 명령어를 입력해 jest테스트를 진행한다.

$ npm test

test 진행이 성공적으로 완료 시 터미널에 출력되는 모습.

File (파일과 폴더 트리)
% Stmts (구문 비율)
% Branch (if문 등의 분기점 비율)
% Func (함수 비율)
% Lines (코드 줄 수 비율)
Uncovered Line #s (커버되지 않은 줄 위치)

profile
SaraRyu
누군가에게 도움이 되는 것을 개발하게 될 Sara
이전 포스트

반가워, 글또 8기!

다음 포스트

자바스크립트를 사용한다면 자주 사용하게 될 내장함수 정리하기

0개의 댓글