私はこのテストが失敗している理由を調べようとしましたが、なぜサイオンスパイオブジェクトが呼び出されているのかわからないため、理由を特定できません。酵素、モカ、サイロンおよび反応物による単位試験。どのようにスパイが呼び出されているかを確認するには?
sinon.calledWithをテストするより良い方法があるので、結果と期待される結果が表示されますか?
以下のテストでは、expect(onLoginClick.called).to.equal(true);
になりますが、これはexpect(onLoginClick.calledWith(expected)).to.equal(true);
ではありません。
- なぜでしょうか?
- 実際の値を見ることで自分自身を確認するにはどうすればよいでしょうか?
私は、「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"
}
}