Chamomile Front-End 테스트 가이드
1. 개요
테스트 코드 필요 이유
코드의 안정성
유지보수성
개발자의 협업
2. 테스트 툴 선정
테스트 툴 선정
Vitest
선정 사유
nuxt3에서 vite를 기본으로 사용
vite 환경에서는 별도의 설정 없이 테스트 코드 작성 가능
테스트 수행 속도가 빠름
primevue에서 vitest 사용으로 인해 chmmvue(fork) 내용에서도 vitest 사용중
3. Vitest
Vitest는 Vite 프로젝트에서 영감을 받아 만들어진 테스트 러너로, 빠른 속도와 간단한 설정을 자랑합니다. Jest와 유사한 API를 제공하여 익숙한 방식으로 테스트를 작성할 수 있습니다.
주요 특징
빠른 속도: Vite의 빠른 번들링 속도를 활용하여 테스트 실행 속도가 매우 빠릅니다.
간단한 설정: 복잡한 설정 없이 쉽게 사용할 수 있습니다.
모듈 핫 리플레이스먼트(HMR): 테스트 코드 변경 시 빠르게 반영됩니다.
플러그인 시스템: 다양한 플러그인을 통해 기능을 확장할 수 있습니다.
주요 기능
단위 테스트: 개별 함수나 컴포넌트를 테스트할 수 있습니다.
스냅샷 테스트: 컴포넌트의 렌더링 결과를 스냅샷으로 저장하고 비교할 수 있습니다.
커버리지 보고서: 테스트 커버리지를 시각화하여 코드의 테스트 범위를 확인할 수 있습니다.
모의(Mock) 객체: 외부 의존성을 모의 객체로 대체하여 테스트할 수 있습니다.
4. Vitest 설정
Vitest 설치
npm install --save-dev vitest @vitest/ui관련 라이브러리
필요에 따라 @vue/test-utils, @nuxt/test-utils 등 라이브러리를 설치
Vitest 설정 파일 추가
프로젝트 루트에 vitest.config.ts 파일을 생성하여 테스트에 맞는 환경 구성
ex)
// vitest.config.ts import { defineVitestConfig } from '@nuxt/test-utils/config' export default defineVitestConfig({ test: { environment: 'nuxt', globals: true, environmentOptions: { nuxt: { overrides: { runtimeConfig: { // 여기에 runtimeConfig 설정추가하여 테스트환경에서도 테스트 가능 public: { } } } } } } })
5. 테스트 코드 작성 방식
모듈별 폴더 생성하여 각 폴더에 테스트 파일 작성
테스트 파일 이름은 접미사로 spec 사용
테스트 코드는 it로 작성
ex)
import { mount } from '@vue/test-utils'; import ChmmVInput from './ChmmVInput.vue'; describe('ChmmVInput.vue', () => { let wrapper; beforeEach(() => { wrapper = mount(ChmmVInput, { props: { modelValue: 'test', pattern: 'text', } }); }); it('should exist', () => { expect(wrapper.find('.p-inputtext.p-component').exists()).toBe(true); expect(wrapper.find('.p-error').exists()).toBe(false); }); }