Jest onSpy не распознает функцию компонента React

Question

Это меня совершенно ошарашило, несмотря на все попытки.

Я тестирую компонент React с помощью Jest / Enzyme.Этот тест имитирует изменение элемента, который затем вызывает метод 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.Сейчас я ищу способы сделать методы упакованного компонента доступными для внешних вызовов, но это другой вопрос.