Jasmine、React＆AJAX：関数内のユニットテスト関数

Question

ここではテストしたいコードを示します。具体的には、handleSave()が呼び出されたときに呼び出されるように、Linkvalidation.validateというユーティリティを偵察したいと思っています。

このコードはCondensedFormModalと呼ばれるコンポーネントに住んでいる：ここ

handleSave() { 
    LinkValidation.validate(this.state.url) 
    .then((response) => { 
    if (response.success) { 
     this.setState({ 
     message: '' 
     }); 
    } 
    }) 
    .fail((error) => { 
    if (error && error.message && error.message.match(/invalid internal link/)) { 
     this.setState({ 
     message: 'The URL is an internal link. Please use a public link.' 
     }); 
    } else { 
     this.setState({ 
     message: 'The URL is invalid.' 
     }); 
    } 
    }); 

は、私は上記のhandleSave関数内で使用していLinkValidation.validateユーティリティです：ここで

define([ 
    'module/api-call' 
    ], function(
    ApiCall 
) { 

    'use strict'; 

    // Calls validation API 
    function validate(link) { 
    var deferred = $.Deferred(); 

    ApiCall.apiCall(
    '/url/check', 
    { link: link }, 
    'POST', 
    function(data) { 
     if (data.success === true) { 
     deferred.resolve(data); 
     } else { 
     // This link is not valid 
     deferred.reject(data); 
     } 
    }, 
    function() { 
     deferred.reject(); 
    } 
); 

    return deferred; 
} 

return { 
    validate: validate 
}; 
}); 

は私のテストファイルです -

インポートステートメント： import { validate } from 'modules/link-validation.js';

テスト：私はこのテストを実行すると

describe('when the URL is an internal link',() => { 
      it('displays a unique error message', (done) => { 
      let modal = shallowInstance(<CondensedFormModal />); 
      modal.setState({ 
       url: 'https://internal.example.com' 
      }); 

      let x = jasmine.createSpy('validate').and.returnValue({ 
       message: "invalid internal link", 
       success: false, 
       url: 'https://example.com' 
      }); 

      modal.handleSave(); 
      _.defer(() => { 
       expect(x).toHaveBeenCalled(); 
       done(); 
      }); 
      }); 
    }); 

、それは一貫してメッセージで失敗「と呼ばれていることが予想スパイ検証します。」

ジャスミンのドキュメント（https://jasmine.github.io/2.1/introduction）および様々な他のスタックオーバーフローの質問（Unit test with spy is failing. Says spy was never called、Jasmine test case error 'Spy to have been called'、など）を見た後、私はこの作品を作ることができないんです。私もreturnValueの代わりにcallFakeとcallThroughを試しました。

LinkValidation.validateにスパイする方法を教えてください。

Answer 1

このライン：

let x = jasmine.createSpy('validate') 

は新しいスパイ機能を作成する（それは、既存のvalidate機能をスパイしない）とhandleSave機能がそれを認識していません。だから、まったく呼び出されません。 コンポーネントで実際に呼び出される関数でスパイを設定する必要があります。 CondensedFormModalはLinkValidationモジュール（これはコンポーネントファイルにインポートされていると仮定しています）を使用しているため、コンポーネントによって実際に使用されるインポートされたモジュールのvalidateファンクションにスパイを設定する必要があります。だから私はこのようなものをお勧めしたい：CondensedFormModalコンストラクタで

1. のテストでは、それが簡単にアクセスできるようにするコンポーネントプロパティとしてLinkValidationを設定します。

   ：このようなhandleSave使用validate機能で

   this.LinkValidation = LinkValidation; 
   

3. 最後に、コンポーネント上のスパイのテストセットvalidate方法：

   describe('when the URL is an internal link',() => { 
        it('displays a unique error message', (done) => { 
        let modal = shallowInstance(<CondensedFormModal />); 
        ... 
   
        spyOn(modal.LinkValidation, 'validate').and.returnValue({ 
         message: "invalid internal link", 
         success: false, 
         url: 'https://dash.vagrant.local.rf29.net/shopping/new' 
        }); 
   
        modal.handleSave(); 
        _.defer(() => { 
         expect(modal.LinkValidation.validate).toHaveBeenCalled(); 
         done(); 
        }); 
        }); 
   });