jest와 github actions를 이용한 간단한 코드 테스트(React)

React에서 테스트 코드를 짤 때 API 핸들러 함수와 React 컴포넌트를 테스트하는 두 가지 주요 범주로 나눌 수 있다.

 

Next.js를 사용한다면 npm install node-mocks-http로 설치해서 사용하는 node.js 환경에서 http 요청 및 응답 객체를 모킹하는 라이브러리를 사용해도 좋다. 이 라이브러리를 사용하면, 테스트 시 실제 서버를 띄우지 않고도 http 요청과 응답을 시뮬레이션할 수 있다. 

 

Node.js와 Jest는 CommonJS 모듈을 사용하지만 ES 모듈을 사용하는 프로젝트에는 import { jest } from '@jest/globals';를 사용해보자 jest 객체를 전역으로 가져올 수 있고, require을 사용하는 CommonJS 환경에 맞춰진 Jest를 import를 사용하는 ES모듈에 사용할 수 있도록 도와준다.

 

루트폴더에서 __tests__라는 폴더를 만들고, 테스트대상인 파일명.test.js나 ts 로 이름을 짓고 테스트 코드를 작성해보자 대충 이런 느낌이다.

import { createMocks } from 'node-mocks-http';
import handler from './handler';
import { jest } from '@jest/globals';
import axios from 'axios';

jest.mock('axios');
const mockedAxios = axios as jest.Mocked<typeof axios>;

describe('API Handler', () => {
  afterEach(() => {
    jest.clearAllMocks();
  });

  it('should return 200 with success message', async () => {
    const { req, res } = createMocks({
      method: 'GET',
    });

    await handler(req, res);

    expect(res._getStatusCode()).toBe(200);
    expect(res._getJSONData()).toEqual({ message: 'success' });
  });

  // 추가 테스트 케이스 작성
});

 

그리고 git commit이 될 때마다 test가 되어야하기 때문에 루트폴더/.github/workflows/ci.yml 파일을 만들어야한다.

name: Node.js CI

on:
  push:
    branches: [ main ]
  pull_request:
    branches: [ main ]

jobs:
  build:

    runs-on: ubuntu-latest

    strategy:
      matrix:
        node-version: [14.x, 16.x]

    steps:
    - name: Checkout repository
      uses: actions/checkout@v2

    - name: Use Node.js ${{ matrix.node-version }}
      uses: actions/setup-node@v2
      with:
        node-version: ${{ matrix.node-version }}

    - name: Install dependencies
      run: npm install

    - name: Run tests
      run: npm test
      env:
        NEXT_PUBLIC_RIOT_API_KEY: ${{ secrets.NEXT_PUBLIC_RIOT_API_KEY }}

 

이렇게 코드를 짜면 env쪽에서 경고문구가 나올 수 있다. 이는 그냥 무시해도 좋은데 꼭 경고를 보기 싫으면 error lens와 같이 vscode extenstion을 고려할 수 있고 이유를 모르겠다 싶으면 settings.json에

"yaml.customTags": [
  "!<tag:yaml.org,2002:js/undefined> [0,1]",
  "!!binary sequence"
],
"yaml.schemas": {
  "https://json.schemastore.org/github-workflow.json": "file:///YOUR_WORKFLOW_FILE_PATH"
}

 이걸 추가해보자

 

민감정보가 담겨있는 환경변수들을 github에 몰래 올려야 하므로, github 저장소에서 Settings > Secrets and variables > Actions로 이동하여 New respository secret 버튼을 누른 뒤, 위 코드 기준 NEXT_PUBLIC_RIOT_API_KEY를 name에 입력하고 value에 api 키를 입력하는 식으로 등록을 해야한다.

 

그리고 프로젝트 루트에 jest.config.js를 생성하여 아래와 같이 코드를 쳐 Jest 설정을 해보자

module.exports = {
  testEnvironment: 'node',
  transform: {
    '^.+\\.tsx?$': 'ts-jest',
  },
  moduleFileExtensions: ['ts', 'tsx', 'js', 'json'],
  testMatch: ['**/*.test.ts', '**/*.test.tsx'],
};

 

이걸 github에 푸쉬하게 되면 

 

이렇게 초록색 체크를 볼 수있다. 만약 테스트에 실패했다면 위 사진에서 Details를 누르거나 Actions에 들어가서 테스트 실패한 이유도 확인할 수 있다.

취미로 만드는 서비스나 XP같이 빠르고 클라이언트의 요구사항 기능만 잘 됐으면 됐지 뭐 이런 마인드로 개발을 하고자하면 테스트 코드를 안짜는 것을 추천한다. commit 된 후에 배포된 도메인에서 확인하는 시간이 좀 더 길어질 뿐더러 테스트 코드 작성을 하며 시간적 리소스낭비로 개발 생산성도 떨어질 수 있기 때문이다.

 

저사양 노트북일때 github 테스트때메 chrome에서도 렉이 걸릴수도 있다. 그리고 test실패할 때마다 메일이 날아오므로 설정도 필요하다는 단점도 있다.