3. 테스트 자동화

Github Actions와 RTL, Jest로 만든 테스트코드를 이용해서 테스트 자동화를 해봤다.

테스트 코드

각 컴포넌트, 기능(features 디렉토리) 별로 테스트 코드를 작성했다. RTL의 user-event를 활용해서 사용자 행동기반 테스트코드를 만들었다.

/// Functionbar.test.tsx
describe('<Functionbar />', () => {
  test('선택셀 좌표 input 렌더링한다.', () => {
    render(<Functionbar />)
    const coordInput = screen.getByTestId('coordInput')
    expect(coordInput).toBeInTheDocument()
  })

  test('선택셀 좌표 input default값인 "A1"이 담겨있다', () => {
    render(<Functionbar />)
    const coordInput = screen.getByTestId('coordInput')
    expect(coordInput).toHaveValue('A1')
  })

  test('선택셀 값 input 렌더링한다', () => {
    render(<Functionbar />)
    const valueInput = screen.getByTestId('valueInput')
    expect(valueInput).toBeInTheDocument()
  })

  test('선택셀 값 input 변경 정상 작동', async () => {
    render(<Functionbar />)
    const valueInput = screen.getByTestId('valueInput')
    userEvent.clear(valueInput)
    await userEvent.type(valueInput, '변경해버리기~')
    expect(valueInput).toHaveValue('변경해버리기~')
  })
})

명령어 추가

package.json의 scripts에 test, lint, tsc명령어를 추가해줬다. 기존에 설정해둔 설정파일을 활용하도록 했다.

"scripts": {
    "dev": "cross-env NODE_ENV=development webpack server --config ./config/webpack/webpack.config.dev.js --open",
    "build": "cross-env NODE_ENV=production webpack --config ./config/webpack/webpack.config.prod.js",
    "prepare": "husky install",
    "lint-staged": "lint-staged",
    "lint": "eslint './src/**/*.{ts,tsx,js,jsx}'",
    "test": "jest --config ./config/jest/jest.config.js",
    "tsc": "tsc"
  },

Action 만들기

Github action을 만들었다. 설정 파일은 yml을 활용한다. 카카오웹툰의 블로그 글을 가져와서 내 환경에 맞게 변경했다.

https://fe-developers.kakaoent.com/2022/220106-github-actions/

해당 action은 매 push마다 작동하고, lint, test, tsc, build를 실행하고 그 결과를 기록한다.

name: 'test-every-push'

on: push

jobs:
  test:
    name: Test lint, tsc, build

    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v2
      - name: Use Node.js
        uses: actions/setup-node@v2
        with:
          node-version: ${{ secrets.NODE_VERSION }}

      # yarn 캐싱
      - name: Cache .yarn
        uses: actions/cache@v2
        id: cache
        with:
          path: .yarn
          key: yarn-packages-${{ hashFiles('**/yarn.lock') }}

      - name: Install Dependencies
        if: steps.cache.outputs.cache-hit != 'true'
        run: yarn install

      - run: yarn lint
        if: ${{ always() }}
      - run: yarn test
        if: ${{ always() }}
      - run: yarn tsc
        if: ${{ always() }}
      - run: yarn build
        if: ${{ always() }}

결과 확인하기

github 레포지토리의 Actions 탭에서 해당 action 결과를 확인할 수 있다.

정리

github action을 활용해 매 push마다 테스트를 자동으로 하게 만들었다.

응용해서 여기다 배포, 슬랙에 배포, 테스트시 기록 등의 job, action등을 추가해서 배포 자동화까지 할 수 있다.