본문 바로가기
일하는 중에

TypeScript, Unit Test를 위한 환경 만들기

by likebnb 2024. 9. 7.

이전 글, TypeScript, Unit Test를 위한 폴더 구조와 설정에서 

    타입스크립트를 위한 단위테스트 환경구성 중 겪었던 문제에 대해서 공유한 바 있는데, 이 글에선 실제 환경구성을 위한 간단한 튜토리얼을 기록하고자 한다.

TypeScript에서 vitest 모듈을 이용한 단위테스트 구성 package.json

 

전제

  • 타입스크립트를 위한 모듈은 이미 설치돼 있고, 환경설정도 정상 동작함
  • 프로젝트는 node 런타임에서 동작하는 백엔드로 프론트엔드 서비스와 연계할 것임
  • 프론트엔드에서 vite를 사용하고 있어 단위테스트용 프레임워크로 vitest를 사용할 것임 

 

단위테스트를 위한 모듈 설치 

npm install -D vitest

 

단위테스트 실행을 위한 패키지 스크립트 등록(package.json)

  "scripts": {
    "start": "node ./dist/app",
    "build": "tsc -p tsconfig.build.json && tsc-alias",
    "test": "vitest run"
  }

 

단위테스트 실행 시, Vitest가 참조할 환경설정 셋업(vitest.config.ts)

import { defineConfig } from 'vitest/config'

export default defineConfig({
  test: {
    environment: 'node',
    globals: true,
  },
  resolve: {
    alias: [{ find: '@src', replacement: new URL('./src/', import.meta.url).pathname }]
  }
});

 

테스트 프로그램을 위한 폴더 구조

/project
  +->  /src     // 원본 프로그램
  +->  /tests   // 원본 프로그램과 쌍을 이루는 테스트 코드

 

테스트 프로그램 작성(TestClass.test.ts)

import {
  describe, test, assert, expect,
  beforeEach, beforeAll, afterEach, afterAll
} from 'vitest'
import { TestClass } from '@src/modules/TestClass'

let ht: TestClass | null

beforeAll(() => {
  tc = new TestClass()
})
beforeEach(() => {
});
afterEach(() => {
});
afterAll(() => {
  tc = null
});

describe('생성자호출 및 스키마 확인', () => {
  test('constructor()', () => {
    expect(tc instanceof TestClass).toBe(true)
  })

  test('getKeySize()', () => {
    expect(tc?.getKeySize()).toBe(20)
  })
})

describe('엘리먼트 추가, 값 가져오기', () => {
  test('br:0 -> set("likebnb", undefined)', () => {
    expect(tc?.set('likebnb', undefined)).toBe(0)
  })

  test('br:0 -> get("likebnb2")', () => {
    expect(tc?.get('likebnb2')).toBe('NOT FOUND')
  })
})

describe('키 확인 및 삭제', () => {
  test('br:1 -> exit("likebnb")', () => {
    expect(tc?.exist('likebnb')).toBe(1)
  })

  test('br:1 -> unset("likebnb")', () => {
    expect(tc?.unset('likebnb')).toBe(1)
  })
})

 

테스트 실행

npm run test

// 또는 다음과 같이 vitest를 이용
vitest run

 

 

TypeScript, Unit Test를 위한 폴더 구조와 설정

TypeScript, 오호라!     TypeScript를 프로젝트의 주 언어로 사용한지 일 년 쯤 되어 간다. 정확히 말하자면 Node.js를 기반으로 하는 JavaScript를 사용하다가 TypeScript로 전환했다는 것이 맞겠다. 프론트

likebnb.tistory.com