프론트엔드 테스트 표준 및 스타일 가이드라인 # GitLab에서 프론트엔드 코드를 개발할 때 두 가지 유형의 테스트 스위트를 사용합니다. JavaScript 유닛 및 통합 테스트 에는 Jest를 사용하고, e2e(엔드투엔드) 통합 테스트에는 Capybara 기능 테스트를 사용합니다. 모든 새로운 기능에는 유닛 테스트와 기능 테스트가 작성되어야 합니다. 대부분의 경우 기능 테스트에는 RSpec 을 사용해야 합니다. 기능 테스트 시작 방법에 대한 자세한 내용은 기능 테스트 시작하기 를 참고하세요. 회귀 테스트는 버그가 향후 재발하지 않도록 버그 수정 시 작성해야 합니다. GitLab의 일반적인 테스트 관행에 대한 자세한 내용은 테스트 표준 및 스타일 가이드라인 페이지를 참고하세요. Vue.js 테스트 # Vue 컴포넌트 테스트 가이드를 찾고 있다면 바로 이 섹션 으로 이동할 수 있습니다. Vue 3 테스트에 관한 정보는 이 페이지 에 있습니다. Jest # 프론트엔드 유닛 및 통합 테스트 작성에 Jest를 사용합니다. Jest 테스트는 EE의 /spec/frontend 및 /ee/spec/frontend 에서 찾을 수 있습니다. jsdom # Jest는 테스트 실행 시 브라우저 대신 jsdom 을 사용합니다. 알려진 이슈는 다음과 같습니다: 스크롤 지원 없음 요소 크기 또는 위치 없음 일반적으로 레이아웃 엔진 없음 브라우저에서 Jest 테스트 실행 지원 에 대한 이슈도 참고하세요. Jest 테스트 디버깅 # yarn jest-debug 를 실행하면 Jest가 디버그 모드로 실행되어, Jest 문서 에 설명된 대로 디버그/검사할 수 있습니다. 타임아웃 오류 # Jest의 기본 타임아웃은 /jest.config.base.js 에 설정되어 있습니다. 테스트가 해당 시간을 초과하면 실패합니다. 테스트 성능을 개선할 수 없는 경우, jest.setTimeout 을 사용하여 전체 스위트의 타임아웃을 늘릴 수 있습니다. jest.setTimeout(500); describe('Component', () => { it('does something amazing', () => { // ... }); }); 또는 it 의 세 번째 인수를 제공하여 특정 테스트에 대해 설정할 수 있습니다. describe('Component', () => { it('does something amazing', () => { // ... }, 500) }) 각 테스트의 성능은 환경에 따라 달라진다는 점을 기억하세요. 테스트 전용 스타일시트 # RSpec 통합 테스트를 용이하게 하기 위해 두 가지 테스트 전용 스타일시트가 있습니다. 이를 사용하여 테스트 속도를 개선하기 위해 애니메이션을 비활성화하거나, Capybara 클릭 이벤트의 타깃이 되어야 하는 요소를 표시할 수 있습니다: app/assets/stylesheets/disable_animations.scss app/assets/stylesheets/test_environment.scss 테스트 환경은 가능한 한 프로덕션 환경과
