FE테스트(2) - vitest

📌시작하며

이전 포스팅에서 테스트에 앞서 테스트의 배경과 사용되는 라이브러리를 살펴봤다면, 이번에는 실제로 사용되는 라이브러리의 api를 정리해보고자 한다.

✅it

it 함수를 사용해 특정 동작이나 결과에 대한 기대를 정의하고, 이를 검증하는 테스트 코드를 안에 작성하게 된다. it 함수 안에 작성되는 설명은 테스트 목적, 기대 결과를 명확하게 작성하도록 한다.

또한, it 함수는 test 함수의 alias(대체 이름)으로, 동일한 기능을 수행하는데, 나는 it으로 작성하는걸 선호한다.

import { it, expect } from "vitest"

it("2와 3을 더하면 5가 되어야 한다.", () => {
  const result = 2 + 3
  expect(result).toBe(5)
})

✅desribe

describe는 it이나 test로 작성된 여러 개 테스트 케이스를 그룹화해 컴포넌트 안의 여러 테스트를 가독성 있게 정리할 수 있다.

import { describe, it, expect } from "vitest"

describe("계산 기능", () => {
  it("2와 3을 더하면 5가 되어야 한다.", () => {
    const result = 2 + 3
    expect(result).toBe(5)
  })

  it("5에서 2를 빼면 3이 되어야 한다.", () => {
    const result = 5 - 2
    expect(result).toBe(3)
  })
})

✅expect

결과를 최종적으로 검증하는데 사용한다. expect는 단언문으로써, 특정 조건이나 상태가 참인지 확인한다. 위에서 살펴본 예제를 보면 expect를 위에 해당 기능의 값이 5일것이라는 것을 단언하고 이를 기준을 두고 참과 거짓을 판별하게 된다.

import { it, expect } from "vitest"

it("2와 3을 더하면 5가 되어야 한다.", () => {
  const result = 2 + 3
  expect(result).toBe(5)
})

➡️matcher

expect를 이용할 때 matcher를 이용해 어떤 값을 기대하는지 정확히 작성해줄 수 있다. 예를 들어, 위에서 본 예시를 다시 한번 살펴보면,

expect(result).toBe(5)

이렇게 expect 뒤에 toBe가 연결되어있는데 이 뜻은 ‘5’가 될것이다. 라는 의미로 기대한다 ‘무엇이 될지’ 에 ‘무엇이 될지’의 역할을 담당하는 것으로 생각할 수 있다.

matcher에는 다양한 것들이 있는데, 자세한 내용은 공식문서를 참조하면 된다.

💟toBe / toEqual / toStrictEqual

• toBe 는 값이 엄격하게 동일(===)한지 확인한다.
• toEqual 은 객체나 배열 값을 비교한다.
• toStrictEqual 은 undefined 속성까지 포함해 더 엄격히 확인한다.

expect(2 + 2).toBe(4)
expect({ a: 1 }).toEqual({ a: 1 })

💟toBeTruthy / toBeFalsy

• toBeTruthy 는 값이 truthy한지 (즉, true로 평가되는지) 확인한다.
• toBeFalsy 는 값이 falsy(즉, false로 평가되는지) 확인한다.

expect(true).toBeTruthy()
expect(0).toBeFalsy()

💟toBeNull / toBeUndefined / toBeDefined

• toBeNull 은 값이 null인지 확인한다.
• toBeUndefined undefined인지 확인한다.
• toBeDefined 는 값이 정의되어 있는지 확인한다.

expect(null).toBeNull()
expect(undefined).toBeUndefined()

💟toBeGreaterThan / toBeLessThan / toBeGreaterThanOrEqual / toBeLessThanOrEqual

• toBeGreaterThan 은 값이 다른 값보다 큰지 확인한다.
• toBeLessThan 은 값이 다른 값보다 작은지 확인한다.
• toBeGreaterThanOrEqaul 은 값이 다른 값보다 크거나 같은지 확인한다.
• toBeLessThanOrEqaul 은 값이 다른 값보다 작거나 같은지 확인한다.

expect(10).toBeGreaterThan(5)
expect(5).toBeLessThanOrEqual(5)

💟 toContain / toContainEqual

• toContain은 배열이나 문자열에 특정 값이 포함되어 있는지 확인한다.
• toContainEqual은 객체나 배열에 특정 값이 포함되어 있는지 확인한다.

expect([1, 2, 3]).toContain(2)
expect([{ a: 1 }, { b: 2 }]).toContainEqual({ b: 2 })

💟toHaveLength / toHaveProperty

• toHaveLength는 배열, 문자열 등의 길이가 특정 값과 동일한지 확인한다.
• toHaveProperty는 객체가 특정 속성을 갖고 있는지 확인한다.

expect([1, 2, 3]).toHaveLength(3)
expect({ a: 1, b: 2 }).toHaveProperty("b")

💟 toThrowError / toThrowErrorMatchingSnapshot

• toThrowError는 함수가 특정 에러를 던지는지 확인한다.
• toThrowErrorMatchingSnapshot은 에러 메시지가 스냅샷 과 일치하는지 확인한다.

스냅샷: 특정 시점 데이터나 시스템 상태를 저장해 놓는 것

expect(() => {
  throw new Error("error message")
}).toThrowError("error message")

💟 toHaveBeenCalled / toHaveBeenCalledTimes / toHaveBeenCalledWith

• toHaveBeenCalled는 함수가 호출되었는지 확인한다.
• toHaveBeenCalledTimes는 호출 횟수를 확인한다.
• toHaveBeenCalledWith는 호출된 인자(함수나 메서드가 호출될 떄 전달된 값)를 확인한다.

const mockFn = vi.fn()
mockFn("인자")

expect(mockFn).toHaveBeenCalled()
expect(mockFn).toHaveBeenCalledWith("인자")

💟resolves / rejects

• resolves는 프로미스가 resolves(해결) 되었을 때의 값을 테스트한다.
• rejects는 프로미스가 rejects(거부) 되었을 때의 값을 테스트한다.

await expect(Promise.resolve("success")).resolves.toBe("success")
await expect(Promise.reject("error")).rejects.toBe("error")

💟expect.any / expect.anything

• expect.any(Class)는 값이 특정 클래스의 인스턴스인지 확인한다.
• expect.anything()은 null과 undefined를 제외한 모든 값에 대해 성공한다.

expect(123).toEqual(expect.any(Number))
expect("아무거나 전부 성공!").toEqual(expect.anything())

✅vi

vi는 모듈을 모킹(mocking) 하거나, 함수의 호출 여부를 확인하는 데 사용한다.

• 모킹(mocking): 특정 기능이나 객체의 동작을 흉내내거나 대체한다.

말이 좀 이해가 어려운데, A 로직이 무언가(B)를 의존해서 구현된다고 가저해보자. 이때 A 로직 테스트를 위해서는 B가 필요하지만, B를 구현하기 복잡할 때는 모킹을 통해 B를 대체하여 A 로직을 검증할 수 있게 된다.

➡️ 모킹

모킹은 vi.fn()을 사용해 간단히 구현한다. 이를 통해 특정 로직을 대체할 수 있는 가상의 함수를 생성할 수 있다.

vi.fn()

➡️ 스파이

vi.spyOn()을 사용해 특정 객체의 메서드를 감시해 해당 메서드가 호출되었는지, 어떤 인자로 호출되었는지를 확인할 수 있다.

const spy = vi.spyOn(객체, "객체 안의 메소드 이름")

import { describe, it, expect } from "vitest"

const calculator = {
  add: (a: number, b: number) => a + b,
}

describe("계산 기능", () => {
  it("2와 3을 더하면 5가 되어야 한다.", () => {
    // 스파이 생성
    const spy = vi.spyOn(calculator, "add") //calculator 객체와 객체안의 메소드

    // 메서드 호출
    const result = calculator.add(2, 3) //위에서 정의한 add 메소드를 불러옴

    // 결과 확인
    expect(result).toBe(5) // 결과가 5인지 확인

    // 스파이를 사용해 호출 여부 및 인자 확인
    expect(spy).toHaveBeenCalled() // add 메서드가 호출되었는지 확인
    expect(spy.mock.calls[0]).toEqual([2, 3]) // 첫 번째 호출의 인자가 [2, 3]인지 확인
  })
})

➡️ 타이머 모킹

setTimeout이나 setInterval을 사용하는 컴포넌트를 테스트한다고 가정해보자. 적정 시간이 지난 후의 반응을 테스트 하기 위해서 테스트때마다 그 시간을 기다린다면 무척 번거로울 것이다.

따라서, 이러한 경우에는 vi.useFakeTimers()를 사용해 타이머를 모킹하여 setTimeout, setInterval 등을 테스트할 수 있다.

이를 통해, 5초 후에 실행 되어야 하는 테스트가 존재한다고 했을 때, 테스트를 위해 5초를 기다려야 하는 번거로움을 줄일 수 있다.

다만, 가짜 타이머를 실행한 경우 다른 로직에도 영향을 줄 수 있으므로, vi.useRealTimers() 를 이용해 원래 타이머로 복구해야함에 유의한다.

vi.useFakeTimers()

import { vi, expect, it } from "vitest"

function runAfterDelay(callback: () => void, delay: number) {
  setTimeout(callback, delay)
}

it("타이머가 5초 후에 동작해야 함", () => {
  // 타이머를 모킹
  vi.useFakeTimers()

  // 콜백 함수를 스파이로 설정
  const callback = vi.fn()

  // 함수 호출
  runAfterDelay(callback, 5000)

  // 아직 콜백이 실행되지 않았는지 확인
  expect(callback).not.toHaveBeenCalled()

  // 5초로 타이머 빠르게 진행
  vi.advanceTimersByTime(5000)

  // 콜백이 실행되었는지 확인
  expect(callback).toHaveBeenCalled()

  // 타이머 복구 (원래의 타이머로 돌아가기)
  vi.useRealTimers()
})

✅beforeEach & beforeAll

before~이란 이름에서 유추할 수 있듯이 테스트 케이스가 실행되기 전에 특정 작업을 수행하기 위해 사용된다.

예를 들어, 테스트 케이스마다 반복적인 컴포넌트 렌더링이 필요한 경우, before~를 사용하면 한 번에 깔끔하게 작성할 수 있다.

• beforeEach: 각 테스트 실행 전에 특정 작업 수행
• beforeAll: 모든 테스트 케이스 실행 전 단 한 번만 특정 작업 수행 (초기화 작업 등)

import { describe, beforeEach, beforeAll, it, expect } from "vitest"

let counter = 0

describe("beforeEach vs beforeAll 차이점", () => {
  // 테스트가 실행되기 전에 한 번만 실행
  beforeAll(() => {
    counter = 10 // 모든 테스트에 적용할 초기 설정 (최초 1회 실행)
  })

  // 각 테스트 실행 전에 실행
  beforeEach(() => {
    counter += 1 // 테스트마다 개별적으로 실행할 작업 (각 테스트 마다 1회 실행)
  })

  it("첫 번째 테스트", () => {
    expect(counter).toBe(11) // beforeAll의 10과 beforeEach +1 에 의해 11
  })

  it("두 번째 테스트", () => {
    expect(counter).toBe(12) // 첫 번째 테스트 후 beforeEach만 재실행되어 +1 즉 12
  })
})

✅afterEach & afterAll

beforeEach와 beforeAll과 반대로, 테스트 후에 특정 작업을 수행한다.

• afterEach: 각 테스트 실행 후에 특정 작업 수행
• afterAll: 모든 테스트 케이스 실행 후 단 한 번만 특정 작업 수행

import { describe, afterEach, afterAll, it, expect } from "vitest"

let counter = 0

describe("afterEach와 afterAll 차이점", () => {
  // 각 테스트 실행 후에 실행
  afterEach(() => {
    counter -= 1 // 각 테스트가 끝난 후 -1
  })

  // 모든 테스트가 끝난 후에 실행
  afterAll(() => {
    counter -= 2
  })

  it("첫 번째 테스트", () => {
    counter += 1 // 초기값 0 에 + 1 = 1
    expect(counter).toBe(1) // 1이 되어야 함
  })

  //이후 afterEach가 실행 되어 1 - 1 = 0

  it("두 번째 테스트", () => {
    counter += 1 // 0에 + 1 = 1
    expect(counter).toBe(1) // 1이 되어야 함
  })

  //모든 테스트가 종료 되어 afterAll 실행 1 - 2 = -1
  //이 시점에서 counter는 -1
})

🗂️참고 사이트

• https://vitest.dev/api/
• https://vitest.dev/api/expect.html#tobe