Jest onSpy не распознает функцию компонента React
Это меня полностью озадачило, несмотря на все попытки.
Я тестирую компонент 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')
Что я делаю неправильно? Любая помощь действительно ценится.
1 ответ
Спасибо Гаррет. У меня новый взгляд на проблему, но нет ответа. Развернутый компонент представлял собой HOC для использования стилей Material-UI. Поскольку это был HOC, он терял доступ ко всем методам упакованного компонента.
Фактический экспорт был:
NewTransactionForm.propTypes = {
classes: PropTypes.object.isRequired,
};
export default withStyles(styles)(NewTransactionForm);
Когда я вынул стиль и экспортировал с:
export default NewTransactionForm;
Я был в состоянии получить доступ к функции onChange. Сейчас я ищу способы сделать методы упакованного компонента доступными для внешних вызовов, но это другой вопрос.