Trying to test onChange function of react component form

Question

So I have a Signup component that renders a form with a simple text field and submit function. On entering text in the field the 'address' attribute should be updated. In my test I'm trying to assert that the onChange function is called but stubbing the function using jest. However when I try and simulate the change I get the error:

TypeError: result.simulate(...) is not a function

If I remove the .bind(this) is gets to the point where it's setting the state in the function but this is undefined.

Here is my code:

import React, { Component } from 'react';

class Signup extends Component {

  constructor(props){
    super(props);
    this.state = {};
  }

  onSubmit(e){
    let {address} = this.state;
    this.setState({
      address: ""
    });
    this.props.addFeed(address);
    e.preventDefault();
  }
  onChange(e) {
      this.setState({
        address: e.target.value
      });
  }

  render() {
    return (
      <div>
      <form onSubmit={this.onSubmit.bind(this)}>
        Please enter your address:
        <input id='address' type="text" onChange={this.onChange.bind(this)} value={this.state.address}>
        </input>
        <input type="submit" value="Submit">
        </input>
      </form>
      </div>
    );
  }
}

export default Signup;

And my test:

test("onChange() is called upon changing the text field", () => {
    const value = "Makers Academy"
    const onChange = jest.fn()
    const wrapper = shallow(<Signup onChange={onChange} />)
    const result = wrapper.find('#address')
    result.simulate('change', { target: { value: {value} } })('change');
    expect(onChange.called).toBe.true
  })

Answer 1

You try spy for onChange from props , but in your component no has any props.
Component's methods and component props are different things.
You need call this.props.onChange inside this.onChange .

import React, { Component } from 'react';

class Signup extends Component {

  constructor(props){
    super(props);
    this.state = {};
  }

  onSubmit(e){
    let {address} = this.state;
    this.setState({
      address: ""
    });
    this.props.addFeed(address);
    e.preventDefault();
  }
  onChange(e) {
      this.setState({
        address: e.target.value
      });
      // Call onChange callback
      this.props.onChange();
  }

  render() {
    return (
      <div>
      <form onSubmit={this.onSubmit.bind(this)}>
        Please enter your address:
        <input id='address' type="text" onChange={this.onChange.bind(this)} value={this.state.address}>
        </input>
        <input type="submit" value="Submit">
        </input>
      </form>
      </div>
    );
  }
}

And some fix in your test

test("onChange() is called upon changing the text field", () => {
    const value = "Makers Academy";
    const onChange = jest.fn();
    const wrapper = shallow(<Signup onChange={onChange} />);
    const result = wrapper.find('#address');
    result.simulate('change', {target: {value}});
    expect(onChange.called).toBe(true);
});