Sinon.JSの使い方！「インストール方法」や「テスト方法」などを解説！

この記事では『Sinon.JS』について、

  • Sinon.JSとは
  • Sinon.JSの使い方
    • Sinon.JSのインストール方法
    • Sinon.JSを用いてJavaScriptのプログラムをテストする方法

などを分かりやすく説明するように心掛けています。ご参考になれば幸いです。

Sinon.JSとは

Sinon.JSとは

Sinon.JSはJavaScriptでテストダブル(テスト対象が依存しているコンポーネントを置き変えたり、呼び出しを記録したりするもの)を実現するライブラリです。

例えば、テスト対象が依存しているコンポーネントが開発途中で未完成の場合、テスト対象はその依存コンポーネントを呼び出すことができません。Sinon.JSを用いると、依存コンポーネントの部分をテストダブルに置き換えて、テストを実行することができるようになります。

また、テスト対象が依存コンポーネントを何回呼び出したか、どのような引数で呼び出したかなどをも記録したりすることができます。

Sinonの由来

Sinonは「シノン」と呼びます。Sinonはトロイア戦争で活躍したスパイであるギリシャの勇士「シノン(Sinon)」に由来しています。

Sinon.JSの使い方

ではこれから

  • Sinon.JSのインストール方法
  • Sinon.JSを用いてJavaScriptのプログラムをテストする方法

を順番に説明します。

Sinon.JSのインストール方法

Sinon.JSのインストールは以下の手順で行います。

Sinon.JSのインストールの手順

  • 「Node.js」と「Node Package Manager」がインストールされているかを確認する
  • 新しいプロジェクトディレクトリを作成する
  • 「package.json」ファイルを作成する
  • Sinon.JSとMochaをインストールする

ではこれから上記の手順について順番に説明します。

テストの実行にはテストフレームワークが必要です。そのため、今回はテストフレームワークであるMochaも一緒にインストールしています。

step
1「Node.js」と「Node Package Manager」がインストールされているかを確認する

Sinon.JSをインストールするためには、「Node.js」と「Node Package Manager(Node.js標準のパッケージ管理ツール)」がインストールされている必要があります。

「PowerShell」または「コマンドプロンプト(cmd)」を起動し、以下の2つのコマンドを1つずつ実行します。

node -v
npm -v

これらのコマンドを実行して、バージョンが正しく表示されればOKです。

npmはNode Package Managerを利用するためのコマンドです。

上記のコマンドの実行結果

参考に上記のコマンドの実行結果を下記に示します。

PS C:\Users\user01> node -v
v18.16.0
PS C:\Users\user01> npm -v
9.6.6

あわせて読みたい

「Node.js」と「Node Package Manage」のインストール方法については下記の記事で詳しく説明しています。インストールしていない方は下記のリンクからぜひチェックをしてみてください。

Node.jsの『ダウンロード方法』と『インストール方法』を解説！
Node.jsの『ダウンロード方法』と『インストール方法』を解説！

続きを見る

step
2新しいプロジェクトディレクトリを作成する

新しいプロジェクトディレクトリを作成します。

例えば、「PowerShell」または「コマンドプロンプト(cmd)」を起動し、以下のコマンドを実行すると、「sinonTest」という名前のディレクトリが作成されます。

mkdir sinonTest

step
2「package.json」ファイルを作成する

Node.jsがインストールされていることを確認したら、次に「package.json」ファイルを作成します。ここでは、パッケージ管理にnpm(node package manager)を使用して作成します。

カレントディレクトリ(現在作業しているディレクトリ)がプロジェクトのルートディレクトリであることを確認してください。その後、以下のコマンドを実行すると、「package.json」ファイルを作成することができます。

npm init -y

すでに「package.json」ファイルが存在している場合はこのコマンドは不要です。

npm init -yコマンドを実行すると、以下に示すような「package.json」ファイルがカレントディレクトリに作成されます(環境によって作成されるpackage.jsonは異なります)。

{
  "name": "sinontest",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

step
3Sinon.JSとMochaをインストールするをインストールする

次に、Sinon.JSとMochaをインストールします。以下のコマンドをプロジェクトのルートディレクトリで実行すると、Sinon.JSとMochaをインストールすることができます。

npm install --save-dev sinon mocha

上記のコマンドを実行すると、Sinon.JSとMochaが開発依存関係として「package.json」ファイルに追加されます。その結果、「package.json」ファイルは以下のように更新されます。

{
  "name": "sinontest",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "mocha": "^10.2.0",
    "sinon": "^15.2.0"
  }
}

devDependenciesにsinonとmochaが追加されていることで、Sinon.JSとMochaが正しくインストールされていることが確認できます。

Sinon.JSを用いてJavaScriptのプログラムをテストする方法

では、次にSinon.JSを用いてJavaScriptのプログラムをテストしてみましょう。

テストする手順を以下に示します。

Sinon.JSを用いてJavaScriptのプログラムをテストする手順

  • テスト対象のファイルを作成する
  • テストファイルを作成する
  • 「npm test」コマンドでテストを実行できるように「package.json」ファイルを編集する
  • 「npm test」コマンドでテストを実行する

ではこれから上記の手順について順番に説明します。

step
1テスト対象のファイルを作成する

「message.js」というファイルを作成し、テスト対象であるJavaScriptの関数を書きます。このファイルでは、Hello, World!をコンソール出力するmessage関数を記述しています

function message() {
    console.log("Hello, World!");
}

module.exports = message;

step
2テストファイルを作成する

次に、作成したmessage関数のテストコードを書きます。「test.js」というファイルを作成し、以下処理を記述します。

// テスト対象ファイルを読み込み
const message = require('./message');
// モジュールのインポート
var sinon = require('sinon');
var assert = require('assert');

// describe関数を使用してテストスイートを定義
describe('message function', function() {
    // it関数を使用して単体テストを定義
    it('should call console.log once', function () {
        // Sinon.JSを使ってスパイを作成: console.logをスパイにする
        var logSpy = sinon.spy(console, 'log');

        // テスト対象の関数を呼び出す
        message();

        // アサーション：console.logが一度だけ呼び出されたか
        assert(logSpy.calledOnce);

        // スパイの復元
        logSpy.restore();
    });
});

it関数

it関数を使用して単体テストを定義します。

it関数の第1引数には、テストの説明を記述します。

it関数の第2引数には、関数を記述します。この関数の中にテストで行う処理と期待される結果を記述します。

最終的なディレクトリ構成は以下のようになります(プロジェクトのルートディレクトリの名前がjestTestの場合)。

sinonTest                    
├─node_modules                         
├─message.js
├─test.js
├─package-lock.json
└─package.json

step
3「npm test」コマンドでテストを実行できるように「package.json」ファイルを編集する

npm testコマンドでテストを実行できるように、「package.json」ファイルのscriptに「"test": "mocha"」を追加します。

{
  "name": "sinontest",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "mocha"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "mocha": "^10.2.0",
    "sinon": "^15.2.0"
  }
}

step
4「npm test」コマンドでテストを実行する

以下のコマンドをプロジェクトのルートディレクトリで実行すると、テストを実行することができます。

npm test

実行結果

PS C:\Users\user01\Desktop\sinonTest> npm test

> sinontest@1.0.0 test
> mocha



  message function
Hello, World!
    ✔ should be called once


  1 passing (6ms)

Sinon.JSを用いてJavaScriptのプログラムをテストすることができました。

本記事のまとめ

この記事では『Sinon.JS』について、以下の内容を説明しました。

  • Sinon.JSとは
  • Sinon.JSの使い方
    • Sinon.JSのインストール方法
    • Sinon.JSを用いてJavaScriptのプログラムをテストする方法

お読み頂きありがとうございました。