Jest Enzyme 无法监视该属性，因为它不是 function； 当 spyOn 在组件中测试 function 时，给出了 undefined

Question

I am testing on the execution of functions inside a React component that's connected to redux store. I was only able to spy on some of the functions, the rest all returned: Cannot spy the setEmail(or other function names) property because it is not a function; undefined given instead

below in code I added arrows pointing out which ones are spy-able, when I console.log(BaseForm.WrappedComponent.prototype.functionName) the ones that are not spy-able returned undefined. the one that can be spied on returned [Function:...] I really do not understand why?

class BaseForm extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      ages: [],
    };
  }

  componentDidMount() {
    this.createAges(); <----- can spy on this one as it is a function
  }

  setEmail = (elemName, value) => { <------ Cannot spy the setEmail property because it is not a function; undefined
    this.setState({ email: value });
    this.props.saveEmail(value);
  };

  handleEmailSignup = (e) => { <-------- Cannot spy the setEmail property because it is not a function; undefined
    this.setState({ offersSignup: e.target.checked });
  };

  onChangeAge = (e) => { <------ Cannot spy the setEmail property because it is not a function; undefined
    this.setState({
      selectedAge: e.target.value,
      selectedAgeIndex: e.target.index - 1,
      errorAge: '',
    });
  };

  createAges() { <------ can spyOn as it is a function
    let ages = [
      { value: '', text: !__isEmpty(sessionStorage.getItem('gf')) ? 'Kid age' : 'Your age' },
      { value: '14 and younger', text: '14 and younger' },
      { value: '15', text: '15' },
      { value: '16', text: '16' },
      { value: '17', text: '17' },
    ];

    this.setState({ ages: ages });
  }

  render() {
    return (
      <div>
        <div data-type="email" className="textbox-wrapper">
          <Textbox
            type="email"
            placeholder="Email Address"
            name="register-email"
            onChange={this.setEmail}
            onBlur={this.checkUserByEmail}
            defaultValue={this.state.email}
            isError={!__isEmpty(this.props.emailErrorClass)}
          />
        </div>

        <Dropdown options={this.state.ages} onChange={this.onChangeAge} selectedValue={this.state.selectedAge} />

        <div>
          <input name="offersSignup" type="checkbox" onChange={this.handleEmailSignup} checked={this.state.offersSignup} />
        </div>
      </div>
    );
  }
}

const mapDispatchToProps = { saveEmail };

export default connect(null, mapDispatchToProps)(BaseForm);

it.only('set email in local state if onChange of Textbox is fired', () => {
    //console.log(BasePartnerRegistrationForm.WrappedComponent.prototype.setEmail);
    // above is undefined
    const setEmailSpy = jest.spyOn(BaseForm.WrappedComponent.prototype, 'setEmail');
    const wrapper = mount(
      <Provider store={store}>
        <BaseForm {...baseProps} />
      </Provider>
    );

    const event = { target: { value: 'event value' } };
    wrapper.find('Textbox').at(0).simulate('change', event);
    wrapper.update();
    expect(setEmailSpy).toHaveBeenCalled();
    // below shows unchanged email value in state
    // expect(wrapper.find('Textbox').at(0).props().defaultValue).toBe(event.target.value);
  });

Answer 1

Rather than spying on the method call, just check the DOM. First, I would suggest you look at React Testing Library for finding fields, setting values, querying the DOM for changes. This, with Jest, is the new standard in React testing (even included with React-Create-App). It's a paradigm shift, in that use test user interaction and result (as a user would), which is testing the underlying logic.

The next thing to consider is timing. When you set state it isn't immediate. It takes a few milliseconds for state changes to render. RTL provides a waitFor method that simplifies this further.

waitFor(() => /*some assertion*/);