我想检查当在我的组件上单击按钮时,它会调用我创建的方法来处理单击。这是我的组件:
import React, { PropTypes, Component } from 'react';
class Search extends Component {
constructor(){
super();
this.state = { inputValue: '' };
}
handleChange = (e) => {
this.setState({ inputValue: e.target.value });
}
handleSubmit = (e) => {
e.preventDefault();
return this.state.inputValue;
}
getValue = () => {
return this.state.inputValue;
}
render(){
return (
<form>
<label htmlFor="search">Search stuff:</label>
<input id="search" type="text" value={this.state.inputValue} onChange={this.handleChange} placeholder="Stuff" />
<button onClick={this.handleSubmit}>Search</button>
</form>
);
}
}
export default Search;
这是我的测试
import React from 'react';
import { mount, shallow } from 'enzyme';
import Search from './index';
import sinon from 'sinon';
describe('Search button', () => {
it('calls handleSubmit', () => {
const shallowWrapper = shallow(<Search />);
const stub = sinon.stub(shallowWrapper.instance(), 'handleSubmit');
shallowWrapper.find('button').simulate('click', { preventDefault() {} });
stub.called.should.be.true();
});
});
名为 property 的调用返回 false。我已经尝试了大量的语法变化,我想也许我只是缺少一些基本的东西。任何帮助将不胜感激。