React는 사용자 인터페이스를 구축하기 위해 널리 사용되는 JavaScript 라이브러리입니다. 이 튜토리얼에서는 새로운 리액트 어플리케이션을 만들고 GitLab에서 CI 프로세스의 일부로 유닛 테스트를 실행하고 테스트 결과와 코드를 파이프라인에 출력하는 방법을 배울 수 있습니다.
환경 설정
이 튜토리얼에서는 다음과 같은 준비사항이 있습니다.
- 14.0.0 버전 이상의 Node.js 설치
- 5.6 버전 이상의 npm 설치
- Git 설치
- GitLab계정 보유
본 튜토리얼에서는 아래와 같은 환경에서 진행했습니다. 튜토리얼 진행 중 에러와 마주한다면 같은 환경에서 진행해보세요.
- node version: 16.15.1
- npm version: 8.19.2
튜토리얼
1. GitLab에서 새 프로젝트 생성하기.
GitLab에 접속하여 로그인을 하고 상단의 Navbar에 +버튼을 누르고 “New project”를 클릭하여 새 프로젝트 생성을 진행합니다. "Create new project" 화면이 나타나면 "Create blank project"를 선택합니다. 프로젝트 이름과 세부사항을 프로젝트 정보에 입력하십시오. 프로젝트를 생성하면 빈 리포지토리가 있는 프로젝트로 이동합니다.
2. 로컬에 저장소를 복제하기.
다음으로 저장소를 로컬에 복제합니다. "Clone" 버튼에서 SSH 또는 HTTPS URL을 복사하고 작업 디렉토리의 터미널에서 다음 명령을 실행합니다.
git clone <복사한 URL>
3. React 앱 만들기.
- 터미널에서 복제된 프로젝트 디렉토리로 이동합니다.
cd <프로젝트 폴더명>
- Create React App을 사용하여 새 React 응용 프로그램을 만듭니다.
npx create-react-app .
-
설치가 완료되면 어플리케이션이 잘 실행되는 지 확인합니다.
npm run start명령어 입력 후 브라우저 창에서 볼 수 있습니다.
https://localhost:3000.
Ctrl+c를 눌러서 어플리케이션을 중지합니다. -
다음 명령을 실행하여 새 어플리케이션을 GitLab에 푸시합니다.
git add -A
git commit -m "Initial creation of React application"
git push
4. 어플리케이션 테스트
- 기본적으로 Create Respect App은 jest를 테스트 도구로 사용하여 하나의 유닛 테스트를 실행합니다.
App.test.js파일을 보면 테스트 코드를 아래와 같이 확인할 수 있습니다.import { render, screen } from '@testing-library/react';
import App from './App';
test('renders learn react link', () => {
render(<App />);
const linkElement = screen.getByText(/learn react/i);
expect(linkElement).toBeInTheDocument();
}); package.json파일에서는 몇개의 스크립트가 구성되어 있는 것을 알 수 있습니다."scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
}- 테스트 스크립트를 실행하여 어플리케이션의 테스트를 수행합니다.
"Watch Usage(사용 상황 감시)" 메시지가 표시되면
npm run testa를 누르면 모든 테스트를 실행할 수 있습니다. 기존 테스트에 합격하고 변경을 계속 감시하는 것을 알 수 있습니다.로컬 개발에서는 테스트를 실행하기 위한 변경 사항을 관찰하는 것이 좋습니다. 그러나 CI 파이프라인의 경우 테스트를 한 번 실행하고 파이프라인 내부에서 결과를 확인할 수 있도록 리포트를 작성하고 코드 커버리지도 결정합니다.
Ctrl+c를 눌러 jest 테스트 워처를 종료합니다.
5. 유닛 테스트 리포트와 커버리지 추가
유닛 테스트 리포트를 보려면 GitLab에서 JUnit 리포트 형식의 XML 파일을 업로드해야 합니다. jest-junit 을 사용하여 junit.xml파일을 생성합니다.
- 먼저
jest-junit패키지를 설치합니다.npm install --save-dev jest-junit - 그리고
pakage.json의 스크립트에 아래 스크립트를 추가합니다."scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"test:ci": "npm run test -- --testResultsProcessor=\"jest-junit\" --watchAll=false --ci --coverage"
},--testResultsProcessor=\"jest-junit\: 유닛 테스트 리포트를 만듭니다.--watchAll=false: 워치 모드를 비활성화하여 변경 시 테스트가 재실행되지 않도록 합니다.--ci: CI 환경에서 실행되는 동작을 jest에게 알립니다.--coverage는 테스트 커버리지 정보를 수집하여 출력으로 보고할 필요가 있음을 jest에게 알립니다.- 이러한 옵션의 상세한 것에 대하여는, joke CLI options 메뉴얼을 참조해 주세요.
test:ci스크립트를 실행하면 테스트를 실행합니다.npm run test:ci- 그러면
junit.xml파일이 만들어지고, 커버리지 통계정보가 CLI에 출력됩니다.
6. CI 파이프라인 생성 및 유닛 테스트 추가
- 어플리케이션의 루트에
.gitlab-ci.yml파일을 만듭니다.
.gitlab-ci.yml파일에 다음 코드를 추가하여 파이프라인에 테스트 단계를 정의합니다.stages:
- test- 다음으로 아래 코드를 추가하여 테스트 단계에서 유닛 테스트 실행을 담당할
unit-testjob을 정의합니다.unit-test:
image: node:latest
stage: test
before_script:
- npm install
script:
- npm run test:ci
coverage: /All files[^|]*\|[^|]*\s+([\d\.]+)/
artifacts:
paths:
- coverage/
when: always
reports:
junit:
- junit.xml - 완성된
.gitlab-ci.yml파일의 전체 코드는 아래와 같습니다.stages:
- test
unit-test:
image: node:latest
stage: test
before_script:
- npm install
script:
- npm run test:ci
coverage: /All files[^|]*\|[^|]*\s+([\d\.]+)/
artifacts:
paths:
- coverage/
when: always
reports:
junit:
- junit.xml
7. CI 파이프라인 실행하기.
-
이제 이러한 변경사항을 GitLab에 푸쉬하면 파이프라인이 실행됩니다. 그 전에
.gitignore파일에junit.xml를 추가하여 git이 추적하지 못하게 합니다. 그리고 아래 명령어를 실행하여 GitLab에 변경 사항을 추가합니다.git add -A
git commit -m "Adds .gitlab-ci.yml with unit testing"
git push -
위 명령어가 완료되면 GitLab의 프로젝트에 코드가 푸시되고 파이프라인이 자동으로 실행됩니다. 왼쪽 패널에서 CI/CD의 하위 메뉴인 Pipelines를 클릭하면 실행 중인 파이프라인을 확인할 수 있습니다.
-
파이프라인이 완료되면 Status 버튼이나 파이프라인 ID(이 경우 #786385504)를 클릭합니다.
-
파이프라인 내에서 [Jobs]탭을 클릭하면 유닛 테스트 작업의 커버리지가 8.33%임을 알 수 있습니다.
-
[Tests]탭을 클릭하면 유닛 테스트 작업의 테스트 결과를 볼 수 있습니다.
-
해당 job을 클릭하면 상세페이지로 이동하여 테스트의 Suite별로 상태를 확인할 수 있습니다.
축하합니다! 방금 GitLab 내부의 CI 파이프라인에 React 응용 프로그램에 대한 자동 테스트를 추가하고 그 결과를 출력하여 상세히 확인해보는 작업까지 완료했습니다.
본 포스트는 영문 포스트를 우리말로 번역해 내용을 추가한 글입니다.