Engineering_S/W & H/W

  // jest.config.ts import type { Config } from '@jest/types' const config : Config . InitialOptions = { roots : [ '<rootDir>/src' ], transform : { '^.+ \\ .tsx?$' : 'ts-jest' }, testRegex : '(/__test__/.*|( \\ .|/)(test|spec)) \\ .[jt]sx?$' , moduleFileExtensions : [ 'ts' , 'tsx' , 'js' , 'jsx' , 'json' , 'node' ], verbose : true , collectCoverage : true , // 커버리지 사용 collectCoverageFrom : [ '<rootDir>/src/app/**/*.ts' ] // rootDir(루트 경로)에서 src/app폴더안 모든(**)폴더, 파일 및 모든 TypeScript 파일*.ts } export default config ; 커버리지를 사용한다고 하면 위 사진과 같이 테스트 결과가 다르게 나오는 것을 알수 있습니다.  HTML문서로 해당 테스트의 커버리지를 확인을 할수 있습니다.

  // src/app/Main.ts import { parse , UrlWithParsedQuery } from "url" ; export class Fun { public static parseUrl ( url : string ) : UrlWithParsedQuery { if (! url || url . length <= 0 ) throw Error ( 'url is empty' ) // url이 비어있을시 에러발생 return parse ( url , true ); } public static toUpperC ( arg : string ){ return arg . toUpperCase (); } } // src/test/Main.test.ts import { Fun } from '../app/Main' describe ( 'Main test suite' , () => { // 해당 describe테스트에서 아래만 제외한다. test ( 'first test' , () => { console . log ( 'test work!!!' ) const str = Fun . toUpperC ( 'str' ); expect ( str ). toBe ( 'STR' ); // Fun.toUpper의 결과가 문자열 STR 이어야 한다 }); test ( 'parse URL' , () => { const url : string = 'http://localhost:3000/signup' ; const port : string = url . split ( 'localhost:...

이제 연산작용을 적용해서 실제 JEST에서 테스트를 진행해 보겠습니다. 이전글 : TypeScript_JEST TypeScript로 Node TestCast만들기 : npm 프로젝트 생성 및 샘플 테스팅 -1 // src/test/Main.test.ts import { Fun } from '../app/Main' describe ( 'Main test suite' , () => { test ( 'first test' , () => { console . log ( 'test work!!!' ) const str = Fun . toUpperC ( 'str' ); expect ( str ). toBe ( 'STR' ); // Fun.toUpper의 결과가 문자열 STR 이어야 한다 }); }) 코드1) "STR"을 기대했지만 실제로 ""을 받았습니다. 실제 함수의 용도를 보면 들어간 문자열을 대문자로 바꾸는 기능이라고 할수 있는데 이 테스트에서 failed가 나왔습니다. 그럼 이제 실제 함수를 수정하도록 하겠습니다. // src/app/Main.ts export class Fun { public static toUpperC ( arg : string ){ return arg . toUpperCase (); } } 코드2) 하지만 실제로는 코드1처럼 간단하게 작성해서 테스트 하지 않습니다.  // src/app/Main.ts import { parse , UrlWithParsedQuery } from "url" ; export class Fun { public static parseUrl ( url : string ) : UrlWithParsedQuery { ...

 JEST는 FaceBook에서 개발한 JavaScript 테스팅 툴입니다. 이는 TypeScript에도 적용이 가능하며 이번 시리즈로 설명하도록 하겠습니다. JEST공식문서 : https://jestjs.io/docs/getting-started 프로젝트를 만들겠습니다. 1. npm 프로젝트 생성하기 - 해당폴더에 npm 프로젝트를 자동 생성합니다. package.json파일 생성 $ npm init --y copy 이제 테스팅이 필요한 devDependencies를 설치하겠습니다. 타입스크립트를 작성하기 위해서 필요합니다. - 개발용으로만 사용할 npm 모듈을 설치합니다 : typescript,ts-node,@types/node $ npm install -D typescript ts-node @types/node copy 이제 실제 테스트에 필요한 JEST 모듈을 설치하겠습니다. - 개발용으로만 사용할 npm 모듈을 설치합니다 : jest, ts-jest, @types/jest $ npm install -D jest ts-jest @types/jest copy { "name" : "testtutorial" , "version" : "1.0.0" , "description" : "" , "main" : "index.js" , "scripts" : { "test" : "echo \" Error: no test specified \" && exit 1" }, "keywords" : [], "author" : "" , "license" : "ISC" , "de...

 안녕하세요. 이번에는 JEST로 테스트 케이스를 만들때 일일이 저장하고 cli로 테스트를 돌려 확인하는 방법을 지금까지 하였습니다. 하지만 nodemon처럼 세이브 할때마다 테스트 케이스의 결과를 확인하는 방법이 있습니다. JEST의 테스트를 watch mode로 감시하기 cli : npm test -- --watchAll copy 위의 사진처럼 터미널에 'npm test'를 쳐서 수동으로 테스트 상황을 확인해야 합니다.  하지만 'npm start -- --watch' cli를 사용하면 세이브를 진행할때마다 해당 테스트 케이스가 다시 실행됩니다. 상황에 따라 하나의 테스트 케이스만 적용하고 싶을수 있습니다. 위 터미널에서 테스트 케이스가 2개가 있다. 이때 PASS한 테스트 케이스를 놔두고 FAIL만 watch모드로 감시하는 방법이 있다. JEST의 특정 테스트를 watch mode로 감시하기 cli : npm test -- --watch -- [테스트파일 제목] copy 위 터미널에서 'npm test -- --watch -- functions.test.js'을 입력하고 나온 결과이다. 이제 'functions.test.js'을 저장할때 해당 테스트 케이스가 실행되어 터미널에 결과가 출력이 된다.

 안녕하세요. 알렉스 입니다. 이번에는 테스트 코드를 작성하면서 유용한 정보를 포트스 하도록 하겠습니다.  JEST의 테스트 범위(coverage)를 확인하기 cli : npm test -- --coverage copy JS코드를 test.js코드로 테스트 할때 실제 어느정도 범위를 커버하고 있는지 나타내 줍니다. 위 사진에서 보면 현재 100% 범위로 테스트가 된것이 아니라는 것을 알수 있습니다. coverage를 실행하게 되면 프로젝트 폴더 안에 'coverage'라는 폴더가 생성이 됩니다. 이후 'lcov-report'폴더에 들어가서 'index.html'에 들어가면 JEST로 테스트한 범위에 대해서 자세하게 나와있습니다. JEST의 커버리지 상 JEST가 검사하지 못한부분(붉은색) 위 사진처럼 붉은색이 나온 부분은 JEST가 아직 검사를 하지 못한 부분이다. 테스트의 완성도를 높이기 위해서는 위와 같이 붉은색 부분을 순차적으로 제거해야 한다.  해당 붉은 부분의 테스트를 작성하고 coverage를 하면 위 사진과 같이 사라집니다. 

 안녕하세요. 알렉스 입니다. 이번에는 JavaScript의 코드를 구동하는데 수동으로 테스트 하는 것을 자동으로 테스트 할수 있도록 알려드리겠습니다. 여기서 사용하는 프레임워크는 Facebook사에서 개발한 Jest입니다. npm 환경에서 Jest를 'package.json'에 추가를 해야 합니다.  npm환경에서 jest를 추가하기 cli : npm install --save-dev jest copy 이제 2개의 폴더를 만듭니다. 각각 code, test폴더를 만들어서 code에는 실행할 javascript코드를, test는 code에 있는 javascript코드를 테스트할 코드를 저장합니다.   먼저 code안에 'print.js'파일을 생성하고 아래와 같이 코드를 작성합니다. // 받은 인자를 간단하게 return하는 값 function print ( str ) { return str ; } module . exports = print ; // print를 외부로 나가게 한다.  이제 해당 'print.js'파일을 검사할 'print.test.js'파일을 test폴더에 생성하고 아래와 같이 코드를 작성해 줍니다. const print = require ( '../code/print' ); // 테스트 코드를 받아온다 // Jest을 이용한 테스트 케이스 생성 test ( 'Hello World Test' , () => { // Hello World를 문자열 변수 str에 저장한다. const str = "Hello World!" ; // expect와 toBe가 동일한지 검사한다. expect ( print ( str )). toBe ( str ); }); 이제 test cli를 실행하기 위해 'package.json'에서 아래와 같은 'script...