Jest onSpy无法识别React组件功能

Question

尽管尝试了一切，但这个让我完全感到困惑。

我正在用Jest / Enzyme测试React组件。此测试模拟修改元素，然后调用onChange方法。

当我运行测试时，我从Jest获得此信息：

因为它不是函数，所以无法监视onChange属性。未定义给定

为什么？？

以下是组件的关键部分：

import React, {Component} from 'react';
import EntitiesPulldown from './entities-pulldown'

class NewTransactionForm extends Component  {

constructor(props) {
   super(props);

   this.state = {
       amount: "0.00",
       investors_4_picklist: [],
       selectedTType:0      
   };

   this.onChange = this.onChange.bind(this);
} 

onChange(event) {
      const value = event.target.value;
      const name = event.target.name;

      this.setState({
        [name]: value
      });
      console.log("just set "+name+"  to  "+value)

}

render() {
return (  
      <div>
           <EntitiesPulldown                                                                           
               itemList = {this.state.investors_4_picklist}                                                                                                                                                      
               handleChangeCB = {this.onChange}
             />
      </div>
  )
 }
}
export default NewTransactionForm;

非常简单。这是测试：

test('NTF calls onChange after select', () => {
  const wrapperInstance = mount(<NewTransactionForm />).instance();

  const spy = jest.spyOn(wrapperInstance, 'onChange')  //fails

  wrapperInstance.update().find('select').simulate('change',{target: { name: 'selectedTType', value : 3}});

  expect(spy).toHaveBeenCalled();
});

我也尝试了此选项，结果相同：

  const spy = jest.spyOn(NewTransactionForm.prototype, 'onChange')

我究竟做错了什么？任何帮助真的很感激。

Answer 1

谢谢加勒特。我对问题有了新的看法，但没有答案。部署的组件是一个包装的 HOC，以便使用 Material-UI 样式。因为它是一个 HOC，所以它无法访问包装组件的所有方法。

实际出口量为：

NewTransactionForm.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(NewTransactionForm);

当我取出样式并导出时：

export default NewTransactionForm;

我能够访问 onChange 函数。我现在正在寻找使外部调用可以访问包装组件的方法的方法，但这是另一个问题。