Vue 3 테스팅

Vue 3 모드에서 단위 테스트 및 시스템 테스트를 실행하는 방법과 Vue 3 전환 시 발생하는 주요 주의사항 및 격리 목록 관리 방법을 설명합니다.

Vue 3으로 전환하는 과정에서 테스트가 Vue 3 모드에서 통과되는 것이 중요합니다. 올바른 Vue 3 테스팅을 강제하기 위해 파이프라인에 점진적으로 더 엄격한 검사를 추가하고 있습니다. 현재 다음 경우에 파이프라인이 실패합니다: Vue 3 모드에서 실패하는 새 테스트 파일이 추가된 경우. 이전에는 통과하던 기존 테스트 파일이 Vue 3에서 실패하는 경우. 격리 목록 에 있는 알려진 실패 테스트 중 하나가 이제 통과하는데 격리 목록에서 제거되지 않은 경우. Vue 3로 로컬에서 단위 테스트 실행 # Vue 3을 사용하여 단위 테스트를 실행하려면, jest를 실행할 때 VUE_VERSION 환경 변수를 3 으로 설정하세요. VUE_VERSION=3 yarn jest #[file-path] 파이프라인도 단위 테스트 스위트를 실행합니다. Vue 3로 로컬에서 시스템 테스트(spec/features) 실행 # Vue 3을 사용하여 시스템 테스트를 실행하려면 GDK가 Vue 3가 활성화된 상태로 실행 중이어야 합니다 . 다음 명령어로 활성화할 수 있습니다: gdk config set vite.vue_version 3 # 또는 vue 2로 돌아가려면 2 gdk reconfigure gdk restart 평소처럼 rspec 으로 테스트를 실행하세요. bundle exec rspec spec/features/abuse_report_spec.rb 브라우저에서 로컬 인스턴스를 방문하면 Vue 3( @vue/compat )로도 실행됩니다. 이를 통해 Vue 3에서 기능을 수동으로 테스트할 수 있습니다. 머지 리퀘스트에서 Vue 3로 시스템 테스트 스위트 실행 # 머지 리퀘스트 변경 사항이 Vue 3와 호환되는지 확인하려면, ~pipeline:run-rspec-vue3 라벨을 추가하여 파이프라인에서 시스템 테스트 스위트를 실행하세요. rspec system pg17 vue3 및 rspec-ee system pg17 vue3 라는 이름의 RSpec job이 추가되어 일반적인 rspec system job과 병렬로 실행되지만, Vue 3 빌드를 사용합니다! 단위 테스팅 주의사항 # 컴포저블 모킹 시 Ref 관리 # Vue 3 컴포저블을 테스트할 때 흔한 패턴은 해당 파일이 반환하는 ref 또는 computed 값을 모킹하는 것입니다. 다음 데모 컴포저블을 살펴보세요: export const useCounter = () => { const counter = ref(1) const increase = () => { counter.value += 1 } return { counter, increase } } 이 컴포저블을 현재 사용하고 카운터를 노출하는 컴포넌트가 있다면, 기능을 커버하는 테스트를 작성하고 싶을 것입니다. 이 간단한 예시처럼 일부 경우에는 컴포저블을 전혀 모킹하지 않아도 되지만, Tanstack Query 래퍼나 Apollo 래퍼와 같이 더 복잡한 기능의 경우에는 jest.mock 을 활용하는 것이 필요할 수 있습니다. 이런 경우 테스트 파일은 컴포