鍋綿ブログ

C#・SharePoint・SharePoint Framework・Office365を中心に扱うブログです。

SharePoint Frameworkでユニットテスト

SharePoint Frameworkでユニットテストを書こうと思った時に調べたことをまとめておきます。

 

 

ツール

私はできるだけ標準搭載のものを使いたい派です。何故なら面倒だから。あと他のツールと相性が悪かったりする場合があるから。
というわけで可能な限りSharePoint Frameworkが標準搭載しているツールを利用します。ツール構成は以下です。

  • [標準搭載] mocha

テスティングフレームワークです。テストを記述するためのメソッド群を提供し、結果の判定と集計を行います。

  • [標準搭載] chai

アサーションライブラリです。期待値と実際値とを比較して、異なる場合は例外を投げます。

  • [標準搭載] karma

テストランナーです。テストを実行するコマンドを提供し、レポート出力などを行います。

  • [標準搭載] PhantomJS

ヘッドレスブラウザです。

コードサンプル

テスト用プロジェクトの作成から行っていきます。開発環境の構築がまだの方は以下の記事で構築方法を紹介しましたので参考にしてください。

SharePoint Framework (SPFx) 開発環境構築 (Windows 10) - 鍋綿ブログ

テスト用プロジェクト作成

まずはプロジェクトを作成します。任意のフォルダで以下を実行します。

yo @microsoft/sharepoint

今回は以下の通りオプションを選択しました。

? What is your solution name? unit-testing
? Which baseline packages do you want to target for your component(s)? SharePoint Online only (latest)
? Where do you want to place the files? Use the current folder
Found npm version 5.6.0
? Do you want to allow the tenant admin the choice of being able to deploy the solution to all sites immediately without
running any feature deployment or adding apps in sites? No
? Which type of client-side component to create? WebPart
Add new Web part to solution unit-testing.
? What is your Web part name? UnitTesting
? What is your Web part description? UnitTesting description
? Which framework would you like to use? React

テスト用のコードも準備していきます。

srcフォルダ配下にappフォルダを追加し、その下にsample.tsファイルを作成しました。

/** ユニットテスト用のサンプルクラスです。 */
export class Sample
{
    /** 足し算を行います。 */
    public Addition(arg1 : number, arg2 : number) : number
    {
        return arg1 + arg2;
    }
}

足し算のロジックがこのコードで充分かどうかは、後述のテストコードで確認します。

フツーのテスト

Sampleクラスに対するテストを追加します。同appフォルダ内にtestsフォルダを作成し、その中にsample.test.tsファイルを作成しました。

import * as mocha from 'mocha';
import * as chai from 'chai';
import { Sample } from '../../../../lib/webparts/app/sample';

describe('Sampleクラステスト', () => {
    describe('Addtitionメソッドテスト', () => {
        it('正常系テスト', () => {
            // 3 + 7 = 10 になるはずである
            chai.expect(10).to.equal(new Sample().Addition(3, 7));
        });
        it('0値のテスト', () => {
            // 2 + 0 = 2 になるはずである
            chai.expect(2).to.equal(new Sample().Addition(2, 0));
        });
        it('NULL値のテスト', () => {
            // 今回は4 + null = 4 という動きを期待するとしよう
            chai.expect(4).to.equal(new Sample().Addition(4, null));
        });
        it('undefinedのテスト', () => {
            // 今回は6 + undefined = 6 という動きを期待するとしよう
            chai.expect(6).to.equal(new Sample().Addition(6, undefined));
        });
    });
});

プロジェクトを保存したら、コマンドプロンプトで以下を実行します。

gulp test

今回のサンプルコードでは、undefinedのテストに失敗という結果が得られました。

f:id:micknabewata:20180825084843j:plain

残念ながらテストできないケース

現バージョンでは、@microsoft/sp-httpをインポートするモジュールのテストは残念ながらできません。モックを使ってテストしようかと思いやってみたのですが、以下のエラーが出てしまいます。

PhantomJS 2.1.1 (Windows 8.0.0) ERROR
  Error: Cannot find module "@ms/sp-client-shared"
  at C:/work/SPFx/UnitTesting/temp/tests.js:3318
PhantomJS 2.1.1 (Windows 8.0.0) ERROR
  Error: Cannot find module "@ms/sp-client-shared"
  at C:/work/SPFx/UnitTesting/temp/tests.js:3318

どうも内部での依存関係が正しくないようで、海外のフォーラムなんかでも既知の問題的な扱いでした。次のバージョンを待ちましょう。

 

というわけで、特に追加のライブラリも必要なくテストができました。
フレームワークがReactでtsxのテストを行う場合などは追加が必要ですが、
簡単なテストであればすぐに始められます。