酵素、モカ、サイロンおよび反応物による単位試験。どのようにスパイが呼び出されているかを確認するには？

Question

私はこのテストが失敗している理由を調べようとしましたが、なぜサイオンスパイオブジェクトが呼び出されているのかわからないため、理由を特定できません。

sinon.calledWithをテストするより良い方法があるので、結果と期待される結果が表示されますか？

以下のテストでは、expect(onLoginClick.called).to.equal(true);になりますが、これはexpect(onLoginClick.calledWith(expected)).to.equal(true);ではありません。

1. なぜでしょうか？
2. 実際の値を見ることで自分自身を確認するにはどうすればよいでしょうか？

私は、「NPMの実行テスト」を経由してテストを実行しています、プロジェクトをクローン化し、この質問を支援するために取られた答えと時間https://github.com/Rob-Leggett/react_redux_webpack

おかげでから実行することができます。

テスト

import React from 'react'; 
import { mount, shallow } from 'enzyme'; 
import { expect } from 'chai'; 
import sinon from 'sinon'; 

import Login from '../app/components/login/Login'; 

describe('<Login/>', function() { 

    it('should click login button with credentials',() => { 
     // given 
     const expected = { username: 'test', password: 'user' }; 

     const errors = []; 
     const onLoginClick = sinon.spy(); 

     const wrapper = mount(<Login errors={errors} onLoginClick={onLoginClick} />); 

     // when 
     wrapper.ref('username').simulate('change', {target: {value: 'test'}}); 
     wrapper.ref('password').simulate('change', {target: {value: 'user'}}); 

     wrapper.find('button').simulate('click'); 

     // then 
     //expect(onLoginClick.calledWith(expected)).to.equal(true); 
     expect(onLoginClick.called).to.equal(true); 
    }); 
}); 

コンポーネント

import React, { Component, PropTypes } from 'react' 

export default class Login extends Component { 

    renderErrors() { 
    const { errors } = this.props; 

    return errors.map((error, i) => { 
     return (
      <p key={i} style={{color:'red'}}>{error}</p> 
    ); 
    }); 
    } 

    render() { 
    return (
     <div> 
      <input type='text' ref='username' className="form-control" style={{ marginRight: '5px' }} placeholder='Username'/> 
      <input type='password' ref='password' className="form-control" style={{ marginRight: '5px' }} placeholder='Password'/> 
      <button onClick={() => this.handleLogin()} className="btn btn-primary"> 
      Login 
      </button> 

      {this.renderErrors()} 
     </div> 
    ) 
    } 

    handleLogin() { 
    const { onLoginClick } = this.props; 

    const credentials = { 
     username: this.refs.username.value.trim(), 
     password: this.refs.password.value.trim() 
    }; 

    onLoginClick(credentials) 
    } 
} 

Login.propTypes = { 
    onLoginClick: PropTypes.func.isRequired, 
    errors: PropTypes.arrayOf(PropTypes.string) 
}; 

Mを見つけるためにpackage.json

{ 
    "name": "react_redux_webpack_client", 
    "version": "1.0.0", 
    "description": "A ReactJS Client", 
    "scripts": { 
    "test": "mocha test/helpers/browser.js test/**/*.spec.js", 
    "dev": "webpack-dev-server --content-base public/ --hot --inline", 
    "build": "webpack -p --display-error-details" 
    }, 
    "repository": { 
    "type": "git", 
    "url": "https://github.com/Rob-Leggett/react_redux_webpack.git" 
    }, 
    "author": "Robert Leggett", 
    "license": "MIT", 
    "homepage": "https://github.com/Rob-Leggett/react_redux_webpack", 
    "bugs": { 
    "url": "https://github.com/Rob-Leggett/react_redux_webpack/issues" 
    }, 
    "devDependencies": { 
    "chai": "^3.5.0", 
    "css-loader": "^0.26.1", 
    "enzyme": "^2.7.1", 
    "extract-text-webpack-plugin": "^1.0.1", 
    "html-webpack-plugin": "^2.26.0", 
    "jsdom": "^9.9.1", 
    "mocha": "^3.2.0", 
    "node-sass": "^4.3.0", 
    "react-addons-test-utils": "^15.4.2", 
    "sass-loader": "^4.1.1", 
    "sinon": "^1.17.7", 
    "style-loader": "^0.13.1", 
    "webpack": "^1.14.0", 
    "webpack-dev-server": "^1.16.2" 
    }, 
    "dependencies": { 
    "babel-core": "^6.21.0", 
    "babel-loader": "^6.2.10", 
    "babel-preset-es2015": "^6.18.0", 
    "babel-preset-react": "^6.16.0", 
    "babel-register": "^6.22.0", 
    "body-parser": "^1.15.2", 
    "classnames": "^2.2.5", 
    "react": "^15.4.2", 
    "react-dom": "^15.4.2", 
    "react-redux": "^5.0.2", 
    "redux": "^3.6.0", 
    "redux-thunk": "^2.2.0", 
    "whatwg-fetch": "^2.0.1" 
    } 
} 

Answer 1

鉱石は、その後、真/あなたのテストで偽、あなたがSinonからの引数は次のようにスパイを取得することができますすることができます

const spyCall = onLoginClick.getCall(0); 
expect(spyCall.args[0]).to.equal(expected) 

を今失敗テストは、あなたが本当になった引数を表示する必要があります。 http://sinonjs.org/docs/