Next.js 앱에 Cypress + GitHub Actions CI 추가

소개

지난번 , Next.js 앱에 Cypress를 추가했습니다.
이번에는 Next.js 앱에 Cypress 과 GitHub Actions 을 사용한 CI를 통합해 보았습니다.

환경

Next.js

v11.0.0

Cypress

v7.5.0

cypress-io/github-action@v2

Cypress 공식 GitHub Actions

자체적으로 cypress를 실행하는 단계를 구성하는 것보다 쉽게 ​​구성 가능

마이너 버전을 생략하면 자동으로 최신 버전 (7/4 현재 v2.11.5)이 적용됩니다.

소스 코드

절차

1. 전제

※ 여기 에서 작성한 앱을 그대로 사용하고 있습니다.

거친 절차

설치

# Next.jsインストール
yarn create next-app --typescript # or npx create-next-app --ts

cd my-app

# 依存関係を分離するため、直下にe2eフォルダを作成し、そこにCypressをインストールする
mkdir e2e
cd e2e
echo e2e/node_modules >> .gitignore
yarn init -y # or npm init -y
yarn add -D cypress typescript # or npm install -D cypress typescript
npx tsc --init --types cypress --lib dom,es6

실행

# /e2e/cypress, /e2e/cypress.json が作成される
# ブラウザ起動後、Ctrl+Cで停止して良い
npx cypress open

Next.js 앱 검증 테스트 케이스 추가

echo "
context('Next.js test', () => {
  it('should access localhost', () => {
    cy.visit('http://localhost:3000');
    cy.get('h1')
      .should('have.text', 'Welcome to Next.js!')
  });
});
" > e2e/cypress/sample.spec.ts

2. 워크플로 추가

※ 워크플로우에 대한 자세한 내용은 공식 Docs을 참조하십시오.

# .github/workflows/e2e.yml を作成
mkdir -p .github/workflows
touch .github/workflows/e2e.yml

다음과 같이 .github/workflows/e2e.yml 를 수정합니다.

# 任意のワークフロー名
name: End-to-end tests
# トリガーするイベントを設定。この場合はpush
# 参考: https://docs.github.com/ja/actions/reference/events-that-trigger-workflows#example-workflow-configuration
on: [push]
jobs:
  # 任意のジョブ名を指定
  cypress-run:
    # 使用するランナーを指定。
    # Cypress公式が20.04を指定しているので合わせているが、どのバージョンでも問題ないはず
    runs-on: ubuntu-20.04
    steps:
      # リポジトリをチェックアウトし、ワークフローがリポジトリにアクセスできるようにする
      # 参考: https://github.com/actions/checkout
      - name: Checkout
        uses: actions/checkout@v2

      # Next.jsアプリを起動
      - name: Start App
        run: |
          yarn
          yarn build
          yarn start &

      # cypress-io/github-action@v2 を使用してCypressを実行
      - uses: cypress-io/github-action@v2
        with:
          # Next.js (http://localhost:3000) の起動を待つ
          wait-on: "http://localhost:3000"
          # Cypress を ./e2e/ に配置しているため、working-directoryを指定する
          # デフォルトはルートディレクトリ
          # 参考: https://github.com/cypress-io/github-action#working-directory
          working-directory: e2e

      # 任意
      # Cypress実行時に生成されたビデオとスクリーンショットを保存できる
      # 参考: https://github.com/cypress-io/github-action#artifacts
      - uses: actions/upload-artifact@v2
        if: always()
        with:
          name: Cypress E2E Videos
          path: e2e/cypress/videos

코멘트 없는 버전

name: End-to-end tests
on: [push]
jobs:
  cypress-run:
    runs-on: ubuntu-20.04
    steps:
      - name: Checkout
        uses: actions/checkout@v2

      - name: Start App
        run: |
          yarn
          yarn build
          yarn start &

      - uses: cypress-io/github-action@v2
        with:
          wait-on: "http://localhost:3000"
          working-directory: e2e

      - uses: actions/upload-artifact@v2
        if: always()
        with:
          name: Cypress E2E Videos
          path: e2e/cypress/videos

3. 변경 Push

변경 사항을 리포지토리로 푸시하면 GitHub Actions가 자동으로 실행됩니다.
다음 단계를 통해 자세한 내용을 확인할 수 있습니다.

Your repository > Actions

확인하려는 워크 플로우 > cypress-run > Run cypress-io/github-action@v2

또, 確認したいワークフロー > Artifacts 에는, 런타임의 mp4 가 포함되어 있으므로, 런타임의 동작도 확인할 수 있습니다.

결론

이번에는 GitHub Actions에서 Cypress를 쉽게 실행할 수있었습니다.
공식 Docs 를 보는 한 다양한 워크플로우에 대응할 수 있을 것 같기 때문에, 접어 보고 여러가지 시험해 봅니다.

문제해결

AssertionError: expected { Object (baseUrl, projectRoot, ...) } to have property 'baseUrl' of null, but got 'http://localhost:3000'

e2e/cypress.json 에 baseUrl 가 지정되어 있으면, 샘플의 e2e/cypress/integration/examples/cypress_api.spec.js:174:30 가 넘어집니다.baseUrl를 삭제하거나 해당 테스트 케이스를 삭제하십시오.

참고

GitHub Actions에 대해 자세히 알아보기 - GitHub Docs

JavaScript End to End Testing Framework | cypress.io

cypress-io/github-action: GitHub Action for running Cypress end-to-end tests

Writing E2E tests for a Next.js app with Cypress