Webpack + Mochapack + PhpStormでJavaScriptのユニットテストを実行する

mochapackwebpackのビルドも行ってくれるmochaのラッパーで、webpackのビルドを必要とするユニットテストを実行できます。
この記事では、phpstormmochapackのテストを実行する方法を説明していきます。

以下の様なユニットテストがあるとします。

describe('ModuleName', () => {
    it('methodName_purpose', async () => {
        
        // 任意の処理
        
        assert.equal(true, true);
    });

Edit Configurationsを選択する

実行設定ウィンドウが開くので以下の通り設定する。
左ペインでTemplatesMocha を選択する。
Node interpreterには使用するnodeの実行ファイルを選択する
Mocha packageにはnode_modules配下にあるmockpackのフォルダを指定します。
Test directoryにはプロジェクトのテストフォルダを指定します。
Include subdirectoriesにチェックを入れます。
最後にOKをクリックして閉じます。

PhpStormでMochapack用の実行構成を設定している図

ユニットテストのファイルを開くと緑の再生ボタンが表示されているはずなので、これをクリックしてテストを実行できます。

PhpStormでユニットテストを実行している図1
PhpStormでユニットテストを実行している図2

以下の様にテストが成功すれば設定できています!

PhpStormでユニットテストの結果を確認している図

おわり。

コメントする