Zenn
📝

一番簡単なテスト自動化

2022/08/14に公開
CI
Jest
テスト自動化
travis
継続的インテグレーション
tech

ソフトウェアテストを自動化してみたいけどやり方がわからない、そもそもテスト自動化が何かよくわからない、テストコードがよくわからない、といった初学者の方向けの内容となっています。
Travis CI を導入した時の備忘録として執筆することにしました。
今回は、Jest で書いたテストコードを、Travis CI を使って自動実行するまでの手順を書き留めておきます。

前提知識

以下について最小限の知識が必要です。

  • JavaScript
  • Node.js
  • Git
  • GitHub

用意するもの

  • GitHub アカウント
  • GitHub にリポジトリを作成し、ローカル環境に clone しておく。
  • Node.js (執筆時は v16.16.0 を使用しました)

作ってみたもの

自分で手を動かすのが面倒な場合は Fork して利用してください。

https://github.com/a-o-ao/travis-jest-example

テストコード作成

テストを自動化するには、まずプロダクトコードをテストするためのテストコードを作成する必要があります。テストコードの作成までは自動化できません。
今回は Jest を使用して書きます。Jest は JavaScript をテストするための、テスティングフレームワークです。
以下の手順は Jest の はじめましょう のページを参考にしています。

Jestをインストールする

Jest をインストールするため、先に Node.js をインストールしておいてください。
プロジェクトルートに移動し、以下のコマンドで Jest をインストールします。

npm install --save-dev jest

関数作成

まずはプロダクトコードを作成します。
今回は JavaScript で2つの数値を加算する関数を作成します。
src/sum.js ファイルを作成します。

function sum(a, b) {
  return a + b;
}
module.exports = sum;

テストコード作成

次に、上記の関数をテストするコードを作成します。
テストコードを書くことで、常に同じ品質を担保することができます。
今回は sum.test.js というファイルを作成します。
Jest は基本的にルート配下の、ファイル名の末尾が .spec.js または .test.js のすべてのファイルをテストします。（設定で変更することも可能）

const sum = require('../src/sum');

test('adds 1 + 2 to equal 3', () => {
  expect(sum(1, 2)).toBe(3);
});

実行準備

package.json に以下を追加します。

{
  "scripts": {
    "test": "jest"
  }
}

私の環境の package.json は以下のようになりました。

{
  "scripts": {
    "test": "jest"
  },
  "devDependencies": {
    "jest": "^28.1.3"
  }
}

テスト実行

以下のコマンドでテストを実行します。

npm test

テストがパスすれば OK です。

push

ここまで完了したら、一度コミットして GitHub リポジトリにプログラムを push しておきます。

テスト自動実行

このようなテストコードを一定のタイミングで実行することで、常に同じ品質を保つことが可能になります。
自動実行するためには CI(継続的インテグレーション)ツールを使用します。
今回は Travis CI を使用します。Travis CI は手軽に GitHub と連携して継続的インテグレーションを実現することができます。自動テストの他に、ビルドやデプロイを自動化することもできます。

Travis CIへのログイン

Travis CIのアカウントを持っていない場合は GitHub アカウントを利用して作成します。

  1. Travis CIのページにアクセスする
  2. Sign up をクリック
  3. SIGN UP WITH GITHUB をクリック
  4. Authorize Travis CI をクリック
  5. メールが届くので CONFIRM YOUR ACCOUNT をクリック

Travis の準備

最初に getting_started のページが表示されるので、手順に沿って設定していきます。

  1. Activate all repositories using GitHub Apps をクリック。
  2. Travis と連携するリポジトリを選択する。All repositories または Only select repositories を選択。
  3. Approve & Install をクリック。
  4. Travis のダッシュボードにリポジトリが追加されれば OK。
  5. 上の方に Please select a plan in order to use Travis CI が表示された場合は、プランを選んで個人情報を入力する。(Freeプランの場合でもクレジットカード番号の入力が必須になったようです)

Travis 設定ファイルの準備

GitHub リポジトリに戻り、ルート直下に .travis.yml を作成します。
設定ファイルは YAML形式で書く必要があり、開発言語や実行環境によって書き方が異なります。
詳細は公式ページを参照してください。
今回はテストを実行するだけなので、以下のように記述します。

language: node_js
node_js:
  - "16.16.0"
script: npm run test

作成したらコミットして push しておきましょう。

Travis の実行

初期設定では push した時に自動実行されるので、ここではわざとエラーになるようテストを修正して みます。
test/sum.test.js を以下のように修正します。

const sum = require('../src/sum');

test('adds 1 + 2 to equal 3', () => {
  expect(sum(1, 2)).toBe(30); // ここでエラーが起きる
});

push すると Travis のダッシュボードにタスクが追加されます。

しばらくするとエラーになりました。

GitGub 上での確認

GitHub と連携しているため、GitHub リポジトリページからビルド状況を確認することができます。
x が表示されてエラーになっていることが確認できます。

x をクリックすると詳細が表示され、Travis のページへリンクすることも可能です。

プルリクエストでの確認

今度は GitHub でプルリクエストを出した時にどのような表示になるか確認してみます。

  1. 別ブランチを作成する。
  2. 正常なコードに戻して push する。
  3. GitHub 上でプリクエストを作成する。
  4. 以下のようにテストが自動実行される。

しばらくするとテストが正常終了します。
テストが通ったらレビューしてマージするフローが一般的かと思います。

Travis のダッシュボードでも正常終了を確認することができます。
他にもテスト結果のメール通知など色々と設定できますので試してみてください。

最後に

自動テストや継続的インテグレーション(CI)の導入は今や当たり前になってきています。
ソフトウェアテストを自動化することで、不具合の早期発見や品質維持につながるため、同じソースコードを複数人数で開発する場合は特に効果的です。
一方で、どのようなテストを書くかは個人によって異なるため、テスト自動化=品質向上 ではない点に注意してください。
このブログが自動テストやCI/CDに興味を持つきっかけになれば幸いです。

Discussion