Github Actions를 활용한 Jest, React Testing Library 테스트 자동화

일반적으로 소프트웨어 테스트란 백엔드에서 그 중요성이 강조되곤 하지만, 프론트엔드에서도 그에 못지 않게 중요한 부분을 차지하고 있습니다.

수많은 툴 중에서 jest 기반의 두 라이브러리를 자동으로 테스트 하는 방법에 대해 작성해보겠습니다.

Jest

Jest는 JavaScript의 테스트를 위한 대표적인 라이브러리입니다.
기본 설정이 간편하고, 빠르게 테스트를 실행할 때 굉장히 유용합니다.
함수를 mocking하여 의존성이 강한 함수를 제거하여 원하는 테스트를 쉽게 구성할 수 있다는 특징이 있습니다.

React Testing Library

React Testing Library는 리액트 애플리케이션의 UI를 테스트하기 위한 라이브러리입니다.
React 컴포넌트를 호출하여, 사용자의 의도대로 조작할 수 있는 행위를 정의할 수 있습니다.
사용자 입장에서 상호작용 할 수 있는 부분을 스크립트로 작성하여 컴포넌트가 어떻게 변화하는지를 테스트 할 수 있게 됩니다.
가령, 어떤 사용자가 어떤 폼에 어떤 값을 입력했을 때의 예상되는 결과를 작성해두면 이후에 코드 작업 중 버그가 발생한다면 해당 위치에서 테스트가 실패할 것입니다.

위 테스팅 라이브러리들을 작성해서 테스트를 돌려보면 매번 실행을 시켜줘야 한다는 것이 굉장히 귀찮습니다.

따라서 테스트를 PR이 열릴 때 마다 자동으로 진행하기 위해 테스트 자동화를 구축해봤습니다.

** 이 글에서는 테스트 코드 작성 방법에 대해서 다루지 않습니다. **

** yarn test 를 매번 치는 것이 귀찮은 사람들을 위해 작성합니다. **

 

Jest와 React Testing Library 테스트 자동화

name: frontend-test

on:
  pull_request:
    branches:
      - main
      - develop
    paths:
      - '*'

permissions:
  contents: read

jobs:
  test:
    name: test-when-pull-request
    runs-on: ubuntu-latest
    environment: test
    defaults:
      run:
        working-directory: .
    steps:
      - name: Checkout PR
        uses: actions/checkout@v2
      - name: Install dependencies
        run: npm install
      - name: Test
        run: npm run test

이벤트 트리거 설정

pull_request 이벤트가 발생하였을 때, 해당 이벤트가 main 브랜치와 develop 브랜치에서만 동작합니다.

변경 사항 경로 제한

테스트를 실행할 때는 루트 디렉토리 내의 파일들을 고려하도록 했습니다. 특정 폴더만을 검사하기를 원한다면 수정할 수 있습니다.

권한 설정

permissions은 읽기 권한만 설정되어 있어 코드나 파일을 변경을 방지합니다.

작업(Job) 설정

test라는 이름의 작업을 정의하였고, 이 작업에서는 Ubuntu 환경에서 테스트를 실행합니다. test라는 이름의 환경 변수를 사용합니다. 테스트는 (카페인 팀 레포지토리의) frontend 디렉토리에서 작업하도록 하였습니다.

스텝(Step) 설정

코드를 체크아웃하고, 의존성을 설치하며, 테스트를 실행하는 세 가지 단계로 구성되어 있습니다.

이러한 설정을 통해 PR에 코드가 올라올 때 자동으로 프론트엔드 테스트가 실행됩니다.

이러한 테스트 자동화 전략은 프론트엔드 애플리케이션을 안정적이게 개발하고 유지할 수 있도록 도와줍니다.

 

위 코드를 .github/workflows 폴더에 foo.yml 파일을 추가해준 다음, 붙여넣기 해주면 PR을 열 때마다 테스트가 동작 할 것입니다!