React App 테스트 자동화 with GitLab

Software Engineer

2023년 2월 23일 · 약 10분

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",
}

테스트 스크립트를 실행하여 어플리케이션의 테스트를 수행합니다.
```
npm run test
```
"Watch Usage(사용 상황 감시)" 메시지가 표시되면a 를 누르면 모든 테스트를 실행할 수 있습니다. 기존 테스트에 합격하고 변경을 계속 감시하는 것을 알 수 있습니다.
로컬 개발에서는 테스트를 실행하기 위한 변경 사항을 관찰하는 것이 좋습니다. 그러나 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-test job을 정의합니다.

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별로 상태를 확인할 수 있습니다.