프론트엔드 테스트 표준 및 스타일 가이드라인

프론트엔드 테스트 표준 및 스타일 가이드라인 관련 내용을 설명합니다.

GitLab에서 프론트엔드 코드를 개발할 때 만나는 테스트 스위트는 두 종류입니다. JavaScript 단위 테스트와 통합 테스트 에는 Jest를 사용하고, e2e(end-to-end) 통합 테스트에는 Capybara 기능 테스트를 사용합니다. 모든 신규 기능에는 단위 테스트와 기능 테스트를 작성해야 합니다. 대부분의 경우 기능 테스트에는 RSpec 을 사용해야 합니다. 기능 테스트를 시작하는 방법은 기능 테스트 시작하기 를 참고합니다. 버그 수정에는 같은 버그가 다시 발생하지 않도록 회귀 테스트를 작성해야 합니다. GitLab의 일반적인 테스트 관행에 대한 자세한 내용은 테스트 표준 및 스타일 가이드라인 페이지를 참고합니다. Vue.js 테스트 # Vue 컴포넌트 테스트 가이드를 찾고 있다면 이 섹션 으로 바로 이동할 수 있습니다. Vue 3 테스트에 대한 정보는 이 페이지 에 있습니다. Jest # 프론트엔드 단위 테스트와 통합 테스트를 작성할 때 Jest를 사용합니다. Jest 테스트는 /spec/frontend 에 있으며, EE에서는 /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 테스트 환경은 프로덕션 환경과 최대한 일치해야 하므로,