This article has been translated into English version: Implementing Code Coverage in GitHub Actions Using Codecov

Pendahuluan

Di bagian sebelumnya, kita telah membahas cara mengatur Continuous Integration (CI) dan Continuous Deployment (CD) menggunakan GitHub Actions.

Implementasi CI/CD Menggunakan GitHub Actions dengan TypeScript dan Jest

Kali ini, kita akan melanjutkan dengan topik yang tak kalah penting: code coverage.

Code coverage adalah metrik yang digunakan untuk mengukur sejauh mana kode aplikasi kita diuji. Dengan memastikan bahwa kode kita tercakup oleh unit test, kita bisa lebih yakin bahwa aplikasi berjalan sesuai yang diharapkan dan bebas dari bug.

GitHub Actions memungkinkan kita untuk mengotomatisasi proses CI/CD dalam proyek, dan salah satu fitur pada unit test yang bisa kita manfaatkan adalah integrasi dengan codecov.io. Dengan codecov.io, kita dapat melacak dan memvisualisasikan code coverage untuk memastikan aplikasi kita terus teruji dengan baik.

Langkah-langkah Implementasi

Menyiapkan GitHub Actions

Langkah pertama adalah memastikan bahwa proyek kita sudah terintegrasi dengan GitHub Actions seperti yang sudah dibahas di artikel sebelumnya. Dalam sesi ini, kita menggunakan TypeScript dan Jest untuk unit testing. Selanjutnya, kita akan mengonfigurasi workflow untuk menjalankan pengujian dan mengirimkan data coverage ke Codecov.

Mengkonfigurasi Workflow GitHub Actions

Berikut adalah contoh file konfigurasi .github/workflows/main.yml untuk workflow GitHub Actions yang mengautomasi proses build dan test:

name: CI

on:
  push:
    branches:
      - main
  pull_request:

env:
  NODE_VERSION: 22.11.0

jobs:
  test:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout
        uses: actions/checkout@v4

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: ${{ env.NODE_VERSION }}

      - name: Install dependencies
        run: npm install

      - name: Run test with coverage
        run: npm run test -- --coverage

Yang membedakan konfigurasi di atas dengan artikel sebelumnya adalah penggunaan mode coverage. Di bagian “Run test with coverage”, Jest akan membuat laporan coverage ke dalam folder /coverage yang nantinya akan dikirimkan ke Codecov di langkah berikutnya.

Mengkonfigurasi Codecov

Setelah GitHub Actions berhasil membuat laporan coverage, kita perlu mengkonfigurasi Codecov untuk menerima dan memproses laporan tersebut. Ikuti langkah-langkah berikut:

• Daftar atau masuk ke akun codecov.io.

• Sambungkan repository GitHub ke codecov.io.

  

• Cari nama repository yang ingin dikonfigurasi, lalu masuk ke menu configuration seperti di bawah ini.

  

• Tambahkan token ke dalam file konfigurasi GitHub Secrets dengan nama CODECOV_TOKEN.

  

Di langkah selanjutnya, kita akan mengirim data coverage dari GitHub Actions ke Codecov.

Mengirimkan Data Coverage ke Codecov

Untuk mengirim data coverage ke Codecov, kita dapat menambahkan langkah berikut dalam workflow GitHub Actions:

name: CI

on:
  push:
    branches:
      - main
  pull_request:

env:
  NODE_VERSION: 22.11.0

jobs:
  test:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout
        uses: actions/checkout@v4

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: ${{ env.NODE_VERSION }}

      - name: Install dependencies
        run: npm install

      - name: Run test with coverage
        run: npm run test -- --coverage

      - name: Upload results to Codecov
        uses: codecov/codecov-action@v4
        with:
          token: ${{ secrets.CODECOV_TOKEN }}
          fail_ci_if_error: true

Langkah ini akan mengirimkan data coverage yang dihasilkan oleh Jest ke Codecov.io setelah pengujian selesai. Setelah menambahkan perubahan di .github/workflows/main.yml, jangan lupa untuk melakukan commit pada kode tadi dan melakukan rilis versi baru. Misalnya dengan menggunakan perintah berikut di Git:

git commit -m "ci: add codecov integration on github actions"
git push origin main

Verifikasi Hasil Coverage

Setelah workflow GitHub Actions berjalan, kita dapat memeriksa laporan coverage di codecov.io. Codecov akan menampilkan statistik mengenai berapa banyak kode yang tercakup oleh unit tests, serta memberikan laporan visual yang mudah dipahami.

Penutup

Dengan menggunakan GitHub Actions dan Codecov, kita dapat mengautomasi seluruh proses pengujian dan memantau kualitas kode. Code coverage adalah metrik yang sangat berguna untuk menjaga agar sebuah kode tetap teruji dan bebas dari bug. Source code dari artikel ini bisa dicek di bawah ini.

https://github.com/ngodingbang/rwid-github-actions

Jangan lupa untuk selalu mengupdate workflow CI/CD agar lebih efisien dan memastikan kualitas aplikasi tetap terjaga 🔥.