Vitest (1) - Vitest란

홍재희·2024년 4월 30일
testvue
post-thumbnail

1. Unit Test

1-1. Unit Test란?

  • 컴퓨터 프로그래밍에서 소스 코드의 특정 모듈이 의도된 대로 정확히 작동하는지 검증하는 테스트
  • 코드의 각 단위가 예상대로 작동하고 요구 사항을 충족하는지 확인하는 것

1-2. Unit Test의 대표적인 프레임워크

Jest

  • JavaScript 기반 프로젝트에 쉽게 적용 가능하기 때문에 범용성이 좋다.
  • 자체적으로 테스트 결과를 보여주는 모듈이 내장되어 있어 별도로 외부 툴을 설치 않아도 된다.
  • 테스트 병렬 실행이 가능하기에 테스트 시간을 절약할 수 있다.

Mocha

  • TDD와 BDD를 모두 지원하고 있는 테스트 프레임워크
  • 자체적으로 Assertion을 지원하지 않기 때문에 외부 Assertion 모듈을 가져다가 사용할 수 있음(Chai 라는 라이브러리 자주 사용)
  • 단위, 통합, E2E 테스트 등 다양한 테스트를 지원

Vitest

  • Vite를 기반으로 작동하는 테스트 프레임워크
  • 모킹과 스냅샷을 지원
  • 간소화된 설정과 DX가 뛰어나다는 장점

2. Vitest

  • Vite를 통해 프로젝트의 기본 빌드 설정을 그대로 이용할 수 있기 때문에 Vite 프로젝트에서 사용 시, 가장 호환성과 효율성이 뛰어난 테스트 프레임워크라고 할 수 있다.

2-1. Vitest 설치

  • Vitest 설치 방법은 Vue.js 프로젝트 생성 혹은 직접 라이브러리를 설치하는 방법이 있다.

Vue Project 생성 시 Vitest 설치 방법

npm init vue@latest           // Vue3 프로젝트 생성 명령어

  • 해당 항목을 Yes 설정 시 자동으로 Vitest 설치 및 기본 환경 구축이 이루어진다.
  • vitest.config.js 파일과 기본 test 디렉토리가 생성된 것을 확인할 수 있다.

직접 Vitest 라이브러리 설치

npm install -D vitest

  • 해당 방법은 vitest 라이브러리만 설치할 뿐, 기본 환경 구성은 사용자가 직접 생성 및 수정을 진행해야한다.

2-2. Vitest 환경 구축

  • 기존의 Vite Config 파일의 기본 환경 구성을 mergeConfig를 이용하여 사용하는 개념이기에, 테스트 시 환경 구성만 설정하면 된다.

대표적인 Config Options

  1. environment
    • 테스트는 node.js환경에서 실행되기 때문에 브라우저의 DOM API에 접근이 불가하여, 주로 DOM API를 사용할 수 있게 해주는 jsdom이나 happy-dom을 사용한다.
    • jsdom, happy-dom, node 3가지 옵션이 존재하며 기본값은 jsdom이다.

  1. environmentOptions
    • 위에서 설정한 environment에 대한 설정을 할 수 있다.
    • 가상 DOM의 IP address 변경도 가능하다.
  2. setupFiles
    • 테스트 시작 전, 셋업할 파일을 설정할 수 있다.
    • 주로 API Mocking 시 자주 이용하는 옵션이다.
  3. coverage
    • 코드에 대한 테스트 커버리지 수치를 확인할 수 있다.
    • 테스트가 되지 않은 코드 라인을 나타내주기에 유용하게 사용된다.
    • json, html 등 커버리지 결과에 대한 파일 형식을 지정하여 저장할 수 있다.

2-3. Vitest 실행

package.json 파일에서 수정이 가능하며 사용자 임의로 변경이 가능하다.

npm run test:unit

실행 결과

❗ --ui 옵션을 추가하면 테스트 결과를 터미널 뿐만 아니라 웹 브라우저로 확인이 가능하다.

ui 옵션 사용 결과

좌측의 테스트 파일을 클릭하면 테스트 결과, 코드, 콘솔 등을 확인할 수 있다.

3. Vitest 작성 방법

Unit Test 작성 방법에는 일반적으로 AAA패턴, GWT패턴이 있다.
먼저 두 패턴이 무엇인지 확인 후 기본 문법을 확인해보자.

3-1. AAA 패턴 / GWT 패턴

AAA 패턴은 각 테스트를 Arrange, Act, Assert 세 단계로 나누어진다.
GWT 패턴은 Given, When, Then 세 단계로 나누어진다.
두 패턴은 매우 큰 유사성을 보여주며 단계별 작업이 거의 동일하다.

  • Arrange / Given : 테스트 실행에 필요한 작업들을 준비하는 단계
  • Act / When : 테스트 코드를 실행하는 단계
  • Assert / Then : 실행한 테스트 코드가 예상대로 동작했는지 확인하는 단계
import { test, expect } from "vitest";

test('AAA 패턴', () => {
  // Arrange / Given 단계
  let a = 1
  let b = 2

  // Act / When 단계
  let result = a + b
    
  // Assert / Then 단계
  expect(result).toBe(3)
})

두 패턴 모두 테스트 코드의 가독성을 높이고, 테스트의 일관성을 높여준다는 장점이 있다.

3-2. Vitest 기본 문법

예시

describe('describe은 여러 테스트를 그룹화 해서 관리', ()=>{
  let i = 0;
  
  // 매 테스트 마다 실행
  beforeEach(async () => console.log(`매 테스트 이전 - ${i++}`))
  afterEach(async () => console.log(`매 테스트 이후 - ${i++}`))
  
  // 모든 테스트 시작 전 1번, 모든 테스트 완료 후 1번
  beforeAll(async () => console.log(`모든 테스트 이전 - ${i++}`))
  afterAll(async () => console.log(`모든 테스트 이후 - ${i++}`))
 
  test('테스트 내용 명시', ()=>{
    expect('test'.length).toBe(4)
  })
})

describe
describe은 테스트의 그룹이라고 생각하면 된다.
동일한 범주 내의 테스트를 그룹화하여, 보다 명확한 구조를 갖추고 확인이 가능하다.

test
실행할 테스트의 이름과 기댓값을 비교하는 함수를 정의한다.
실질적인 테스트 코드 실행이 이루어지는 부분이다.

expect
테스트 대상과 기댓값을 비교하는 부분으로, 테스트의 결과를 반환하는 함수이다.

beforeEach / afterEach
각 test 함수 시작 전과 완료 후마다 실행되는 함수들을 정의한다.

beforeAll / afterAll
모든 test 함수 시작 전과 완료 후 1번씩만 실행되는 함수들을 정의한다.

4. 마치며

Vitest가 Jest 기반으로 만들어진 테스트 프레임워크이기 때문에 Jest를 사용했던 사람이라면 빠르게 적응할 수 있을 것으로 보여진다.

현재는 Vitest 기본 설치, 기초 사용 방법만을 설명했으나, 앞으로 Vitest와 같이 사용하기 좋은 라이브러리, 빈도 수가 높은 문법 등과 같은 정보도 게시해봐야 겠다.

profile
홍재희
Full-Stack AI Developer
이전 포스트

Vitest Axios-Mock-Adapter

다음 포스트

Vitest (2) - Vitest 기초

0개의 댓글