테스트 환경 설정

의존성 설치

npm install --save-dev vitest @nuxt/test-utils @vue/test-utils jsdom

vitest.config.js 설정

// vitest.config.js
import { defineConfig } from 'vitest/config'
import { fileURLToPath } from 'url'

export default defineConfig({
  test: {
    environment: 'jsdom',
    globals: true,
  },
  resolve: {
    alias: {
      '~': fileURLToPath(new URL('./', import.meta.url)), // 루트 경로
    },
  },
})

nuxt.config.ts 수정

export default defineNuxtConfig({
  modules: ["@nuxt/test-utils/module"],
});

테스트 실행 명령어 추가 (package.json)

"scripts": {
  "test": "vitest run",
  "test:watch": "vitest watch"
}

테스트 파일 위치

• 위치: ~/tests/utils/filter.test.js
  • Nuxt에서 테스트 파일은 일반적으로 tests/ 디렉토리에 저장.
  • utils/ 하위에 있는 파일을 테스트하므로 tests/utils/로 구조화.

파일 구조 예시

project-root/
  ├── utils/
  │   └── filter.js
  ├── tests/
  │   └── utils/
  │       └── filter.test.js
  ├── nuxt.config.ts
  ├── vitest.config.js
  ├── package.json

테스트 코드 작성 (tests/utils/filter.test.js)

아래는 getValue, matchesQuery, filterItems 함수를 테스트하는 코드입니다. 각 함수의 동작과 엣지 케이스를 검증합니다.

import { describe, it, expect } from "vitest";
import { getValue, matchesQuery, filterItems } from "~/utils/filter";

describe("utils/filter.js", () => {
  // getValue 테스트
  describe("getValue", () => {
    it("단순 속성을 추출한다", () => {
      const item = { title: "Hello World" };
      expect(getValue(item, "title")).toBe("Hello World");
    });

    it("중첩 속성을 추출한다", () => {
      const item = { meta: { tags: ["test"] } };
      expect(getValue(item, "meta.tags")).toEqual(["test"]);
    });

    it("존재하지 않는 경로는 undefined를 반환한다", () => {
      const item = { title: "Hello" };
      expect(getValue(item, "meta.tags")).toBeUndefined();
    });

    it("null 또는 undefined 객체는 undefined를 반환한다", () => {
      expect(getValue(null, "title")).toBeUndefined();
      expect(getValue(undefined, "meta.tags")).toBeUndefined();
    });
  });
});

테스트 실행

1. 파일 저장: ~/tests/utils/filter.test.js에 위 코드를 저장.
2. 실행 명령어:
   • 전체 실행: npx vitest run or npm run test
   • 감시 모드: npx vitest watch or npm run test:watch (파일 변경 시 자동 재실행)
3. 결과 확인: 터미널에 각 테스트 케이스의 성공/실패 여부 출력.