Question

我试图弄清楚为什么这个测试失败但无法确定原因，因为我无法看到调用sinon间谍对象的内容。

有没有更好的方法来测试sinon.calledWith所以它会显示结果和预期的结果？

在下面的测试中，以下检查通过了expect(onLoginClick.called).to.equal(true);，但这不是expect(onLoginClick.calledWith(expected)).to.equal(true);。

任何想法为什么？
如何通过查看onLoginClick的实际值与预期的？

我通过“npm run test”运行测试，可以克隆项目并从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)
};

的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间谍那里得到args：

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

现在失败的测试应该向你显示你真正得到的args。见http://sinonjs.org/docs/

用酶，摩卡，sinon和reactjs进行单元测试。如何看待间谍的召唤？

1 个答案: