テストとは

テストの目的と重要性

テストは、書いたコードが正しく動作するかを確認するために行います。これにより、バグを早期に発見し、ソフトウェアの品質を向上させることができます。特に、新しい機能を追加する際やコードを修正する際に、以前の機能が正しく動作し続けることを保証するために重要です。

JavaScript講座の課題にはテストが用意されているものがあり、実行することで自分が書いたコードがテストケースを満たし正しく動作するかを確認できます。

テスティングフレームワーク（Jest や Vitest）について

Jest と Vitest は、JavaScript で人気のテスティングフレームワークです。これらフレームワークを使うことでテストケース（テストを行うための個別のシナリオ）の作成や実行を効率的に行うことができます。（JavaScript講座でも、これらツールを使用しテストを作成しています。）

iこの記事ではテスティングフレームワークを使ったテストの作成方法の解説は行いませんが、参考として、2つの値を求めるsum関数とその関数をテストのコード例を示します。

// sum.js
export function sum(a, b) {
  return a + b
}

// sum.test.js
import { expect, test } from 'vitest'
import { sum } from './sum'

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

テストの実行方法

実行環境の構築

Jest や Vitest で作成されたテストを実行するには、PCに Node.js と Node.jsのパッケージマネージャー（npmやyarnなど） がインストールされている必要があります。これらの詳しいインストール手順はNode.js の環境構築の資料を参照してください。

インストールされているかどうかを確かめるには、ターミナルを立ち上げ node --version コマンドや npm --version コマンドを実行します。バージョンが表示されればインストールは完了しています。

テスト環境の構築

JavaScript講座の課題用リポジトリにはテストコードが用意されているので、そのテストを実行してみましょう。
https://github.com/redimpulz/ueq-study-js-basic

まずはリポジトリをフォークしてください。

git clone [フォークしたリポジトリのURL]

リポジトリをローカルにクローンできたら、テストの実行に必要なパッケージをインストールします。インストールするパッケージの情報が記載された package.jsonのあるディレクトリにターミナルで移動し、インストールコマンドを実行します。

npm install

これで、テストを実行するための環境が整いました。

ローカル環境でのテスト

テスト実行手順

JavaScript講座の課題用リポジトリ「ueq-study-js-basic」のテストはVitestを使用して作成されており、テストコードは __tests__ ディレクトリ以下にあります。

リポジトリ内にある全てのテストを実行するには、次のコマンドを実行します。

npx vitest

なおVitestでは、コードを変更して保存すると自動的にテストが再実行されます。テストの実行を停止するには、ターミナルでqを押してください。

指定したファイルのテストのみを実行するには

npx vitest (テストファイル名のパス)

例えば、 __tests__/script.test.ts のテストのみ実行するには次のようにします。

npx vitest __tests__/script.test.ts

指定したディレクトリ内のテストのみを実行するには

npx vitest --dir (テストファイルがあるディレクトリのパス)

例えば、 __tests__/extra ディレクトリ内のテストのみ実行するには次のようにします。

npx vitest --dir __tests__/extra

テスト結果の見方

テストの実行が完了すると、コマンドラインに結果が表示されます。出力される内容は次のとおりです。

• テストケースの成否の一覧
• 失敗したテストケースの一覧
• テストの要約

全てのテストを通過した場合には、要約セクションに緑色の「PASS」というメッセージが表示されます。

一方、テストに失敗した場合は、赤色の「FAIL」というメッセージが表示されるので、失敗したテストケースの詳細を確認してコードを修正してください。

• Expected は、テストケースが期待する値です。
• Received は、実際に返した値です。Expected と一致しない場合は、テストに失敗します。

例えば下記の画像では、Buzzを返すべきところを5を返してしまっているため、テストに失敗しています。

失敗したテストケースの詳細を確認し、なぜ期待した出力結果と異なるのかを考えることが重要です。全てのテストケースを通過するように、試行錯誤しながらコードを修正してください。

GitHub Actions でのテスト

GitHub Actions について

GitHub Actions は、コードの変更を自動的に検知し、テストやその他の作業を自動で行うための GitHub の機能です。これを使うと、コードを GitHub にアップロードするだけで、自動的にテストが実行され、その結果を確認することができます。
次に、GitHub Actions を活用して、コードのテストを行う方法を紹介します。

GitHub Actions の設定

GitHub Actions は、公開リポジトリでは無料で使用できます(2023 年 11 月時点)。詳しくはGitHub Actions の課金についてを確認してください。

GitHub Actions を使用してテストを自動化するためには、リポジトリで GitHub Actions を有効にする必要があります。
リポジトリのトップページで「Actions」タブをクリックし、表示された画面で「I understand my workflows, go ahead and enable them」をクリックしてください。

GitHub Actions によるテストの実行

JavaScript講座の課題用リポジトリ「ueq-study-js」では、コードをプッシュすると自動的にテストが行われるように設定されています。（設定内容は、ueq-study-js 内の .github/workflows/ci.yml に記載されています）

テスト結果の確認

GitHub Actions によってテストが実行された後、その結果は GitHub のリポジトリページ上で確認することができます。リポジトリページの「Actions」タブをクリックし、実行されたワークフローの一覧から最新のものを選択します。ここで、テストの実行状況と結果を詳細に見ることができます。

テストの実行が完了した後、テストに通過した場合は緑のチェックマークが表示されます。一方、テストに失敗した場合は赤いバツマークが表示されます。

それぞれのワークフローの実行ログを確認することもできます。通過したテストの個数や、失敗したテストの詳細を確認することができます。

さらに学ぶ

テストについてさらに詳しく学ぶためのリンク集を用意しました。これらのページを参考に、テストについて理解を深めましょう。

• テストとは
  • サイボウズ新卒研修 ソフトウェアテスト
  • 【初心者向け】テストコードの方針を考える（何をテストすべきか？どんなテストを書くべきか？） #Ruby - Qiita
  • テストの種類と技法 #テスト - Qiita
• テストツール
  • Jest 公式サイト
  • Vitest 公式サイト
• CI/CD
  • GitHub Actions 公式ドキュメント
  • GitHub の新機能「GitHub Actions」で試す CI/CD | さくらのナレッジ