React - Testy zwracają błąd, a aplikacja działa poprawnie

Question

Po naciśnięciu na przycisk, powinien zostać wywołany callback onSubmit z wartościami wszystkich pól formularza.
W samej aplikacji wszystko działa poprawnie, ale testy pokazują, że funkcja nie została wywołana.

 

Test w Jest z Enzyme:

const setup = (propOverrides) => {
	const props = Object.assign({
		fields: [],
		error: '',
		onSubmit() {}
	}, propOverrides);

	const wrapper = shallow(
			<Form {...props}/>
	);

	return {
		props,
		wrapper
	};
};

it('sends fields data to callback after push submit button', () => {
  const inputValue = 'Some text';
  const submitCallback = jest.fn();

  const {wrapper, props} = setup({
    onSubmit: submitCallback,
    fields: [
      {
        key: 'first',
        value: inputValue
      },
      {
        key: 'second',
        value: inputValue
      }
    ]
  });

  const output = {
    [props.fields[0].key]: inputValue,
    [props.fields[1].key]: inputValue
  };

  wrapper.setState({isSubmitDisabled: false});
  wrapper.update();
  wrapper.find(Button).simulate('click');

  expect(submitCallback).toHaveBeenCalledWith(output);
});

 

Część mojego komponentu:

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

        //Create State
    
        //Other bindings
		this.callOnSubmitWithData = this.callOnSubmitWithData.bind(this);
	}
  
    //...
  
	callOnSubmitWithData() {
		const data = this.extractFieldsData();
		this.props.onSubmit(data);
	}

	extractFieldsData() {
		//Returns object with all fields values
	}

	render() {
		const {fields, error, buttonTitle} = this.props;

		return (
			<View>
				<View>
				{
					fields.map((data) => {
						//...
						return (<AuthTextInput/>);
					})
				}
				</View>

				<Button 
					title={buttonTitle}
					onPress={() => this.callOnSubmitWithData()}
					disabled={this.state.isSubmitDisabled}
				/>
			</View>
		);
	}
}

export default Form;